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