ブログを「週刊はてなブログ」っぽくカスタマイズしてみた
みなさん「週刊はてなブログ」って知ってますか？
はてなブログの公式ブログで、はてなブログのトップページの下の方にリンクが貼ってあります。
週刊はてなブログのヘッダーのタイトルのフォント、かっこよくない？
かっこいいよね！
そこで、私の漫画感想ブログ「漫画とアニメの感想書くよ！」を週刊はてなブログっぽくカスタマイズすることにしました。
まずは書体を調べる
とりあえず、なんの書体を使っているのか調べることから取り掛かります。
まずは「週刊はてなブログ フォント」でググりましたが、わかりませんでした。
パソコンに入っている明朝体と見比べてみましたが、似たようなものはありません。
もう一度じっくりタイトルロゴを見てみると、新聞の書体っぽいことに気づきました。 そこで、モリサワの書体見本ページで新聞書体を探してみたところ、ありました！ いくつかありましたが、おそらくこれで間違いないでしょう
「毎日新聞明朝 L」
幸い、モリサワパスポートのユーザーな私。
Illustrator上で、本物のロゴと打ち込んだ字を比較してみました。
うん。まちがいないね！
ヘッダータイトル画像を作るよ！
どうやら元画像はRetinaディスプレイ対応のために、通常の２倍の大きさで作られているようです。同じように1920x228pxで画像を作ります。
今回はIllustratorを使用。
画像を作り、Web用に保存します。
プリセットはPNG-24。
透明部分にチェックを入れ、文字に最適を選んだ状態で保存。
これで文字の部分以外透明な画像になります。
作成代行します!
この作業はモリサワパスポートを使っていないとできません。
もしくは、毎日新聞明朝 Lを単体で購入している必要が有ります。
もし同じように自分のブログの題字の画像（文字だけ）を作りたい場合、一つ1500円で作成代行いたします。(※上で挙げたようなシンプルなものの場合の値段です。商標登録はできません。領収書発行はいたしません。場合によってはお受けできない場合が有ります。)
ご依頼される方はツイッターでダイレクトメッセージを送ってください！
公式っぽいテーマに変更
まずはそれっぽいテーマに変更します。
今回はこちらを使用させていただきました。
Simple Gray
Simple Gray - テーマ ストア - はてなブログ
選定理由：なんかそれっぽい
画像のアップロード
デザイン→カスタマイズ→ヘッダ から、タイトル画像をアップロードします。
表示設定は「画像だけ表示」にしておきます
このままではタイトルだけ表示されてしまい、ブログの説明がなくなってしまうので、タイトル下の部分に文章をHTMLで入れておきます。
例
<p id="blog-description">読んだ漫画、見たアニメの感想を書いています。少女漫画が大好きな20代男子のブログです。</p>
そして、「デザインCSS」の部分に以下のコードをコピペします。
#blog-description {
font-size: 12px;
font-weight: normal;
display: block;
width: 60%;
padding: 8px;
margin: 0px 20% 30px 20%;
background: rgba(255, 255, 255, 0.6);
border-top: 2px solid #4e5057;
border-bottom: 2px solid #4e5057;
text-align: center;
}
.header-image-only #blog-title #blog-title-inner {
height: 130px;
width: auto;
}
最近全然CSSに触れていなかったから、いろいろ忘れました。
なんか余計なコードも入っているかもしれません。
とりあえず完成したものはこちら
公式はこちら
割と公式っぽくできたね！ でも、公式と比べてちょっとタイトルロゴがぼやけてます。
はてなブログのヘッダー画像は1000pxを超えるとリサイズされるみたいで、せっかく大きいサイズで作っても低解像度化されてしまうのが残念です。 今回はとりあえずPC版だけカスタマイズしました。 そのうち余裕ができたら、スマホ対応の公式っぽいはてなブログのテーマを作る予定です。
なんかこの記事を書いている数日のうちに、「週刊はてなブログ」のデザインが若干変更されました。なんてこったい！
お読みいただきありがとうございました！
Sponsored Link
