はてなブログのカスタマイズ方法まとめ
今回ははてなブログユーザー向けに、はてなブログのカスタマイズ方法を紹介した記事をまとめました。
もしかしたらあなたの知らないカスタマイズがあるかもしれませんので、ぜひぜひご覧ください。おそらく、この手の記事で一番カスタマイズを網羅したんじゃないかと思ってます。
目次
- はてなブログのカスタマイズ方法まとめ
- カスタマイズの前に注意事項
- シェアボタンのカスタマイズ
- フォローボタンのカスタマイズ
- 読者になるボタンのみの設置
- 記事タイトルのカスタマイズ
- 見出しのカスタマイズ
- リストのカスタマイズ
- 目次のカスタマイズ
- グローバルナビ（ヘッダーメニュー）の設置
- 強調太字のカスタマイズ
- パンくずリストの設置方法
- 「続きを読む」をカスタマイズ
- 関連記事を表示する
- アドセンスの貼り付けを自動化
- サイドバーのカスタマイズ
- Facebookぺージを表示する方法
- 吹き出しで会話形式にする方法
- YouTubeの貼り付けを軽くする方法
- TOPへ戻る
- カテゴリーごとにおすすめ記事を切り替える方法
- jQueryの読み込みを早くする方法
- カスタマイズが楽なデザインテーマ
- スマホ専用のカスタマイズ
- [おまけ]ブログに導入しておきたいやつ
- はてなブログ向けChrome拡張機能
- まとめ
カスタマイズの前に注意事項
カスタマイズを行う前に頭に入れておいて欲しいことがありますので、それを先に読んでおいていただくと、非常に助かります。
動作チェックを必ずする
カスタマイズをする上で、とても重要なことがあります。それは、かならずPCとスマホで動作確認をすることです。
PCではちゃんと表示されていても、手違いでスマホだと表示されていないことが多々あります。
今の時代、スマホの表示の方が重要だと思ってください。
カスタマイズ前のコードはバックアップを取っておく
カスタマイズをする時は、どこかにバックアップを取っておくことをおすすめします。メモ帳などにコピペしておいて、念のために保存しておきましょう。
カスタマイズのしすぎは禁物
カスタマイズをするとブログがかっこよくなり、SEOに効果があったりと便利な反面、やりすぎるとページの読み込みがおそくなります。
特に、JavaScriptとjQueryを使ったカスタマイズは速度に影響がでやすいです。
↑このサイトで記事の速度を測定するのをオススメします。
アナリティクスを導入しているブログなら、行動→サイトの速度→速度の提案で点数が一覧で見られるのでかなり便利です。
特に関連記事の表示は速度に影響が出るので、使いすぎには注意です。
コードに変更がないか定期的に確認する
これ重要。導入したからそれでおしまいではなく、数か月に一回くらいでいいので、導入したカスタマイズのコードが修正されていないか確認すること。
各WEBサービスが提供しているAPIには稀に仕様変更があるので、カスタマイズのコード修正を余儀なくされることがあるからです。
シェアボタンのカスタマイズ
カスタマイズの定番といえば、シェアボタンのカスタマイズです。デフォルトのシェアボタンですと読み込みに時間がかかり、スマホなどは場合によって表示されないこともあります。シェアして欲しい人はカスタマイズしておきましょう。
いくつかの種類のシェアボタンが公開されているので、この中から選んでカスタマイズしてみて下さい。
今回は、シェア数のカウントができるカスタマイズをチョイスしてみました。
シェアボタンに関するお知らせ
Facebookのシェア数がカウントされない、「0」の時にぐるぐる回って表示されないという人は、こちらを参考にして下さい。
（グルグルする不具合治しました）Facebookの仕様変更があったので、シェア数カウントのコードを修正して下さい
2016年5月以前にシェアボタンをカスタマイズした人で、以下の変更をしていない人はもう一度貼り直しが必要です。
ぴえええええ！Facebookのシェアボタンのコードを修正して下さい（はてなブログ向け）！！
フォローボタンのカスタマイズ
はてなブログの読者や、Twitter、Facebook、Feedlyなどのフォロワー・読者を増やしたい人にはオススメのカスタマイズ。
多くの方々が公開しているので、好きなデザインから選んでみるとよいかと思います。
読者になるボタンのみの設置
読者登録ボタンだけを強調したいという方は設置方法を紹介しているので、こちらをどうぞ。
記事タイトルのカスタマイズ
見出しのカスタマイズ
文章を見やすくするには、やはり見出しをはっきりと表示させることが大切です。ブログの雰囲気も大きく変わるので、できるだけカスタマイズしておきましょう。
テーマと見出しがかぶってしまった際の対処方も書いています。
リストのカスタマイズ
目次のカスタマイズ
グローバルナビ（ヘッダーメニュー）の設置
ヘッダー部分にメニューを設置することで、ブログ内の回遊率を高めましょう。ジャンルから色んな記事を読んでみたいという閲覧者も必ずいるかと思います。
強調太字のカスタマイズ
パンくずリストの設置方法
Google先生は、カテゴリー→記事の構造を分かりやすくすることを推奨しています。そのためにも、パンくずリストを設置しましょう。これはSEOにも効果があると言われています。
親カテゴリーが不要なら公式でも設置できます。
記事のカテゴリーを「パンくずリスト」として表示できるようにしました - はてなブログ開発ブログ
「続きを読む」をカスタマイズ
続きを読むを見やすく、オシャレにする方法。特にマウスがのった時のエフェクトにこだわっているカスタマイズです。
関連記事を表示する
せっかくブログに訪問した閲覧者がすぐ帰ってしまってはもったいないですよね。関連する記事を表示させて、回遊率を高めましょう。
Milliard
↑↑Milliardをカスタマイズする方法↓↓
アドセンスの貼り付けを自動化
毎回記事を書くごとに記事中にアドセンスを貼るのは面倒です。このコードを利用して、アドセンスの貼り付けを自動化するととても楽ですね。
サイドバーのカスタマイズ
サイドバーの固定（追従）
いくつかの記事でサイドバーの固定（追従）が紹介されていますが、スマホに対応していなかったり、ウィンドウサイズが狭くなるとおかしな挙動をすることがありました。
それを解決したのが、コチラの記事です。
サイドバーモジュールをタブメニューにする
サイドバーに画像を貼る
Facebookぺージを表示する方法
吹き出しで会話形式にする方法
「吹き出しで記事を会話形式にする方法がとても面倒」ということだったので、簡単に実装する方法を紹介しました。
YouTubeの貼り付けを軽くする方法
YouTubeが大量に埋め込まれている記事はとても読み込みに時間がかかってしまいます。動画を一度画像にして、クリック時に動画になるように設定する方法です。
上の記事のHTMLコード作成を楽にするツールです。
TOPへ戻る
ページの途中、または下部からページのトップに戻るのを楽にする方法です。無駄なスクロールを減らせるので、閲覧者は嬉しい機能です。
カテゴリーごとにおすすめ記事を切り替える方法
当ブログのカスタマイズで、一部の方々に支持を頂いたカスタマイズです。単にオススメ記事を表示するのではなく、カテゴリごと記事を切り替えることができます。
jQueryの読み込みを早くする方法
jQueryのコードは読み込みに時間がかかるのですが、以下の方法に書き換えるとかなり改善します。
比較的速いCDNにして、古いIEと新しいIEで分岐させる方法。
はてなのjQueryを利用する方法。
↑はてな側でバージョンとかパスとか変更されたら使えなくなるので注意は必要かも。
カスタマイズが楽なデザインテーマ
ブログ初心者にとってカスタマイズというのは少し難しく感じるかもしれません。そんな方々のために、カスタマイズ用のCSSコードがデフォルトで設定されているデザインテーマがありますので、紹介しておきます。
Brooklyn
CONTENTS
Spirea
Naked
DUDE
うーん、色んなテーマがあって楽しいですね。
スマホ専用のカスタマイズ
スマホに特化したカスタマイズ。基本的にはてなProになっていないと利用できません。この機会にはてなProへのグレードアップをしてみてはいかがでしょうか。
スマホ表示を「レスポンシブ」にしている人は関係ないやつです。
スマホで表示されている不要なやつ消しちゃおうぜ。という記事。
この記事はすごい。書くのに相当時間かかったんじゃないかと思います。それくらいたくさんのスマホカスタマイズが紹介されています。
スマホでカテゴリー一覧を自動生成する方法
スマホの画面下にメニューを表示するやつ。
スポンサードリンク
[おまけ]ブログに導入しておきたいやつ
ここまではカスタマイズの方法でしたが、それ以外にもはてなブログに導入しておきたいツールなどを紹介しておきます。
Search Console
はてなブログにSearch Consoleを導入しよう。どの記事が検索されているのか、どんなワードで検索されているのか、クローラのエラーが出てないかなどのチェックができるので、必須のツールです。
Google Analytics
Analyticsがあれば、色んな事ができます。PV数、直帰率、ページの閲覧時間、リアルタイムのアクセス数、閲覧者の流入経路などなど。導入しないと絶対損です。
アドセンス・アフィリエイト
はてなProにするなら、アドセンスを導入してお小遣い稼ぎもできます。審査や条件（独自ドメイン等）はありますが。
アドセンス以外のアフィリエイトプログラムの紹介。もちろん審査や条件はあります。
あと、カスタマイズではないけどあると便利なやつ
はてなブログ向けChrome拡張機能
見たままモードの記事作成が楽になる拡張。
画像のタイトルとalt属性を編集できるやつ。
まとめ
最初にも書きましたが、カスタマイズしまくれば良いというわけではなく、ページの読み込み速度とのトレードオフだと思った方が良いでしょう。
このようなブログのカスタマイズを通して、HTMLやCSS、そしてJavaScriptに興味を持って勉強し始めるのも良い機会かもしれません。
自分でいじれるようになると、とっても楽しいですよ！
他にも面白そうなカスタマイズがあれば、どんどん追記していく予定です。
ブログのカスタマイズを勉強するならコチラの書籍が超おすすめ。
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: 単行本
- この商品を含むブログ (5件) を見る
他にもこんな記事書いてます。
自分でHTML・CSSをいじりたい方はこちら