※この記事は、はてなブログのユーザー向けの内容です
この記事では、初心者向けに「見やすいブログにするために最低限これだけはやっておきたい、はてなブログのカスタマイズ」を解説しています。
おことわり
この記事の内容は特に断りのない限り2021年4月時点のものです。
制作環境
OS:Windows10
はてなブログのテーマ:Minimalism
はてなブログProに加入(無料版でも使えるカスタマイズを紹介していますが、一部の機能はPro限定になります)
※この記事で紹介するカスタマイズはテーマ「Minimalism」で使うことを前提にしています。他のテーマではカスタマイズが上手くいかない可能性があります(試していません)
最低限これだけはやっておきたいカスタマイズ
「事前準備」以外は他の解説ブログに頼りました。詳しいやり方はリンク先をご覧下さい。
完成図
今回の目標は、以下のような見た目のブログにすることです。
(見本ブログはアクセス不可、URL非公表です)
事前準備
「レスポンシブ」を設定する
ブログ管理画面→デザイン→スマホのマーク→詳細設定→「レスポンシブデザイン」にチェックを入れる
(Proのみ)「ブログ表示」を「一覧形式」にする
ブログ管理画面→設定→詳細設定→スクロールして「ブログ表示」のコーナーの「一覧形式」を選択する
パソコンでの、トップページの表示形式が「タイトル+記事概要」の一覧になり見やすくなります。
残念ながら無料版では使えません。
今回はレスポンシブデザインなので、無料版だとパソコンでもスマホでも同じように表示されます。
つまり「スマホでも『タイトルの一覧表』にならない」ということです。読者には見づらくなります。
「無料版でもスマホから見やすいブログを作りたい」という方は、記事でサイトマップを作り、その記事をトップに固定させて読者を案内するのがお勧めです。
(既に書いてある場合)CSSとHTMLのバックアップを取る
特にCSSはテーマを変えると消えるので、事前にメモ帳などにコピペして下さい。
(1)タイトル下のメニュー(グローバルメニュー)を作る
「グローバルメニュー」とは上の画像の四角で囲んだ部分です。
詳しいやり方はこちら。
(2)画面下のメニューを作る
ホームボタン、カテゴリーの一覧、上に戻るボタンが揃ったメニューを画面の下に設置します。
詳しいやり方はこちら。
「レスポンシブ設定の方はできません」と書かれていますが、現に私はレスポンシブ設定です。
(2021年8月9日追記。「設定」→「詳細設定」→「headに要素を追加」にJQueryを書かないと機能しません。※レスポンシブ設定時。
私が書いたJQueryはこちら)
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>出典:【はてなブログ】「この記事は、約○分で読めます。」を表示するようにしました - A Sky Blue Diary~想いをかたちに~ (hatenablog.com)
パソコンでもスマホでもこのメニューを表示できています。
このメニュー、本当に便利なんですよ。
レスポンシブにすればPCでもスマホでも表示されるだけでなく
「上に戻るボタン(何て言うんだろう)」も「カテゴリ一覧を表示させられるボタン(カテゴリーじゃなくて特定記事や固定ページのリンクを貼ることも可能です)」もホームボタンも揃っているのですから。
(3)文字の大きさを変更する
Minimalismはデフォルトの文字サイズが小さめなので、CSSで文字の大きさを変更することをお勧めします。
詳しいやり方はこちら。
私は18pxにしています。
(4)目次の文字の大きさを変更する
目次の文字の大きさを変更するには、(3)とは別にCSSを書く必要があります。
詳しいやり方はこちら。
(5)スマホ版で太字が表示されるようにする
スマホ版では太字(strongタグ)が太字として表示されない場合があるとのことなのでCSSを書きました。詳しいやり方はこちら。
おわりに「本当に必要最低限のカスタマイズを紹介しました」
私もそうだったのですが、ブログを始めたばかりの頃ってカスタマイズに凝りたくなりませんか?
特定の部分の色を変えたり、タイトルに画像を設定したり、特定の部分のフォントを変えたり、シェアボタンのデザインを変えたりとか・・・?
それらが悪いとは思いません。現に私もやりたいです(やれていませんが)。
ですが、カスタマイズって終わりがないんですよ。
終わりがないから、いつまでも記事を書き始められないんです。
ブログを始めた当初の目的をいつまでも果たせなくなるんです。
ですが、全くカスタマイズをしないと初めてブログにアクセスしてくれた方々に不親切なブログになるんですよね。
グローバルメニューがないと「このブログは主に何が書かれているのか」が分からないし
「上に戻るボタン」がないと(特にスマホだと)「上に戻るのに時間がかかりすぎる。もう面倒くさい!見るのやめた!」ってなってしまいます。
せっかく有益な記事、面白い記事を書いても読者が増えないので、ある程度カスタマイズが必要なんですよね。
そういうわけで、初心者向けに「(読者が見やすいように)最低限これだけはやっておきたいカスタマイズ」を紹介しました。
だから、色やフォント関係などのカスタマイズは紹介しませんでした。
「そういうあなたのこのブログ、どこに何があるのか分からないし見づらいですよ」って思われたら申し訳ありません。私の実力不足、知識不足です。
最後になりましたが、リンク先のブログの管理人の皆さんにはこの場を借りてお礼を申し上げます。
【2022年2月に続編をUPしました】【はてなブログ/Minimalism】このブログでやったカスタマイズ - SATOREPO BLOG