はてなブログProにしてから行ったデザインカスタマイズまとめ

結構悩んだんですが，やっぱり自分の好きなようにデザインいじくりまわしたーい！ということで，はてなブログPro申し込んじゃいました．
勢い余って1年分．

当然のことながら振り込んでしまったお金は戻ってこない訳で，「もうやるっきゃないよね！」という謎の義務感に駆られながら，
ド平日に3日くらいかけてカスタマイズしました．

流石に全部を1日で片付けるのは無理でしたが，ちょこちょこやれば意外とカスタマイズいけます！
ということでやったこと一覧です．

目次

はてなブログの各種設定変更

広告表示の変更

はてなの広告表示をOFFにします．

ダッシュボード→設定→詳細設定の，「Google AdSense広告」にチェックを入れます．

キーワード自動リンク機能OFF

Jugemやら忍者やらでキーワードリンクがないのに慣れていたので，こちらもOFFにしました．

ダッシュボード→設定→詳細設定の，「キーワードリンク」にチェックを入れます．

広告表示とキーワードリンクの設定後の画面はこんな感じになるはずです．

サイドバー表示のカスタマイズ

デフォルトで項目の追加，並び替えができます．
注目の記事と最新エントリをアイコンつきで追加しました．

あと，現状では全く活用できていないですが，Twitterウィジェットも付けました．
Twitter公式サイトで作成したウィジェットコードをコピーして，はてなブログに貼り付けます．

ウィジェットはTwitter公式ページ（PC）の「設定」→「ウィジェット」から作れます．

今回は，高さ300ピクセルのウィジェットを作成しました．
幅については，挿入箇所に応じて自動で調整してくれるようです．

PC・スマホ共通

見出しの変更

ゆきひーさん（id:ftmaccho）のエントリを参考に見出しを変更しました．

うちのブログはどちらかというとタイトル画像がうるさめなので，見出し含め各種ボタンはすべてグレースケールにしています．

ソーシャルボタンのカスタマイズ

デフォルト表示があんまり可愛くなかったので，こちらもゆきひーさん（id:ftmaccho）のエントリをもとに変更．
※2015.9.30以降にも対応したものが以下エントリだそうです．

ページ下への「読者になる」ボタン設置

こちらは公式ブログで発表があったものです．

自分自身「読者になる」ボタンを押すために爆速スクロールしたり，リロードしたりすることが度々あったので，ページ下にもボタンを置くことにしました．

コピペしたコードをソーシャルボタンのコード下に貼ればできあがりです．

パンくずリストの設置

こちらはPro移行前にやっていたカスタマイズですが，俗に言うパンくずリストを設置しました．

画像周りに自動でドロップシャドウを追加

一長一短な気はするのですが，何となく導入してみました．
しばらく運用してみて，無いほうが見やすそうなら変更しようと思います．

リンクターゲットを「新しいウィンドウ」に自動設定

他ブログ拝見中に，元ページを見失ってしまって「戻る」連打というのを結構しでかすので，リンクターゲットを「新しいウィンドウ」に自動設定しました．

引用されている元ブログが見つからなかったため，下記エントリのコードをお借りしました．

PC表示のカスタマイズ

グローバルメニューの設置

良くも悪くも話題が極端なのでドロップダウン式のグローバルメニューを付けました．
こちらのブログを参考に基本ソースを組んで，枠線関連だけ少しいじっています．

CSSだけで作る「多階層」なドロップダウンメニュー｜Webpark

子階層へのアノテーション設置はこちらのブログを参考にしました．

CSSのみで作るドロップダウンメニュー(シングル＆多階層＆メガ) | UNORTHODOX WORKBOOK | Blog

で，出来上がったのがこちら．

初期状態はこんなのですが，

マウスオーバーすると子カテゴリが出てきます．

トップ画面のカスタマイズ

フッタの非表示化

トップ画面に複数記事を表示するので，はてなスター等のフッタを非表示化しました．
ついでに，サイドバーのタイトルに太めの下線を入れるように変更しました．

「続きを読む」ボタンのカスタマイズ

デフォルト表示だと記事に埋もれてしまうので，ボタンっぽい表示にしました．

スマホ表示のカスタマイズ

レスポンシブデザインを使用していないので，スマホについては別個でデザインを組むことにしました．

トグルメニューの設置

グローバルメニューと悩んだのですが，長めのエントリがいくつかあったため，スクロールに追従するトグルメニューにしました．

表示カテゴリについては，閲覧率が高いカテゴリを抜粋することにしました．

不要な項目の非表示化

デフォルトでページ下に表示されるはてな関連の項目を非表示にしました．

この辺りのことです

微々たるレベルだと思うんですが，使いもしないところでパケットを食うのを少しでも避けたいという悪足掻きです．

おわりに

CSSを触るのはほぼ10年ぶりでしたが，今は先人の方々がコードを公開して下さっているので，少しかじった程度の知識でも結構がっつりカスタマイズできます．有難い限りです．

これからも色々なデザインカスタマイズを試してみたいと思います．

関連記事