はてなブログのサイドバーにおすすめ記事を表示させる

ブログ運営

検索キーワードで「はてなブログでおすすめの記事を表示させる方法」を調べている人からのアクセスがありました。すでに解決したかもしれませんが、今後も同じような人がいるかもしれないので記事にしておきます。

はじめに

前提として私が知っている方法になります。もっといい方法とかあるかもしれませんのであくまで一つの方法としてとらえて下さい。この記事では「おすすめ記事」で話をすすめますが、この部分はお好みで変更して下さい。

モジュールの最新記事を利用するやり方

  1. ダッシュボードで「記事の管理」をクリック
  2. 記事一覧からおすすめ記事として表示したい記事を選んで、記事タイトル左のボックスにチェックを入れる。(複数選択可能)
  3. 「チックした記事にカテゴリーを追加」をクリックして一番下にある「新しいカテゴリーを作成」をクリック
  4. 「おすすめ記事」と入力してOKを押す
  5. 次にダッシュボード左サイドバーの「デザイン」をクリックします
  6. スパナアイコンの「カスタマイズ」をクリック
  7. 「サイドバー」を選択
  8. 「モジュールを追加」をクリック
  9. 「最新記事」を選択。タイトルに「おすすめの記事」と入力。カテゴリーからさきほど作った「おすすめの記事」を選択します。
  10. 最後に「適用」を押して「変更を保存する」をクリックして終了です。

表示件数はお好みで、画像を表示させたい場合は「サムネイル画像を表示する」にチェックを入れてください。

このやり方の欠点

モジュールの最新記事を利用するので表示順が新しい順になります。例えばおすすめ記事カテゴリーに5記事あって、3つのおすすめ記事を表示させたいとします。

この場合最新の3記事しか表示されません。古い記事を含めた3記事を表示させたいということもあると思います。任意で選べないのでカテゴリーを増やして「おすすめ記事1」、「おすすめ記事2」のようにするしかありません。あまり多用するとカテゴリーが増えるので特に目立たせたい記事のみに使うのがいいと思います。

リンクを利用するやり方

  1. ダッシュボードから「デザイン」
  2. スパナアイコンの「カスタマイズ」を選択
  3. 「サイドバー」
  4. 「モジュールを追加」で「リンク」を選択
  5. 「タイトル」に「おすすめ記事」と入力
  6. リンクのタイトル部分に「記事タイトル」アドレス部分にその記事の「アドレス」をコピー&ペーストします。数が足りない場合は「新しいリンクを追加」をクリックします。
  7. 最後に「適用」を押して「変更を保存する」をクリックして終了です。

この方法の長所と欠点

リンクを利用するやり方だとカテゴリー数が無駄に増えませんし、最新の記事から表示でなく自分の好みで表示順を入れ替えることができます。ただしサムネイル画像が表示できないのでおすすめ記事の割にあまり目立たないという欠点もあります。

ブログカードを利用する

サイドバーの幅が広いテーマなら下のようなブログカードで表示させることもできます。

ブログをカスタマイズする時はタグの上に説明文を入れておくと後で困らない
ブログに限ったことではないですが、修正箇所がどこにあるのか探すのに苦労したり、そのソースコードが何を表しているのか分からなくなったことはありませんか?もしあるならコードの上に説明文を入れれば解決されますよ。

HTMLを利用するやり方

モジュールのHTMLを利用してもできますが、リンクを利用したほうが簡単なので今回は載せません。

最後に

今回紹介したどのやり方でも、ブログのテーマがレスポンシブ対応で、スマートホンの設定をレスポンシブONにしていないとスマートホンでは表示されません。レスポンシブ設定の仕方は

「デザイン」→「スマートホンアイコン」→「詳細設定」→「レスポンシブデザイン」にチェックを入れる→「変更を保存する」でOKです。