広汎性発達障害の女が毒を吐くブログ

はたらく・暮らす・整える

手帳術と仕事術、習慣のアップデートと、あれやこれやのレビューとか。

初心者向け!はてなブログ開設1ヶ月で1万PVになるまで行ったブログカスタマイズまとめ(その1)

f:id:noblog0125:20170410150200j:plain

はてなブログで『はたらく・暮らす・整える』を開設して約1ヶ月。

おかげさまで10,000PVとなりましたので、備忘録も兼ねて、行ったブログカスタマイズの内容をご紹介したいと思います。

心がけたのは、読む人にとって「読みやすい」ことと「サイト内を巡回しやすい」こと。

見た目だけのカスタマイズや、ページ読み込みが遅くなるなどユーザービリティーを阻害することになってしまうカスタマイズは見送りました。

行ったカスタマイズを全部まとめると記事が長くなるので、3回に分けてご紹介します。

ブログテーマ「Brooklyn」の適用

はてなブログでは、カスタマイズ用の「テーマ」が数多く用意されています。

このテーマを選ぶことで、ヘッダーや見出し、サイドメニューのデザインなどを自分で一からつくらなくとも、見栄えがよくて読者にとっても使い勝手のよいデザインにすることができます。

わたしが選んだテーマは「Brooklyn」。

いくつもあるテーマの中でこれを選んだ理由は4つ。

  • 無駄な装飾のないシンプルでモノトーン基調のデザインであること
  • スマホでの見え方を重視したレスポンシブデザインであること
  • 見出しやサイドメニューのデザインが標準装備であること
  • バイスごとに見やすいフォントサイズ・行間に調整されていること

HTMLやCSSに詳しい人は一からオリジナルでつくってもいいでしょうが、ブログを始めたばかりの人、詳しくなるほどはHTMLやCSSの学習に時間をかけたくない人は、自分の好みにあったテーマを選ぶことから始めたほうがいいでしょう。

シェアボタンの設置

ブログには欠かせないSNSのシェアボタン。

「Brooklyn」の制作者さんのブログでシェアボタンを設置するコードが公開されていますので、それを貼り付けています。

モノトーンのデザインと、少しカラフルなデザインの2種類が用意されていますが、わたしが選んだのはカラフルなほう。

「Brooklyn」自体がシンプルなモノトーン基調なので、少しカラフルなシェアボタンがとても良く映えます。

グローバルメニューの設置

f:id:noblog0125:20170410150409j:plain

これも「Brooklyn」の制作者さんのブログでグローバルメニューを設置するコードが公開されています。

グローバルメニューはブログの上部に表示される、記事カテゴリーへのリンクです。

気になるカテゴリーへのアクセスがしやすくなることと、初めて訪れた人にどんな分野の記事が書かれているか分かりやすくなる効果があります。

当ブログでは「楽しむ仕事術」「楽しむ手帳術」「楽しむ生活術」「商品レビュー」「ブログ運営」の5つを柱にしているので、この5カテゴリーへのリンクを貼っています。

使用するコードは、「はてなPro向け」と「一般ユーザー向け」に分かれているので注意しましょう。

スマホ環境でのグローバルメニュー(トグルメニュー)は「はてなPro向け」じゃないと表示されないので、ブログ更新を3ヶ月継続できたらProへ契約変更し、コードを設置し直したいと考えています。

パンくずリストの階層化

パンくずリストは記事の上部に表示され、記事カテゴリーの親子関係をあらわすものです。

公式メニューもあると言えばあるのですが、そのままだと親カテゴリーしか表示されないので、例えば「親:グルメ」「子1:和食」「子2:洋食」「子3:中華」にように分けて階層化したい場合に必要となります。

まとめ

作業自体はほぼほぼコピペで行えるので、HTMLやCSSの知識があまりなくても簡単に行えます。

ただし、編集ミスをして動作がおかしくなってしまうリスクもあるので、元のHTMLとCSSのバックアップ(コピーしてメモ帳などに貼り付けておく)をしてから作業に取り掛かりましょう。

広告を非表示にする