はてなブログヘッダー下におすすめ記事を設置するカスタマイズ

どうも！フジグチです！

今回は、おすすめ記事を設置するカスタマイズを紹介したいと思います。

以前Cappuccinoで（Neumorphismでも）使えるおすすめ記事の設置方法は紹介しましたが、今回ははてなブログのどのテーマでも使えるおすすめ記事を設置するカスタマイズを紹介したいと思います。

ヘッダー下におすすめ記事を設置することで回遊性が良くなり、ユーザーがサイト内を巡回しやすくなるのでPV数の向上にもつながります。

おすすめの「記事」に限らず、カテゴリやまとめページを設置することで、よりユーザーに適したコンテンツを提供することも出来ます。

今回紹介するカスタマイズはHTMLが苦手な方や初心者の方でも、簡単に導入できるようにしています。

以下に、今回の記事の特徴を挙げます。

このカスタマイズでは入力フォームを用意したので、この記事内で必要な項目を入力し「コピーする」ボタンをクリックしてコードを持ち帰り、ヘッダに貼り付けるだけです。

HTMLが苦手な方でも編集画面を見る必要がないので、「HTMLのどの部分にURLを打ち込めばいいのか分からない」「入力している途中で間違ってコードを消してしまった」といったことがありません。

また、ヘッダー部分に読み込みの時間が掛かる画像を使用すると、画像より下のコンテンツが先に表示されたあとに画像が遅れて表示されます。

このとき、先に表示されたコンテンツが下に押されて動いてしまいCLSエラーというものが起きてしまいます。

このカスタマイズではCSSのpaddingハックというものを使用して、予めCSSで画像が表示される場所を確保しておくように記述しているので、CLSエラーが起こりづらいです。

さらに、今回からカスタマイズのコードを持ち帰るために、ワンクリックでコピーできるボタンを用意したので、コピーするのも簡単になりました。ぜひチャレンジしてください。

• デザインの説明
• カスタマイズ方法
  • 記事のURLを入れる
  • 画像のURLを入れる
  • 記事タイトルを入れる（alt属性にも使用します）
  • HTMLコードを入れる
  • CSSコードを入れる
  • 確認する
• おすすめ記事のHTML
• おすすめ記事のCSS
  • おすすめ記事デザインシンプル
  • おすすめ記事デザインカード型
• カスタマイズする場合

デザインの説明

表示できる記事数は４記事です。PC表示時（992px以上）は横並び、それ以下（992px未満）の場合は２列になります。

ほとんどのテーマで問題なく使えると思いますが、デザインが崩れた場合はご自身で調整してください。人気のテーマではデザインの確認済みです。

もちろん私が製作したテーマでも使うことが出来ます。

デザインはシンプルなものと、カード型を用意しました。どちらもCappuccinoで使えるおすすめ記事のデザインと同じようなものです。（その時の気分で作っているので若干違うかもしれません）

シンプル（PC表示）

シンプル（スマホ表示）

カード型（PC表示）

カード型（スマホ表示）

画像のみ

画像のみで使いたい場合は、「画像のみで使用する」のチェックボックスにチェックを入れるとHTMLのタイトル部分が削除されます。画像のみで使用する場合、CSSはシンプルなデザインのみになります。

画像のアスペクト比は２：１に設定しています。対比が違うとはみ出た部分は切り取られて表示されます。

切り取られて問題ない場合はそのままでも使えますが、使用したい画像のアスペクト比が違う場合は入力フォームに使用する画像サイズを打ち込めば、計算してCSSが書き換わります。

横長の画像にしてバナーのように、縦長の画像でファッションのカテゴリ分けのようにするなど、こだわりの画像を作るのもいいですね^^

カスタマイズ方法

以下に簡単な流れを記します。

入力項目を埋める → HTMLをコピー → ヘッダに貼り付け → デザインを選びCSSをコピー → デザインCSSに貼り付け

説明しなくても分かりやすいように作ったつもりですが、念のため使用方法を含めて詳しく説明します。

おすすめ記事のHTML

フォームに入力してください。

※画像のみで使用する場合はこのチェックボックスに、チェックを入れてください
    background: transparent;/* 背景色透過 */
}