Web
Analytics
VRoid Sitemap/VRoid記事のサイトマップ
【2021年】NHK語学の音声教材のメリット、デメリットとDL費用を節約する方法
【PR】2021/10/14までにバリューコマースに新規サイト登録&広告貼付すると300円もらえます
【VRoid】口の中の色をVRoidStudioだけで変更するには

【はてなブログMinimalism用】初心者でも簡単!これだけはやっておきたいブログのカスタマイズ5選

f:id:satorepo:20210328013236j:plain

※この記事は、はてなブログのユーザー向けの内容です

 

この記事では、初心者向け「見やすいブログにするために最低限これだけはやっておきたい、はてなブログのカスタマイズ」を解説しています。

 

おことわり

この記事の内容は特に断りのない限り2021年4月時点のものです。

制作環境

OS:Windows10

はてなブログのテーマ:Minimalism

はてなブログProに加入(無料版でも使えるカスタマイズを紹介していますが、一部の機能はPro限定になります)

 

※この記事で紹介するカスタマイズはテーマ「Minimalism」で使うことを前提にしています。他のテーマではカスタマイズが上手くいかない可能性があります(試していません)

 

最低限これだけはやっておきたいカスタマイズ

「事前準備」以外は他の解説ブログに頼りました。詳しいやり方はリンク先をご覧下さい。

完成図

今回の目標は、以下のような見た目のブログにすることです。

(見本ブログはアクセス不可、URL非公表です)

f:id:satorepo:20210327234549p:plain

PC版 完成図

f:id:satorepo:20210327233554j:plain


 

事前準備

「レスポンシブ」を設定する

ブログ管理画面→デザイン→スマホのマーク→詳細設定→「レスポンシブデザイン」にチェックを入れる

f:id:satorepo:20210327235500j:plain

(1)管理画面の「デザイン」をクリック

f:id:satorepo:20210328001122j:plain

(2)スマホのマークをクリック

f:id:satorepo:20210328001157j:plain

(3)詳細設定をクリック

f:id:satorepo:20210328001241j:plain

(4)レスポンシブデザインにチェックを入れる

(Proのみ)「ブログ表示」を「一覧形式」にする

ブログ管理画面→設定→詳細設定→スクロールして「ブログ表示」のコーナーの「一覧形式」を選択する

f:id:satorepo:20210328002006j:plain

(1)設定をクリック

f:id:satorepo:20210328002136j:plain

(2)詳細設定

f:id:satorepo:20210328002327j:plain

(3)一覧表示

パソコンでの、トップページの表示形式が「タイトル+記事概要」の一覧になり見やすくなります。

残念ながら無料版では使えません。

今回はレスポンシブデザインなので、無料版だとパソコンでもスマホでも同じように表示されます。

つまり「スマホでも『タイトルの一覧表』にならない」ということです。読者には見づらくなります。

f:id:satorepo:20210328002953j:plain

無料版 スマホではこう表示される


「無料版でもスマホから見やすいブログを作りたい」という方は、記事でサイトマップを作り、その記事をトップに固定させて読者を案内するのがお勧めです。

 

(既に書いてある場合)CSSとHTMLのバックアップを取る

 

特にCSSはテーマを変えると消えるので、事前にメモ帳などにコピペして下さい。

 

(1)タイトル下のメニュー(グローバルメニュー)を作る

f:id:satorepo:20210328003632j:plain

グローバルメニュー

「グローバルメニュー」とは上の画像の四角で囲んだ部分です。

 

詳しいやり方はこちら。

www.kayoko-cafe.com

 

www.kayoko-cafe.com

(2)画面下のメニューを作る

ホームボタン、カテゴリーの一覧、上に戻るボタンが揃ったメニューを画面の下に設置します。

f:id:satorepo:20210328011708j:plain

PC版 画面下のメニュー

f:id:satorepo:20210328012515j:plain

スマホ版 画面下のメニュー

詳しいやり方はこちら。

「レスポンシブ設定の方はできません」と書かれていますが、現に私はレスポンシブ設定です。

(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)

 

パソコンでもスマホでもこのメニューを表示できています。

www.yukihy.com

 

このメニュー、本当に便利なんですよ。

レスポンシブにすればPCでもスマホでも表示されるだけでなく

「上に戻るボタン(何て言うんだろう)」も「カテゴリ一覧を表示させられるボタン(カテゴリーじゃなくて特定記事や固定ページのリンクを貼ることも可能です)」もホームボタンも揃っているのですから。

 

(3)文字の大きさを変更する

Minimalismはデフォルトの文字サイズが小さめなので、CSSで文字の大きさを変更することをお勧めします。

詳しいやり方はこちら。

www.karochoa.com

 

私は18pxにしています。

 

(4)目次の文字の大きさを変更する

目次の文字の大きさを変更するには、(3)とは別にCSSを書く必要があります。

詳しいやり方はこちら。

www.tomomore.com

(5)スマホ版で太字が表示されるようにする

スマホ版では太字(strongタグ)が太字として表示されない場合があるとのことなのでCSSを書きました。詳しいやり方はこちら。

www.kurasitotonoe.com

 

おわりに「本当に必要最低限のカスタマイズを紹介しました」

私もそうだったのですが、ブログを始めたばかりの頃ってカスタマイズに凝りたくなりませんか?

特定の部分の色を変えたり、タイトルに画像を設定したり、特定の部分のフォントを変えたり、シェアボタンのデザインを変えたりとか・・・?

 

それらが悪いとは思いません。現に私もやりたいです(やれていませんが)。

ですが、カスタマイズって終わりがないんですよ。

終わりがないから、いつまでも記事を書き始められないんです。

ブログを始めた当初の目的をいつまでも果たせなくなるんです。

 

ですが、全くカスタマイズをしないと初めてブログにアクセスしてくれた方々に不親切なブログになるんですよね。

グローバルメニューがないと「このブログは主に何が書かれているのか」が分からない

「上に戻るボタン」がないと(特にスマホだと)「上に戻るのに時間がかかりすぎる。もう面倒くさい!見るのやめた!」ってなってしまいます。

 

せっかく有益な記事、面白い記事を書いても読者が増えないので、ある程度カスタマイズが必要なんですよね。

 

そういうわけで、初心者向けに「(読者が見やすいように)最低限これだけはやっておきたいカスタマイズ」を紹介しました。

だから、色やフォント関係などのカスタマイズは紹介しませんでした。

 

「そういうあなたのこのブログ、どこに何があるのか分からないし見づらいですよ」って思われたら申し訳ありません。私の実力不足、知識不足です。

最後になりましたが、リンク先のブログの管理人の皆さんにはこの場を借りてお礼を申し上げます。