自分のはてなブログのデザインも落ち着いてきたので、今まではてなブログをカスタマイズやデザインでお世話になったサイトをご紹介していきたいと思います。
そのため全部を網羅しているわけではなく、自分が便利そうだと思ったものを紹介しているのでご了承ください。
今回ご紹介していくのは
・はてなブログ自体のデザインのカスタマイズ
・はてなブログの本文のデザイン
・はてなブログのシステムに関するカスタマイズ
の3点となっています。はてなブログのみを書いているため、他のブログサービスは考慮していませんので、ご注意ください。
初心者の方はまずこちらをご覧ください。
はてなブログのカスタマイズ
まずははてなブログで記事を書く前に、自分好みにはてなブログのデザインを変更したいと思います。これによって、はてなブログに限らずブログ更新のモチベーションが大きく変わります。
とりあえず見るところ
はてなブログのデザインで困ったなということがあれば、このサイトを見ればほとんど解決します。それくらい丁寧かつ分かりやすくまとめられたサイトです。
またコードをコピペするだけで動くので、手軽にはてなブログのデザイン変更ができるというのも魅力の1つです。
このサイトのカスタマイズ方法を私のブログでも多いに使用しているので、みなさんも使ってみてください。
Twitter関係
Twitter関係のカスタマイズはこの方の記事が大変参考になります。
訪問者を増やすために、SNSとりわけTwitterはとても拡散力があるので、必須と言える機能かもしれません。
グローバルメニューの付け方
タイトルの下にカテゴリーメニューのことを、グローバルメニューやヘッダメニューと呼ぶらしいです！
これはデザインによって、内容が少しずつ違うので自分のブログにあったデザインを見つけるのが一番かと思います。
【はてなブログ タイトル下 カテゴリ】や【はてなブログ グローバルメニュー】と検索窓に打ち込めば、たくさんの種類のカスタマイズを紹介するサイトが見つかると思います。
カテゴリのー階層化
ややこしくなったブログのカテゴリー欄がこれで小さくなります。1つのカテゴリしか書かないという人には不要ですが、大部分の人が必要になると思いますので入れておくといいと思います。
トップページを記事一覧に
こちらは、無料のはてなブログを利用している人限定です。ただしサイトにも書かれていますが、SEO的にもどうかという話があるので、導入する際は自己責任で導入してください。
サイドメニューのカスタマイズ
細かな箇所ではありますが、はてなブログのサイドメニューのタイトル等をオシャレにするカスタマイズがここのサイトにまとまっています。
フッターのカスタマイズ
ブログの一番下のフッター部分のカスタマイズは皆忘れがちですが、つけておいた方がいいと思います。
主に技術系ブログの場合は、ここにプライバシーポリシーなんかを入れておくといいかもしれません。
Aboutページのカスタマイズ
またオークニズムさんの記事になりますが、About記事のカスタマイズになります。
ちなみに私のAboutページはこちら
基本的にこのAboutページははてなブログなら全員見れます。ブログのトップページの後ろに/aboutというURLを追加するだけで見ることができます。
はてなブログをしっかり見てくれる人は見る箇所なので、ブロガーを目指す人は絶対にカスタマイズしておいてほしい部分です。
トップへ戻るボタンの追加
はてなブログで一番下までいった後、またトップまで戻ってサイドバーを見ようかなと思った時にスライドバーを一々動かすの読者としては非常に面倒。
そこでサイドバーを画面についてくるようにするか、このトップへ戻るボタンを追加するかどちらかで対処することになります。
はてなブログでどのような記事を書きたいかにもよりますが、サイドバーを追従させてしまうとスマホだと見にくくなってしまう場合もあるので、基本的にはトップへ戻るボタンでいいと思います。
特に初心者の方は分からないうちは、この方法の方が安全かも？
更新日時を記載
はてなブログに限らず記事を更新したら、それで終了という人は少ないと思います。基本的にはリライト・編集すると思います。
そのリライト・編集したとき編集日時を付けている人は、上記のリンクのようなおしゃれな更新日と編集日を表示させてみてはいかがでしょうか。
読了時間の自動追加
この記事は何分で読むことができるのかを自動で追加するカスタマイズ方法となります。これは離脱率を下げるようなので、ブログで稼ごうと思っている方は重要だと思います。
スマホに固定ボトムナビゲーションの付け方
スマホで表示している時、画面の下に追随してくるメニューがあったら便利だと思ったことはありませんか？
上記の記事では、そのようなときに役に立つボトムナビゲーションの付け方についてのカスタマイズとなっています。
Googleアドセンスの自動貼り付け
はてなブログでGoogleアドセンスを利用している方も多いと思います。
その時、全ての記事に手作業で広告を貼り付けるのは非常に面倒な作業なので、上記の記事を参考に自動でGoogleアドセンスの広告を貼り付けてみてください。
本文のカスタマイズ方法
ブログのデザインが決まったところで、本文のデザインを決めていきます。
本文のデザインとは、例えば本記事でもある見出しのデザインとかの事を指しています。そんな本文のデザインについてご紹介していきます。
見出し・本文背景関係
先ほども出てきたこのサイトです。
見出しについての記事はこちら
記事本文の背景の記事はこちら
目次
上記の記事はアニメーション付きで結構使いやすかった目次カスタマイズです(本ブログではバグるので見送り(泣))
ページ内リンク
こちらの記事が分かりやすく書かれています。
本記事でも使用しているように、記事を一部読み飛ばしたい時などにあったら便利なので、いれておくといいかもしれません。
ただし、ページ内リンクを使うとURLの最後が変わるのが少し気になるところではあります。
吹き出し追加
これがあれば、読者の疑問等を質問のようにすることで共感を得られやすくなり、滞在時間が増える可能性もあります。
合わせて読みたい！の追加
はてなブログだと埋め込みリンクでも見やすいのですが、更に見やすくなるようにカスタマイズするものです。
以下が例
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ | NO TITLE
リンクのボタン風カスタマイズ
前節の合わせて読みたい以外にもボタン式のリンクにしたい場合、上記のサイズのカスタマイズがオススメとなります。
カエレバ・ヨメレバのカスタマイズ
カエレバ・ヨメレバはブログでアフィリエイトをする上で、とても便利なツールとなっています。
本家様は下記リンク
本家様のデザインでも十分オシャレなんですが、より一層オシャレにカスタマイズする方法がまとめられています。
はてなブログでカエレバ・ヨメレバを使おうと思っている方は下記の記事を参考にしてみてください。
はてなブログでカエレバ・ヨメレバの使い方 - TomoGの独り言
引用部分のカスタマイズ
何かしらの情報を他のサイトから引用している人が多いと思います。その引用部分のカスタマイズ方法を書いてくださっているサイト様です。
アプリーチのカスタマイズ
スマホのアプリを紹介するときにとても便利なアプリーチのカスタマイズ方法をまとめて下さっているサイトです。
アプリーチ本家は下記リンク
アプリーチ | iPhoneアプリとAndroidアプリを同時に検索し、統合されたブログパーツを作成出来ます。
システム関係
次にブログのデザインには関係がありませんが、様々な対策を裏でとる必要があります。そんなシステム関係のカスタマイズ方法について本章でご紹介します。
注意点として、システム関係を変更するため変更するときは自己責任となります。ご注意ください。
オフスクリーン画像の読み込み遅延
オフスクリーン画像の読み込み遅延とは、ページの表示を早くするため画面外の画像読み込みを後にする方法となります。
読み込み速度が速いと読者も嬉しいため、SEO的にもよくなるため複雑ですが導入しようと思う方は導入してみてください。
検索結果に表示させない記事
お問い合わせやプライパシーポリシーのページなど、ページとしての価値は非常に薄くても必要なページがあると思います。そのようなとき検索結果に表示させないことで、SEOに悪影響を与えません。
上記の記事はそのような記事に、個別に検索結果を表示させないようカスタマイズする方法をご紹介しています。
その他、自分ではてなブログをカスタマイズしたい方は、ネットで調べるか本で学ぶかのどちらかで作っていくのが一番だと思います。
