mineaki【総集編】はてなブログのカスタマイズまとめ|初心者にオススメツイートシェアはてブLINEPocketはてなブログテーマを「ZENO-TEAL」に変更しました。ブログの大規模リニューアルにともない、たくさんカスタマイズしたので、実装したモノを一覧でまとめました。はてなブログをスタートして、何からカスタマイズすればいいか迷っている方の参考になればと思います。カスタマイズ一覧あとから紹介するデザインCSSなどの設定を変えるカスタマイズは、ブログテーマを変更するとリセットされてしまうので、まずは、テーマ変更に影響のないカスタマイズからご紹介します。(1)画像の圧縮設定を変更するはてなブログは、表示が重いです。そこに、画像をたくさん貼り付けていくと、さらに重くなります。はてなフォトライフの設定を変更することで、画像サイズを自動で圧縮できるようになります。画像を圧縮しても、PCやスマホで見る分には見た目で違いには気づかないレベルです。見た目そのままで表示速度が速くなりますので、この設定変更はおすすめです。「はてなフォトライフ」→「設定」→「フォトライフの設定」にいき、以下の画質を100%から下げてください。(2)パンくずリストを表示するパンくずリストとは、記事タイトルの上に表示されるコレです。〇〇」と表示されるリストのことです。設定方法は、「デザイン」→「カスタマイズ」→「記事」とすすみ、「記事ページにパンくずリストを表示する」にチェックをいれてください。チェックを入れると、各ページにパンくずリストが挿入されます。記事が増えていくにつれ、内容が広く、雑多になっていくので、この表示はあった方が見やすいと思います。SEOの観点からも、導入することが勧められています。(3)コメント欄の表示・非表示を設定する記事の下に設定されるコメント欄の設定です。読者の方と積極的に交流したい方は表示に、そうでない場合は非表示にするとよいと思います。コメント設定」にすすみ、設定を変更してください。(4)自己紹介ページの作成カスタマイズとは少し違いますが、自己紹介ページ(aboutページ)を作成すると、読み手にも、何の記事を主体とした、どのようなブログなのかを理解してもらえます。ブログにさらに愛着が湧くと思います。ブログアイコン(ファビコン)を作成する「ブログアイコン」とか、「ファビコン」と呼ばれるアイコンを作成します。意外と目にする機会が多いので、自分オリジナルに変えると、よりオシャレになると思います。以下に5分で完成する方法をご紹介しています。必要に応じ、はてなブログのPROへの移行を検討してみてください。PROにすると、次の「ブログトップを記事一覧ページに変更」が簡単にできます。PROでなくても、記事一覧の表示はできないことはないのですが、PROならボタン一つでできるようになります。ブログに何を求めるのか、何がしたいのか、というブログを書く命題に突き当たりますが、自分は「ブログ=アウトプットの場」です。自分の成長にも繋がるアウトプットの場が月1000円程度で用意できるなら、お安いもんだぜ!と思っています。(7)ブログトップを記事一覧ページに変更ブログトップを記事一覧に変更します。これをしないと、記事を全て読み終わらないと、次の記事に行けず、みにくくなってしまいます。トップページの表示形式(PC版)」で、全文形式から一覧形式に変えるだけです。はてなProに登録しなくてもできる方法はこちら。トップページを記事一覧に変更してスッキリさせる方法(8)ソーシャルパーツの解除これは必要に応じてです。ソーシャルパーツを解除すると、ブログの表示速度が速くなります。ソーシャル系とのつながりが無くなるので、SNSからの流入や、他のブロガーとつながりにくくなります。SNSの使い方に応じ設定を変更してください。はてなブログの読み込みを速くするために行った5つのこと(9)はてなスターの解除これも必要に応じてです。スターなどいらない!という場合はこの設定を変更してください。これも解除すると、ブログの表示速度が速くなります。必要に応じての3つめです。これも解除すると、ブログの表示速度が速くなります。私は、はてなブログテーマに「ZENO-TEAL」を導入しました。テーマを導入するにあたり、記事の導入部の書き換え、設定、テーマのインストール、記事一覧の設定の変更が必要です。以下の記事に、ZENO-TEALの導入の方法を、まとめておきました。導入にはちょっとしたコツがあります。はてなブログテーマを「ZENO-TEAL」に変更|導入時の簡単カスタマイズを紹介(12)ナビゲーションバーの作成ナビゲーションバーとは、これです。タイトル下にあるメインカテゴリを表示するバーのことです。グローバルナビとも呼ばれているモノで、これがあると、何の記事がメインコンテンツなのか一発でわかりるので、導入した方がいいと思います。私の旅行の記事は文字数が1500〜3000、さらに写真が15〜25枚程度あるため、記事が長くなります。トップにすぐに戻れるよう、右下に「TOPに戻る」ボタンを導入しました。はてなブログテーマを「ZENO-TEAL」に変更|導入時の簡単カスタマイズを紹介(14)記事一覧に「前のページ」ボタンを追加するブログトップの記事一覧の下に、「前のページ」ボタンを追加しました。「次のページ」ボタンがあるのに、「前のページ」ボタンがないのが、どうしても気になってしまい、導入しました。はてなブログテーマを「ZENO-TEAL」に変更|導入時の簡単カスタマイズを紹介(15)背景の色をドットから灰色にする「デザイン」→「カスタマイズ」→「背景色」で灰色に変更しました。これだけでも雰囲気が大きく変わります。はてなブログテーマを「ZENO-TEAL」に変更|導入時の簡単カスタマイズを紹介(16)フォントサイズを変更するデフォルトのフォントサイズが少し小さいので、大きく変更しました。文字サイズの変更には、デザインCSSの枠にコードを入力していきます。見出しや、箇条書きなど、要素ごとに文字サイズを変えることもできます。コピペでOKですので、みにくかったら積極的に変えましょう。文字サイズの変更(17)記事の文字色を変更テーマによるのかな?はてなブログはデフォルトだと文字の色が濃いです。目がチカチカするので、すこし薄い灰色の色に変更しています。それだけでもブログ全体の雰囲気も変わりますし、読みやすくなります。「デザイン」→「カスタマイズ」→「デザインCSS」とすすみ、次のコードを貼り付けてください。{color:#565454;}「#」のうしろにあるの文字で、文字の色を指定しています。好みの文字色にしたい場合は、この文字を変えてください。数値は「カラーコード」で調べれば、いくらでもでてきます。(18)タイトル画像(ヘッダー画像)をオリジナルにするはてなブログで、一番最初に目にするのが、タイトル画像だと思います。この画像を、自分だけのオリジナルの画像にして、アップしています。管理画面から「デザイン」→「カスタマイズ」→「ヘッダ」とすすみ、「画像をアップロード」で、設定してください。画像は「画像のみの表示」と「画像とテキストを表示」することができます。私は、「画像のみの表示」にしています。やった事がない方が多いのではないでしょうか?実は、ツールを使えば、簡単にオシャレな画像ができちゃいます。以下に、作り方をまとめておきました。必要なモノはセンスではなく、情報です。Canvaならブログのヘッダー画像をおしゃれに作れる|Canvaの使い方を解説(19)プロフィール画像を大きくするトップページに表示されるプロフィールの画像を大きくしました。デフォルトの表示がとても小さいです。自分の分身の画像をあっぷするなら、大きい方がいいと思います。読者の方にも覚えてもらいやすくなるかも知れません。以下の記事で手順をくわしく解説しています。はてなブログのプロフィール画像を大きくする方法(20)レスポンシブデザインの調整モバイルファーストという言葉をよく耳しますが、私のブログの7割はスマートフォンからのアクセスです。PCでブログを作成し、見た目もOK!で終わりではありません。スマートフォンでいかに見やすいブログになっているかがポイントです。パソコン表示、スマホ表示、タブレット表示、どのデバイスでもみやすいデザインに自動で設定してくれるのが、「レスポンシブデザイン」です。ブログテーマによって、この「レスポンシブデザイン」に対応しているモノ、していないモノがあります。「ZENO-TEAL」は対応していますので、あとは設定を変えれば、スマートフォン向けに自動でデザインを変えてくれます。下の、詳細設定で、レスポンシブデザインの設定をONにします。(21)タイトル画像の両端が切れる問題(20)の変更と関係しますが、スマートフォンでブログを見たときに、タイトル画像の両端が切れることがあります。CSSにコードを追加することで対応できます。「デザイン」→「設定」→「デザインCSS」とすすみ、次のコードを貼ってください。}}画像の高さが80pxになるように指定していますが、スマートフォンの表示をみながら変えてみてください。(22)プロフィール画像を大きくするはてなブログのプロフィール画像がデフォルトだととても小さく見た目が悪いので、画像を大きくすることもできます。これだけでも雰囲気がとても変わりますので、初心者の方におすすめのカスタマイズです。はてなブログのプロフィール画像を大きくする方法|初心者おすすめカスタマイズその他にも、カスタマイズの方法、できる場所はたくさんあります。・自己紹介ページの表示を中央よりにする・wwwなしでもアクセスできるようにする・見出しのデザインを変更する(h2、h3、h4)でき次第、随時、この記事に追加していきます。まとめブログのブログ大規模リニューアルにともない、ブログをたくさんカスタマイズしました。忘れないうちに、その内容と方法をまとめておきました。ひとつひとつは、そこまで難しくはありません。トライした分だけ、ブログが自分好みに変わっていいくのは、とても楽しいです。ブログカスタマイズは「カスタマイズ沼」と呼ばれ、楽しいけど、キリがないです。ブログはあくまで記事が主人公です。自分も、カスタマイズはこれで終わりにして、記事に注力していこうと思います。コメントをキャンセルメールアドレスが公開されることはありません。このブログについてRECOMMENDこちらの記事も人気です。