こんにちは、シンプルライフナビです。
はてなブログのカスタマイズ、楽しんでいますか？
ブログは記事の内容が大切ですが、デザイン的にも読みやすい方がいいですよね。
- はてなブログをカスタマイズしたい
- デザインをカスタマイズする方法を知りたい
- CSSって何？よく分からなくてもコピペでなんとかできないの？
上記のようなことを考えたことがある人は、この記事が役に立ちます。
このブログでも取り入れているカスタマイズ例を参考に解説しますので、ぜひ読み進めていってください。
読みやすい工夫をして、読者を魅了できるといいですね！
【カスタマイズ 初級編】全体的なデザインを決める
はてなブログの見た目のデザインを変えるとき、最初に試したいのは「デザインテーマ」の選択。
2023年6月時点では「Minimalism」が人気１位。「レスポンシブデザイン」対応のテーマで、PC、タブレット、スマホの表示に自動対応しています。
「レスポンシブデザイン」というのは、パソコンで見ても、スマホで見ても、快適にブログを閲覧できるように画面レイアウトを自動調整してくれるもの。
だからブログが初めての人の選択は、人気テーマの中から「レスポンシブデザイン」対応のテーマを選ぶのがおすすめ。
なお、既存のテーマから変更する場合は、必ず デザインCSSの情報を消去や削除する前にバックアップ（トラブルへの備え） をしてください。
たくさんあるので、次の流れで、利用イメージを想像し、テーマを決定します。
各テーマの利用者のブログも参考にして選んでください。
👉デザインテーマを探す：テーマ ストア - はてなブログ
- 好みのテーマを選択する
- 「テーマの説明」「利用中のブログ」ページを確認する
- 「利用中のブログ」のページの「このテーマを最近インストールしたブログ」を見る
- 使い方の参考にする
👉インストール方法：デザインテーマをインストールする - はてなブログ ヘルプ
最初に使うテーマは決まりましたか？
【カスタマイズ 中級編】読者の利便性を高める設定
全体デザインが決まったら、ブログの読者の回遊性を高める（ブログ内の他の記事も読んでもらう）カスタマイズ・ツール（メニュー）を設定しましょう。
このブログでも取り入れているカスタマイズ例を紹介していますので、使って操作してみて、必要そうなものだけ取り入れてみるなど、参考にしてください。
ブログ読者の操作性を向上させるツール（メニュー）の設定
ブログ読者の操作性を向上して回遊性を高めるために、次の３つのツール（メニュー）を設定しましょう。
- グローバルメニューの設定
- ボトムナビゲーションの設定
- 上に戻るボタンの設定
順番に確認していきます。
グローバルメニュー（ナビゲーション）の設定
グローバルメニューはカテゴリーごとにまとめた記事の「見出し」として使えます。
まだ設定していない人は、設定しておきましょう。
検索すると色々出てきますが、探すのが面倒な人、シンプルなものでいい人はグローバルメニュー（ナビゲーション）のCSS｜スマホ対応、コピペOK の記事を参考にして設定してください。
ボトムナビゲーションの設定
ボトムナビゲーションは、画面下部に設置するメニューです。
ブログの記事数が少なく、カテゴリー分けが多くない人、記事の表示に画面を広く使いたい人は不要です。
次の記事を参考にして、お好みで設定してください。
上に戻るボタンの設定
記事を最後まで読んだ後、画面の上部に戻りたくなることがありませんか？
多くの人がそう思うそうです。だから「上に戻るボタン」があると便利！
はてなブログで上に戻るボタン の記事を参考にして設定してみてください。
読みやすさの向上。フォントや囲み枠のカスタマイズ
ブログ全体の構成ができたら、最終調整です。
文字のフォント、アンダーライン、囲み枠などを設定し、記事の読みやすさ、強調する部分のデザインを必要に応じて決めてください。
一気に全部するのではなく、少しずつ取り入れていくのがカスタマイズのコツです。
次の記事が参考になります。
読者の操作性を向上して回遊性を高めると同時に、読みやすさにも配慮することで、いわゆる「SEO対策」としても効果があります。
【カスタマイズ 上級編】個別カスタマイズを極める
ブログのデザインを極めたいなら、次のサイトが参考になります。
はてなブログで利用する際の注意点は次のとおりです。
- そのままコピペするだけでは利用できないことがあります。
- はてなブログでのCSSの記述は、「デザインCSS」を使います。必ず事前にはてなブログ｜デザインCSSのバックアップ をしておきましょう。
CSSとHTMLの関係がよく分からないうちは手を出さない方が無難ですが、チャレンジしてみるのも悪くないです。
見出しのカスタマイズ
見た目の印象が大きく変わるのが「見出し」のデザイン。
ブログの記事作成時に「HTML編集」画面をみると確認できるのですが、はてなブログの見出し部分のHTMLは「大見出し」の場合、次のようになっています。
<h3>大見出しのタイトル</h3>
つまり、大見出しのタイトル部分は<h3>で囲まれています。
このh3で囲まれている部分の書式やデザインを決めるのが（デザイン）CSSの設定です。
はてなブログの注意点は、大見出しはh3,中見出しはh4,小見出しはh5となっているので、上記の参考サイトの見出しの装飾のCSSが h1{ コード }となっている場合、例えば次のようにh3に置き換えないとデザインが適用されないので注意です。
h3 {
border-bottom: solid 3px black;
}
また、利用しているデザインテーマによっては上記でも変わらない場合があります。その場合はh3を「.entry-content h3」にしてください。
.entry-content h3 {
border-bottom: solid 3px black;
}
全角文字になっていたり、半角スペースが抜けていたりすると適用されません。
CSSのコードはとても繊細なので、必ず英数半角にすることに注意です。
その他のカスタマイズ
その他にもこのブログで設定している主なカスタマイズを「はてなブログ初心者の「役に立つ」情報サイトマップ 」で紹介していますので参考にしてください。
もっと細かくカスタマイズしたい人(上級者)は、ブラウザをGoogle Chromeにしましょう。
ブラウザ画面上、右クリックで「検証」画面にすることでWEBサイトの構造分析を行なうことができます。
はてなブログのカスタマイズの方法・やり方
はてなブログを利用していると、デザインなどをカスタマイズしたくなります。
もっと読みやすく、わかりやすく、と考えるとキリがありませんが、読者体験を向上させたい人は、上記の内容を参考にしてデザインのカスタマイズに挑戦してください。
あなたのオリジナルのブログデザインで読者を魅了しましょう。
なお、はてなブログ無料版の場合はカスタマイズに制約があります。
これからブログを利用して収益を得たい、WEBデザインやWEBライティングを向上させたいと考えているなら「はてなブログPro」へ移行することをお勧めします。
