最終更新：7月25日
カードリンクが重かったのでテキストリンクに変更しました。
はてなブログのカスタマイズ方法まとめ
今回ははてなブログユーザー向けに、はてなブログのカスタマイズ方法を紹介した記事をまとめました。
もしかしたらあなたの知らないカスタマイズがあるかもしれませんので、ぜひぜひご覧ください。おそらく、この手の記事で一番カスタマイズを網羅したんじゃないかと思ってます。
目次を見れば、はてなブログでどんなカスタマイズができるか把握できますね。
カスタマイズの前に注意事項
カスタマイズを行う前に頭に入れておいて欲しいことがありますので、それを先に読んでおいていただくと、非常に助かります。
動作チェックを必ずする
カスタマイズをする上で、とても重要なことがあります。それは、かならずPCとスマホで動作確認をすることです。
PCではちゃんと表示されていても、手違いでスマホだと表示されていないことが多々あります。
今の時代、スマホの表示の方が重要だと思ってください。
カスタマイズ前のコードはバックアップを取っておく
カスタマイズをする時は、どこかにバックアップを取っておくことをおすすめします。メモ帳などにコピペしておいて、念のために保存しておきましょう。
カスタマイズのしすぎは禁物
カスタマイズをするとブログがかっこよくなり、SEOに効果があったりと便利な反面、やりすぎるとページの読み込みがおそくなります。
特に、JavaScriptとjQueryを使ったカスタマイズは速度に影響がでやすいです。
↑このサイトで記事の速度を測定するのをオススメします。
アナリティクスを導入しているブログなら、行動→サイトの速度→速度の提案で点数が一覧で見られるのでかなり便利です。
特に関連記事の表示は速度に影響が出るので、使いすぎには注意です。
コードに変更がないか定期的に確認する
これ重要。導入したからそれでおしまいではなく、数か月に一回くらいでいいので、導入したカスタマイズのコードが修正されていないか確認すること。
コードにミスやバグがあるかもしれません。公開された後に修正されていることもあります。
また、各WEBサービスが提供しているAPIには稀に仕様変更があるので、カスタマイズのコード修正を余儀なくされることがあるからです。
シェアボタンのカスタマイズ
カスタマイズの定番といえば、シェアボタンのカスタマイズです。デフォルトのシェアボタンですと読み込みに時間がかかり、スマホなどは場合によって表示されないこともあります。シェアして欲しい人はカスタマイズしておきましょう。
いくつかの種類のシェアボタンが公開されているので、この中から選んでカスタマイズしてみて下さい。
【変更お願い!】コピペのみではてなブログのソーシャルボタンをシェア数付きでおしゃれにするカスタマイズvol.2 – Yukihy Life
コピペ一発！はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ！ – いつ俺〜いつから俺ができないと錯覚していた？〜
コピペで簡単！はてなブログのシェアボタンをカスタマイズ – SHIROMAG
はてなブログの記事上下にレスポンシブなカウント付きシェアボタンをつけるカスタマイズ（修正あり） – Minimal Green
今回は、シェア数のカウントができるカスタマイズをチョイスしてみました。
シェアボタンに関するお知らせ
Facebookのシェア数がカウントされない、「0」の時にぐるぐる回って表示されないという人は、こちらを参考にして下さい。
（グルグルする不具合治しました）Facebookの仕様変更があったので、シェア数カウントのコードを修正して下さい
2016年5月以前にシェアボタンをカスタマイズした人で、以下の変更をしていない人はもう一度貼り直しが必要です。
ぴえええええ！Facebookのシェアボタンのコードを修正して下さい（はてなブログ向け）！！
フォローボタンのカスタマイズ
はてなブログの読者や、Twitter、Facebook、Feedlyなどのフォロワー・読者を増やしたい人にはオススメのカスタマイズ。
多くの方々が公開しているので、好きなデザインから選んでみるとよいかと思います。
はてなブログに11種類から選べるSNSフォローボタンをコピペ＋αで実装するカスタマイズ – いつ俺〜いつから俺ができないと錯覚していた？〜
コピペ+αではてなブログにSNSフォローボタンを設置するカスタマイズ – Yukihy Life
はてなブログをコピペ+αでカスタマイズ！おしゃれなSNSフォローボタンのつけ方 – くうねるだす
読者になるボタンのみの設置
読者登録ボタンだけを強調したいという方は設置方法を紹介しているので、こちらをどうぞ。
はてなブログの読者登録ボタンの設置やカスタマイズ – SHIROMAG
記事タイトルのカスタマイズ
コピぺでOK！CSSのみで記事タイトルのデザインをおしゃれにする方法15【はてなブログカスタマイズ】 – North-Geek
見出しのカスタマイズ
文章を見やすくするには、やはり見出しをはっきりと表示させることが大切です。ブログの雰囲気も大きく変わるので、できるだけカスタマイズしておきましょう。
コピペ一発ではてなブログ見出しをカスタマイズ！ちょっとの工夫で印象が格段に変わる！ – Yukihy Life
テーマと見出しがかぶってしまった際の対処方も書いています。
コピペで簡単！CSSではてなブログの見出しをカスタマイズ！ – SHIROMAG
たくさんの見出しカスタマイズ
コピペでどうぞ。はてなブログ用見出しカスタマイズをとりあえず25個ほど – つばさのーと
リストのカスタマイズ
コピペでOK！CSSのみでリストをおしゃれにする6つの方法【はてなブログカスタマイズ】 – North-Geek
目次のカスタマイズ
はてなブログの公式目次機能にちょっとコードを足してグッと使いやすくするカスタム – Yukihy Life
グローバルナビ（ヘッダーメニュー）の設置
ヘッダー部分にメニューを設置することで、ブログ内の回遊率を高めましょう。ジャンルから色んな記事を読んでみたいという閲覧者も必ずいるかと思います。
はてなブログにグローバルナビゲーションをつけてみた – AIUEO Lab2
はてなブログのスマホ表示にグローバルナビゲーションを設置する – AIUEO Lab2
CSSで組んだドロップダウンメニューとトグルメニューを両立させたレスポンシブなメニューの作り方【コピペでOK】 – Yukihy Life
【jQuery】ナビゲーションをアニメーションで表示しページ上部に固定する方法 – North-Geek
トップページのカスタマイズ
はてなブログのトップページ一覧形式表示を使ってカード型レイアウトに – Minimal Green
強調太字のカスタマイズ
コピぺでOK！CSSのみで強調太文字のデザインを蛍光ペン風にする方法10色【はてなブログカスタマイズ対応】 – North-Geek
パンくずリストの設置方法
Google先生は、カテゴリー→記事の構造を分かりやすくすることを推奨しています。そのためにも、パンくずリストを設置しましょう。これはSEOにも効果があると言われています。
はてなブログでGoogleにパンくずリストを認識させるブログパーツ – 太陽がまぶしかったから
親カテゴリーが不要なら公式でも設置できます。
記事のカテゴリーを「パンくずリスト」として表示できるようにしました – はてなブログ開発ブログ
「続きを読む」をカスタマイズ
続きを読むを見やすく、オシャレにする方法。特にマウスがのった時のエフェクトにこだわっているカスタマイズです。
コピペ一発！はてなブログの続きを読むボタンをめっちゃオシャレにカスタマイズ！ – いつ俺〜いつから俺ができないと錯覚していた？〜
関連記事を表示する
せっかくブログに訪問した閲覧者がすぐ帰ってしまってはもったいないですよね。関連する記事を表示させて、回遊率を高めましょう。
※2017年6月、はてなブログの機能で関連記事を表示できるようになりました。
記事下に「関連記事」を表示します – はてなブログ開発ブログ
その他の関連記事。
はてなブログの記事下に関連記事を表示する「あわせて読みたいG」 – 太陽がまぶしかったから
はてなブログで同じカテゴリの記事を新着順に表示して関連記事っぽいものを作るカスタマイズ – Yukihy Life
はてなブログに「あわせて読みたい」機能を追加するAlso readをリリースしました – すなばいじり
関連記事のサムネイル表示を選択できて、カテゴリー別の記事一覧をタブで切替可能なプラグインを自作した – はぴらき合理化幻想
↑↑最近見つけたのですが、PageSpeed Insightsの減点が少なくておすすめ。
Milliard
このMilliardをカスタマイズする方法↓↓
Milliard関連記事プラグインのCSSをいじり２列にしてブログになじむようにしてみました – Yukihy Life
関連記事は、ページ速度が遅くなる原因になるので、使い過ぎには注意しましょう。
ある程度アクセスやアドセンス収益がある人は、アドセンスの関連コンテンツユニットを利用してみるのも良いでしょう。
ヨメレバ・カエレバのカスタマイズ
アマゾンや楽天などのリンクを生成してくれる、ヨメレバ・カエレバのカスタマイズを紹介した記事です。
ヨメレバ・カエレバをカスタマイズしておけば、きっとクリック率がアップするでしょう。
コピペでどうぞ。CSSでカエレバ・ヨメレバのデザインカスタマイズ2案目 – つばさのーと
コピペ一発！はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ！ – いつ俺〜いつから俺ができないと錯覚していた？〜
ヨメレバ・カエレバのデザインをCSSで変更するカスタマイズ！ – Yukihy Life
リンクを目立たせたい時のカスタマイズ
おすすめ記事・関連記事のリンクを枠で囲って目立たせるカスタマイズ – SHIROMAG
リンクを枠で囲むことで、目立たせることができます。クリックして欲しいリンクがある時に使うのがおすすめです。この記事でもうざいくらい使ってますね。
間違いなくクリック率は上がるはずです。
アドセンスの貼り付けを自動化
毎回記事を書くごとに記事中にアドセンスを貼るのは面倒です。このコードを利用して、アドセンスの貼り付けを自動化するととても楽ですね。
【改良版】コピペで簡単！はてなブログで「文中にアドセンス広告を入れる」を自動化する方法 – UXエンジニアになりたい人のブログ
サイドバーのカスタマイズ
サイドバーの固定（追従）
いくつかの記事でサイドバーの固定（追従）が紹介されていますが、スマホに対応していなかったり、ウィンドウサイズが狭くなるとおかしな挙動をすることがありました。
それを解決したのが、コチラの記事です。
レスポンシブに対応したサイドバー固定Ver.2（はてなブログ向け） – SHIROMAG
サイドバーモジュールをタブメニューにする
はてなブログで複数のサイドバーモジュールをタブメニューにして回遊率アップを狙うカスタマイズ – Yukihy Life
サイドバーに画像を貼る
『はてなブログ』のカスタマイズ！サイドバーに画像編 – wepli.2
Facebookぺージを表示する方法
＜はてなブログ＞Facebookページのページプラグイン設置方法 – イロイロひとりごと。
吹き出しで会話形式にする方法
「吹き出しで記事を会話形式にする方法がとても面倒」ということだったので、簡単に実装する方法を紹介しました。
吹き出しで会話形式にするのをめっちゃ楽にしてみた【はてなブログ】 – SHIROMAG
YouTubeの貼り付けを軽くする方法
YouTubeが大量に埋め込まれている記事はとても読み込みに時間がかかってしまいます。動画を一度画像にして、クリック時に動画になるように設定する方法です。
YouTubeを埋め込んでも重くならないようにする方法がめっちゃ良かった – SHIROMAG
TOPへ戻る
ページの途中、または下部からページのトップに戻るのを楽にする方法です。無駄なスクロールを減らせるので、閲覧者は嬉しい機能です。
はてなブログにページトップへ戻るボタンをつけよう！ – No Hack No Life
カテゴリーごとにおすすめ記事を切り替える方法
当ブログのカスタマイズで、一部の方々に支持を頂いたカスタマイズです。単にオススメ記事を表示するのではなく、カテゴリごと記事を切り替えることができます。
【はてなブログ】記事のカテゴリーによってオススメ記事を切り替える方法 Ver.2 – SHIROMAG
jQueryの読み込みを早くする方法
jQueryのコードは読み込みに時間がかかるのですが、以下の方法に書き換えるとかなり改善します。
比較的速いCDNにして、古いIEと新しいIEで分岐させる方法。
はてなブログをカスタマイズしてる人向け。jQueryの読み込みを速くするためにコードを変えてみた – SHIROMAG
はてなのjQueryを利用する方法。
「はてなブログ」高速化・GTmetrixでA評価達成！ – STDIO
はてなブログでjQueryの読み込み時間をゼロにする方法（はてなブログの高速化）
↑はてな側でパスが変更されたら使えなくなるので注意は必要かも。
カスタマイズが楽なデザインテーマ
ブログ初心者にとってカスタマイズというのは少し難しく感じるかもしれません。そんな方々のために、カスタマイズ用のCSSコードがデフォルトで設定されているデザインテーマがありますので、紹介しておきます。
Brooklyn
はてなブログの超便利なデザインテーマ「Brooklyn」を作りました – SHIROMAG
SOHO
カスタマイズが超簡単なデザインテーマ「SOHO」を公開しました – SHIROMAG
CONTENTS
多数のCSSカスタム適用済のコンテンツ制作に最適なテーマCONTENTSを発表 – DREAMARK
Spirea
はてなブログの便利過ぎるテーマ「Spirea」を作った｜一瞬で自分だけのデザインにできる！ – いつ俺〜いつから俺ができないと錯覚していた？〜
Naked
オシャレ・レスポンシブ・カスタム可能なはてなブログテーマ「Naked」リリース！ – Yukihy Life
DUDE
はてなブログを一瞬でおしゃれにする最強のデザインカスタマイズ方法（テーマDUDEの手引き） – Literally
Minimalism
シンプルで美しいはてなブログの新テーマ「Minimalism」を公開しました。 – ひつじの雑記帳
色んなテーマがあって楽しいですね。
スマホ専用のカスタマイズ
スマホに特化したカスタマイズ。基本的にはてなProになっていないと利用できません。この機会にはてなProへのグレードアップをしてみてはいかがでしょうか。
スマホ表示を「レスポンシブ」にしている人は関係ないやつです。
自ブログのカスタマイズを無料で公開した太っ腹記事。
WordPress勢に負けないためのはてなブログ・スマホデザイン最強カスタマイズ集 – ひつじの雑記帳
おしゃれブログ。
はてなブログのスマホデザインCSSをカスタマイズして、簡単にオシャレに見せる方法 – Literally
スマホで表示されている不要なやつ消しちゃおうぜ。という記事。
はてなブログのスマートフォン表示から不要な要素を削除する方法 – またろぐ
この記事はすごい。書くのに相当時間かかったんじゃないかと思います。それくらいたくさんのスマホカスタマイズが紹介されています。
はてなブログのスマホデザインを一瞬でおしゃれにカスタマイズする方法 – いつ俺〜いつから俺ができないと錯覚していた？〜
スマホでカテゴリー一覧を自動生成する方法
コピペ一発！はてなブログのスマホページでカテゴリ一覧を自動生成するカスタマイズ – いつ俺〜いつから俺ができないと錯覚していた？〜
スマホの画面下にメニューを表示するやつ。
はてなブログスマホ画面にホーム・人気記事・カテゴリ・トップへ戻るの複合メニューバーをつけるカスタム – Yukihy Life
はてなブログのスマホ表示にグローバルナビゲーションを設置する – AIUEO Lab2
[おまけ]ブログに導入しておきたいやつ
ここまではカスタマイズの方法でしたが、それ以外にもはてなブログに導入しておきたいツールなどを紹介しておきます。
Search Console
はてなブログにSearch Consoleを導入しよう。どの記事が検索されているのか、どんなワードで検索されているのか、クローラのエラーが出てないかなどのチェックができるので、必須のツールです。
はてなブログにSearch Console（ウェブマスターツール）を導入しよう – SHIROMAG
Google Analytics
Analyticsがあれば、色んな事ができます。PV数、直帰率、ページの閲覧時間、リアルタイムのアクセス数、閲覧者の流入経路などなど。導入しないと絶対損です。
【画像解説】はてなブログにGoogle Analyticsを導入しよう – すなばいじり
アドセンス・アフィリエイト
はてなProにするなら、アドセンスを導入してお小遣い稼ぎもできます。審査や条件（独自ドメイン等）はありますが。
はてなブログ収益化の第一歩！アドセンスに登録する方法と使い方 – MUTANT
アドセンス以外のアフィリエイトプログラムの紹介。もちろん審査や条件はあります。
あと、カスタマイズではないけどあると便利なやつ
はてなブログ向けChrome拡張機能
見たままモードの記事作成が楽になる拡張。
はてなブログ編集用のChrome拡張機能を作りました（使い方の説明） – SHIROMAG
画像のタイトルとalt属性を編集できるやつ。
はてなブログの画像タイトルとaltを編集できる「はてブロimageTitle」というChrome拡張を作った – すなばいじり
まとめ
最初にも書きましたが、カスタマイズしまくれば良いというわけではなく、ページの読み込み速度とのトレードオフだと思った方が良いでしょう。
このようなブログのカスタマイズを通して、HTMLやCSS、そしてJavaScriptに興味を持って勉強し始めるのも良い機会かもしれません。
自分でいじれるようになると、とっても楽しいですよ！
しかし、こんなに多くの方々がカスタマイズ記事をアップしてくれるのは、本当に助かります。感謝感謝ですよ。
他にも面白そうなカスタマイズがあれば、どんどん追記していく予定です。
ブログのカスタマイズを勉強するならコチラの書籍が超おすすめ。
HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)
- 作者: エビスコム
- 出版社/メーカー: ソシム
- 発売日: 2014/10/28
- メディア: 単行本
- この商品を含むブログ (5件) を見る
自分でHTML・CSSをいじりたい方はこちら
最近のコメント