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

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

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

ブログカスタマイズまとめの第2回。

前回は、「テーマの適用」「シェアボタンの設置」「グローバルメニューの設置」「パンくずリストの階層化」をご紹介しました。

2回目となる今回は、次の3つのブログカスタマイズをご紹介します。

※HTMLやCSSのコードは、著作権の問題がありますので、この記事には掲載しておりません。紹介しているリンク先の記事で直接ご確認くださいね。

記事下に「あわせて読みたいG」を設置

読んだ記事と同じカテゴリーの記事を、自動でいくつか表示してくれる仕組みです。

読んだ記事が好みのものであった場合に、同じテイストの記事を続けて読みたくなるのが人のサガですから、関連記事を表示する仕組みは必要なものと言っていいでしょう。

これのおかげかまでは断言できませんが、『はたらく・暮らす・整える』のページ/セッションは「3.5」以上をキープしています。

関連記事を自動で表示する仕組みとして有名なものには別に「Milliard」というものもありますが、現在使っているブログテーマにはデザイン的に合わないので、シンプルな「あわせて読みたいG」を選びました。

ちなみに、「あわせて読みたいG」のGは「ガチャ」のGなのだそうです。

関連記事をランダムに表示する仕組みから「ガチャ」のGをネーミングに加えたそうで、この記事をまとめていて初めて知りました。

「トップに戻る」ボタンの設置

スマホ環境で読まれる方が多い(7割~8割)ので、できるだけコンパクトな記事になるように心がけていますが、まだ書く力が弱いのでどうしても長文になることがあります。

そこで、記事内の移動をスムーズに行えるようにする一環として、「トップに戻る」ボタンを設置しました。

記事上部から少し下へスクロールすると、画面右下ににゅるっとボタンが表示されます。

絶対ないといけないボタンではありませんが、読む人の手間を少しでも減らそうと思えばやはり必須かなと考えています。

あって邪魔になるものでもないので、ぜひ設置しておきましょう。

「目次」のデザイン変更

はてなブログには標準で目次を表示する機能があるのですが、箇条書きのリストができるだけなので、読む人に訴えかけるものではありません。

目次のデザインに求めた条件は4つ。

  • 大見出しと中見出しで論理的に階層化されること
  • 囲いがつき、文章との間に適度な余白があること
  • 「目次」の見出しがつくこと
  • これらが、CSSで実現されること

条件を満たすものとして、下記のブログで紹介されていたカスタマイズ方法を採用しました。

色使いも、ブログテーマ「Brooklyn」とマッチしていて大満足です。

ただし、すべての記事に目次をつけるのではなく、見出しが4つ以上あるような長文の場合にのみ設置するようにしています。

まとめ

その1で紹介したカスタマイズ方法と同様に、上記3つのカスタマイズも作業自体はほぼほぼコピペで行えるので、HTMLやCSSの知識があまりなくても簡単に行えます。

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

テスト用のブログをひとつつくっておいて、そこで試してから本番に適用するのもいいかもしれませんね。