ブログのカスタマイズ方法をまとめています𓂃✍︎
- 記事が読みやすくなり、目的の情報に辿り着きやすくなる。
- 滞在時間や回遊率が上がる。
- SEO（検索エンジン最適化）対策になり、検索サイトで上位に表示されやすくなる。
ブログ全体のカスタマイズ
レスポンシブデザインの設定
- はてなブログをカスタマイズしたい。
- デザインを設定したり、カスタマイズをしたはずなのにスマホから見たときのデザインが変わらずに困っている。
はてなブログのカスタマイズを始めるのに、まず第一にやらなければならないレスポンシブデザインの設定方法を詳しく解説しています。
無料ブログで記事を一覧形式にする
- 無料版はてなブログを使っている。
- トップページの記事を『一覧形式』のように表示したい。
- 設定は一度きりで済ませたい。
トップページの一覧形式は有料版（はてなPro）限定の機能ですが、本文などを非表示にすることで「全文形式しか使えない無料版」でも擬似的に一覧形式のように表示することができました。
無料ブログで記事一覧【サムネ付き】
- 無料版はてなブログを使っている。
- トップページの記事を『一覧形式』のように表示して、サムネ画像も載せたい。
- 設定は一度きりで済ませたい。
scriptを使用しますが、記事にトップ画像（サムネイル）を設定している方はこちらがオススメです。
検索窓のデザインと位置を変える
- 検索窓を好きな場所に移動したい。
- 検索窓のデザインを変更したい。
スマホではページ下部にある検索窓をページ上部やメニューバーなど任意の場所に配置し、デザインもカスタマイズできます。
独自の404エラーページを作る
- エラーページをおしゃれにしたい。
- オリジナル画像を組み込んだ、独自性のあるエラーページを作りたい。
- 記事にアクセスできなかった時のユーザー離脱率を少しでも抑えたい。
記事URLを変更したり、非公開・削除した場合はユーザーが該当ページにアクセスできなくなります。そんな時に表示されるエラーページをカスタマイズする方法をご紹介しています。
ステマ規制対策
- ブログ内でアフィリエイト広告を1つでも掲載している。
- 記事1つ1つにステマ規制対策の文言を書いていくのは手間に感じる。
2023年10月1日からステマ規制が施行され、アフィリエイト広告を利用している人はページの見やすい箇所に、PR/広告だと分かる表記をすることが必須となりました。
一度きりの設定で、ステマ規制対策の文言を掲載する方法をご紹介しています。
記事内の装飾・カスタマイズ
最終更新日の表示とデザインの変更
- 記事に最終更新日を表示したい。
- 最終更新日のデザインを変えたい。
2023年8月1日から公式設定で最終更新日が表示できるようになりました！設定方法とカスタマイズ方法をご紹介しています。
HTMLとCSSで作るボックス装飾
- CSSコードでデザインを設定して、コードをシンプルに管理したい。
- デザインを変えたくなったとき、全てのデザインをまとめて変更したい。
外部パーツのカスタマイズ
もしもアフィリエイト『かんたんリンク』
- もしもアフィリエイトの『かんたんリンク』を利用している。
- スマホから見た『かんたんリンク』が縦長なのが気になる。
スマホで見た時もパソコンから見たとき同様、横長ですっきりしたデザインにするカスタマイズをご紹介しています。
codoc（コードク）の投げ銭
- ブログに投げ銭機能を導入したい。
- 導入したcodocの投げ銭デザインをブログの雰囲気に合わせてカスタマイズしたい。
当ブログでも記事の下方に設置してる投げ銭機能。ブログのデザインに合うように色や文字サイズを変更する方法をご紹介しています。
小ネタ系
見出しに改行を入れる方法
- 記事の中で書く「見出しタイトル」が長くなりがち。
- 見出しが長くなる場合、任意の場所に改行を入れてタイトルを読みやすくしたい。
旧Twitterアイコンをまとめて変更する
- 未だに旧Twitterの鳥さんアイコンフォントを使用している。
- 𝕏に変更したいけど変更箇所が多くて、変更作業が手間に感じる。
現在使用されているTwitterの鳥アイコンフォントを一度の設定で「𝕏」に置き換える方法をご紹介しています。
アドレスバーの色を変更する
- アドレスバーの色をブログの雰囲気に合わせて変更したい。
- 大きなカスタマイズは大変だから、超簡単に差別化できるカスタマイズ方法が知りたい。
完全趣味で作ってみた系
トップページに雪を降らせる
- ブログのトップページにさりげなく雪を降らして季節を感じたい。
- ブログに雪を降らすなんて意味わかんないけど、なんか面白そう。
はてなブログのカスタマイズ方法の紹介記事が増えましたら、随時更新していきます𓂃✍︎
