当はてなブログで使わせてもらったカスタマイズやデザインのまとめ

最近ちょこちょことブログのデザインをいじっている。
と言ったってこの手の知識はてんで疎いので賢人の皆さんが残してくれた知見の恩恵を受けている。
参考にさせていただいた皆さんに御礼申し上げます。

さて今回は、当ブログに施した各種カスタマイズをまとめておこうと思います。（はてなブログPROでないとカスタム出来ない内容も含まれていますのでご注意ください）

PC表示のカスタマイズ

デザインテーマはDUDE

DUDE - テーマストア - はてなブログ
おしゃれでスッキリしたデザインがかっこよかったのでこちらを採用させていただいた。
ヘッダーの画像を外すことで画面上部の見た目の重たさが解消されるので大変満足している。
ただ作者の方がおっしゃっているようにブログのタイトルは英語のほうがデザイン的にキマルのは間違いないが、当ブログに関してはゴリゴリの日本語なのでどうしようもない。

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

コピペ一発！はてなブログの続きを読むボタンをめっちゃオシャレにカスタマイズ！ - いつ俺〜いつから俺ができないと錯覚していた？〜
そのままだとそっけない「続きを読む」をおしゃれにカスタマイズする方法。

カテゴリーの表示をコンパクトにまとめるカスタマイズ

はてなブログのカテゴリーが縦に長くなるのを解消する - NO TITLE
記事数が多くなるとどうしても増えてしまうカテゴリー。
縦に一列で並べると妙に長くなってしまうので、それを左詰めにしてコンパクトに表示してくれる。

スマートフォン画面のカスタマイズ

記事下に挿入されるはてな関連のリンクを消す

f:id:dobonkai:20160416125047p:plain
こういうの↑

スマホ表示の場合、記事の一番下に「はてなブログをはじめよう」みたいな、はてな関連へのリンクが挿入されるのが鬱陶しいのでそれを消したい。

「設定」→「詳細設定」→「headに要素を追加」に以下のコードを貼り付ける。

<style>

.footer-action-wrapper{display:none;}
/*↑はてなブログを始めようの非表示*/

.touch-item-list{display:none;}
/*↑はてなブログ開発ブログ等のリンクの非表示*/

</style>

スマホ画面の上部にある「はてなのグローバルナビ」を消す

【スマホ版】はてなブログのヘッダー部分のカスタマイズ方法まとめ（グローバルナビ・フォント変更・デフォルト表示削除など） - Awesome
上記の記事はナビを消すだけではなくて、ヘッダ部分に表示される丸いアイコンの消し方も説明されているのでそちらも参考にさせていただいた。

スマホ表示にグローバルナビを追加する

はてなブログのスマホ表示にグローバルナビゲーションを設置する - AIUEO Lab2
はてな標準のグローバルナビを削除してすっきりさせたところに、あらたに自分でカスタマイズしたグローバルナビを追加する方法。

PC表示スマートフォン表示両方に使ったカスタマイズ

各種シェアボタンのカスタマイズ

はてなブログのシェア数付きソーシャルボタンカスタマイズでフラットボタンのコピペコードを追加です。(vol2) - Yukihy Life
はてな標準でも各種のシェアボタンはあるけれどその読み込みスピードは決して早くないし、デザイン的にもあまり好きじゃない。
こちらのカスタマイズだと今流行りのフラットボタンだし読み込みも早く標準ボタンよりも軽い気がする。

各種SNSのフォローボタンのカスタマイズ

コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ - Yukihy Life
PCはサイドバーに、スマホ画面では記事下に設置させていただいた。
特にスマホ側は、はてな関連のリンクを消すカスタマイズを行っているため、本来なら「読者になる」という欄があるのだが、それも消してしまっている。そのためこういった形でフォローしないとスマホ画面から読者になる事を促せないので、このようなカスタマイズがあって大変助かる。

「あわせて読みたい」のパーツ追加

はてなブログの記事下に関連記事を表示する「あわせて読みたいG」 - 太陽がまぶしかったから
関連記事を表示できる便利なブログパーツ。
いろんな人のブログで使われているのを見かけるわけで、いかにこのパーツが優れていて愛されているのかよくわかる。
少しでも直帰率を改善させたいと願っている人におすすめです。

アドセンスをスターの上に押し上げて表示するカスタマイズ

はてなブログの記事直下にAdSense広告を縦に２つ並べる方法 - 涙拭けよ
「記事下」にそのままアドセンスのコードを貼るとはてなスターの下に表示されるわけだが、それをスターの上に表示させる事ができる。

ヨメレバ・カエレバの表示をカスタマイズ

ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ - Yukihy Life
とても便利なので、当ブログはかなり前からヨメレバ・カエレバを利用してリンクを貼っていたのだが、お世辞にもデフォルトのデザインはおしゃれではない。
その少々野暮ったかったデザインを見やすくおしゃれなフラット系デザインにカスタマイズできる。