カメラと週末旅行

一眼レフカメラを片手に週末に旅行するブログ

【総集編】はてなブログのカスタマイズまとめ|初心者にオススメ

はてなブログカスタマイズ

はてなブログテーマを「ZENO-TEAL」に変更しました。ブログの大規模リニューアルにともない、たくさんカスタマイズしたので、実装したモノを一覧でまとめました。

はてなブログをスタートして、何からカスタマイズすればいいか迷っている方の参考になればと思います。

 

カスタマイズ一覧

あとから紹介するデザインCSSなどの設定を変えるカスタマイズは、ブログテーマを変更するとリセットされてしまうので、まずは、テーマ変更に影響のないカスタマイズからご紹介します。

 

(1)画像の圧縮設定を変更する

はてなブログは、表示が重いです。そこに、画像をたくさん貼り付けていくと、さらに重くなります。はてなフォトライフの設定を変更することで、画像サイズを自動で圧縮できるようになります。画像を圧縮しても、PCやスマホで見る分には見た目で違いには気づかないレベルです。見た目そのままで表示速度が速くなりますので、この設定変更はおすすめです。

「はてなフォトライフ」→「設定」→「フォトライフの設定」にいき、以下の画質を100%から下げてください。

画像の圧縮設定を変更

 

(2)パンくずリストを表示する

パンくずリストとは、記事タイトルの上に表示されるコレです。「トップ > カテゴリ> 〇〇」と表示されるリストのことです。

パンくずリストを表示

設定方法は、「デザイン」→「カスタマイズ」→「記事」とすすみ、「記事ページにパンくずリストを表示する」にチェックをいれてください。チェックを入れると、各ページにパンくずリストが挿入されます。記事が増えていくにつれ、内容が広く、雑多になっていくので、この表示はあった方が見やすいと思います。SEOの観点からも、導入することが勧められています。

 

(3)コメント欄の表示・非表示を設定する

記事の下に設定されるコメント欄の設定です。読者の方と積極的に交流したい方は表示に、そうでない場合は非表示にするとよいと思います。設定は、「設定」→「基本設定」→「コメント設定」にすすみ、設定を変更してください。

 

(4)自己紹介ページの作成

カスタマイズとは少し違いますが、自己紹介ページ(aboutページ)を作成すると、読み手にも、何の記事を主体とした、どのようなブログなのかを理解してもらえます。また、ブログにさらに愛着が湧くと思います。

自己紹介 & このブログについて

 

(5) ブログアイコン(ファビコン)を作成する

「ブログアイコン」とか、「ファビコン」と呼ばれるアイコンを作成します。これです、これ。意外と目にする機会が多いので、自分オリジナルに変えると、よりオシャレになると思います。

f:id:akiakigogogo:20180520110311p:plain

作り方はじつは簡単。以下に5分で完成する方法をご紹介しています。 

 

(6)はてなPROの導入

必要に応じ、はてなブログのPROへの移行を検討してみてください。PROにすると、次の「ブログトップを記事一覧ページに変更」が簡単にできます。PROでなくても、記事一覧の表示はできないことはないのですが、PROならボタン一つでできるようになります。ブログに何を求めるのか、何がしたいのか、というブログを書く命題に突き当たりますが、自分は「ブログ=アウトプットの場」です。自分の成長にも繋がるアウトプットの場が月1000円程度で用意できるなら、お安いもんだぜと思っています。

 

(7)ブログトップを記事一覧ページに変更

ブログトップを記事一覧に変更します。これをしないと、記事を全て読み終わらないと、次の記事に行けず、みにくくなってしまいます。やり方は簡単。「設定」→「詳細設定」→「トップページの表示形式(PC版)」で、全文形式から一覧形式に変えるだけです。

はてなProに登録しなくてもできる方法はこちら。

トップページを記事一覧に変更してスッキリさせる方法

 

(8)ソーシャルパーツの解除

これは必要に応じてです。ソーシャルパーツを解除すると、ブログの表示速度が速くなります。が、ソーシャル系とのつながりが無くなるので、SNSからの流入や、他のブロガーとつながりにくくなります。SNSの使い方に応じ設定を変更してください。

はてなブログの読み込みを速くするために行った5つのこと

 

(9)はてなスターの解除

これも必要に応じてです。スターなどいらない!という場合はこの設定を変更してください。これも解除すると、ブログの表示速度が速くなります。

はてなブログの読み込みを速くするために行った5つのこと

 

(10)はてなブックマークコメントの解除

必要に応じての3つめです。これも解除すると、ブログの表示速度が速くなります。

はてなブログの読み込みを速くするために行った5つのこと

 

(11)テーマの導入

私は、はてなブログテーマに「ZENO-TEAL」を導入しました。テーマを導入するにあたり、記事の導入部の書き換え、設定、テーマのインストール、記事一覧の設定の変更が必要です。以下の記事に、ZENO-TEALの導入の方法を、まとめておきました。導入にはちょっとしたコツがあります。

はてなブログテーマを「ZENO-TEAL」に変更|導入時の簡単カスタマイズを紹介

 

(12)ナビゲーションバーの作成

ナビゲーションバーとは、これです。タイトル下にあるメインカテゴリを表示するバーのことです。グローバルナビとも呼ばれているモノで、これがあると、何の記事がメインコンテンツなのか一発でわかりるので、導入した方がいいと思います。

ナビゲーションバーの作成

はてなブログテーマを「ZENO-TEAL」に変更|導入時の簡単カスタマイズを紹介

  

(13)TOPに戻るボタンの実装

私の旅行の記事は文字数が1500〜3000、さらに写真が15〜25枚程度あるため、記事が長くなります。トップにすぐに戻れるよう、右下に「TOPに戻る」ボタンを導入しました。

はてなブログテーマを「ZENO-TEAL」に変更|導入時の簡単カスタマイズを紹介

 

(14)記事一覧に「前のページ」ボタンを追加する

ブログトップの記事一覧の下に、「前のページ」ボタンを追加しました。「次のページ」ボタンがあるのに、「前のページ」ボタンがないのが、どうしても気になってしまい、導入しました。

はてなブログテーマを「ZENO-TEAL」に変更|導入時の簡単カスタマイズを紹介

 

(15)背景の色をドットから灰色にする

「デザイン」→「カスタマイズ」→「背景色」で灰色に変更しました。これだけでも雰囲気が大きく変わります。

はてなブログテーマを「ZENO-TEAL」に変更|導入時の簡単カスタマイズを紹介

 

(16)フォントサイズを変更する

デフォルトのフォントサイズが少し小さいので、大きく変更しました。文字サイズの変更には、デザインCSSの枠にコードを入力していきます。見出しや、箇条書きなど、要素ごとに文字サイズを変えることもできます。コピペでOKですので、みにくかったら積極的に変えましょう。
はてなブログのカスタマイズ2 ~ 文字サイズの変更

 

(17)記事の文字色を変更

テーマによるのかな?はてなブログはデフォルトだと文字の色が濃いです。目がチカチカするので、すこし薄い灰色の色に変更しています。それだけでもブログ全体の雰囲気も変わりますし、読みやすくなります。「デザイン」→「カスタマイズ」→「デザインCSS」とすすみ、次のコードを貼り付けてください。

/* 記事の文字色変更 */
.entry-content {

 color:#565454;

}

 「#」のうしろにあるの文字で、文字の色を指定しています。好みの文字色にしたい場合は、この文字を変えてください。数値は「カラーコード」で調べれば、いくらでもでてきます。

 

(18)タイトル画像(ヘッダー画像)をオリジナルにする

はてなブログで、一番最初に目にするのが、タイトル画像だと思います。この画像を、自分だけのオリジナルの画像にして、アップしています。管理画面から「デザイン」→「カスタマイズ」→「ヘッダ」とすすみ、「画像をアップロード」で、設定してください。画像は「画像のみの表示」と「画像とテキストを表示」することができます。私は、「画像のみの表示」にしています。

と言っても、画像の作成なんて やった事がない方が多いのではないでしょうか?実は、ツールを使えば、簡単にオシャレな画像ができちゃいます。以下に、作り方をまとめておきました。必要なモノはセンスではなく、情報です。 

(19)プロフィール画像を大きくする

トップページに表示されるプロフィールの画像を大きくしました。デフォルトの表示がとても小さいです。せっかく自分の分身の画像をあっぷするなら、大きい方がいいと思います。読者の方にも覚えてもらいやすくなるかも知れません。以下の記事で手順をくわしく解説しています。 

 

(20)レスポンシブデザインの調整

モバイルファーストという言葉をよく耳しますが、私のブログの7割はスマートフォンからのアクセスです。PCでブログを作成し、見た目もOK!で終わりではありません。スマートフォンでいかに見やすいブログになっているかがポイントです。パソコン表示、スマホ表示、タブレット表示、どのデバイスでもみやすいデザインに自動で設定してくれるのが、「レスポンシブデザイン」です。ブログテーマによって、この「レスポンシブデザイン」に対応しているモノ、していないモノがあります。「ZENO-TEAL」は対応していますので、あとは設定を変えれば、スマートフォン向けに自動でデザインを変えてくれます。

設定は、「デザイン」→「スマートフォン」にすすみ、 一番下の、詳細設定で、レスポンシブデザインの設定をONにします。
 

(21)タイトル画像の両端が切れる問題

(20)の変更と関係しますが、スマートフォンでブログを見たときに、タイトル画像の両端が切れることがあります。CSSにコードを追加することで対応できます。「デザイン」→「設定」→「デザインCSS」とすすみ、次のコードを貼ってください。

/* レスポンシブヘッダー画像の調整 */
@media (max-width: 480px){#blog-title-inner,#title a{
height:80px!important;
width:auto;
}
#blog-title-inner {background-size: contain!important; }
}

画像の高さが80pxになるように指定していますが、スマートフォンの表示をみながら変えてみてください。 

 

その他にも、カスタマイズの方法、できる場所はたくさんあります。

・自己紹介ページの表示を中央よりにする

・wwwなしでもアクセスできるようにする

・見出しのデザインを変更する(h2、h3、h4)

でき次第、随時、この記事に追加していきます。 

 

まとめ

ブログのブログ大規模リニューアルにともない、ブログをたくさんカスタマイズしました。忘れないうちに、その内容と方法をまとめておきました。ひとつひとつは、そこまで難しくはありません。トライした分だけ、ブログが自分好みに変わっていいくのは、とても楽しいです。ただ、ブログカスタマイズは「カスタマイズ沼」と呼ばれ、楽しいけど、キリがないです。ブログはあくまで記事が主人公です。自分も、カスタマイズはこれで終わりにして、記事に注力していこうと思います。

はてなブログのカスタマイズ総まとめ