元Webデザイナー兼コーダーの備忘録

ウェブデザインやプログラミング、ブログのカスタマイズなどについてアウトプットしています。

 メニュー

» HTML入門のまとめはこちらです。

トップ > はてなブログカスタマイズ > はてなブログカスタマイズ:関連記事

はてなブログカスタマイズ:関連記事

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

はてなブログでは、関連記事を自動で挿入する機能があります。しかし、不十分に感じるところがあったので、手動に切り替えました。今回は、その方法をご紹介いたします。

関連記事を自動で挿入

関連記事を自動で挿入することのメリット・デメリットは、以下です。

メリット

  • 自動で記事が挿入される
  • 管理が容易

デメリット

今までは、デザインのカスタマイズで「関連記事の表示を記事下に表示する」に設定していました。これで関連するであろう記事が自動的に挿入されます。例として、【mustache入門:Ruby版】mustacheの導入の記事の画像をご覧ください。

この中では、1つ目のVue.jsを勉強し始めたら収拾がつかなくなりそうになった話がかろうじて関連しているくらいで、他の記事は個人的には関連しているとは言い難いです。つまり、関連記事を自動で挿入するに設定すると関係ない記事が表示されたり、逆に表示して欲しい記事が表示されないということが起きます。そこで、手動で記事を挿入するように切り替えました。

関連記事を手動で挿入

例として、はてなブログのカスタマイズ(グローバルメニューの追加)の記事の画像をご覧ください。関連記事を手動で挿入するように変更しました。

関連記事を手動で挿入することのメリット・デメリットは、以下です。

メリット

  • 記事を選べる
  • 好きなだけ記事を掲載できる

デメリット

  • 管理が面倒

手動にすると管理が面倒になりますが、自分で関連記事を選べるようになります。ブログの読者の方にとって関連性のある記事が掲載されている方が、有益ではないかと考えます。

定型文の作成

関連記事のテンプレートを作成しました。記事の編集ページに「定型文貼り付け」があるので、そちらに関連記事の定型文を作成しました。HTMLとCSSを以下のようにしました。

<div class="related-entries">関連記事</div>

- [記事のタイトル](URL)
- [記事のタイトル](URL)

/* 関連記事 */
.entry-content .related-entries{
border-bottom:1px dotted #cfd8d8;
background:none;
font-size:1em;
padding:10px 0px;
margin: 1.5em 0 0.8em;
line-height: 1.3;
font-weight:bold;
}

今後の対応

各記事に手動で関連記事を追加していきます。しばらくは、現状のまま記事を作成していきますが、問題があれば何らかの対処が必要になると思います。

2022/4/7:追記

一部の記事で関連記事を手動で追加していましたが、止めることにしました。理由は、実際にやってみたところ管理の負担が大きいことを実感したためです。今後は、既存のモジュールを使って関連記事を挿入します。

あわせて読みたい

» HTML入門のまとめはこちらです。