ワードプレスのブログで、よくヘッダーにおすすめ記事が表示されているのを見て「いいな〜」と思っていました。
はてなブログでもCSSで色々とカスタマイズができるのですが、今回やっとヘッダーにおすすめ記事を作ってみました。
この記事では、はてなブログのヘッダーにCSSだけでおすすめ記事を表示させる方法をまとめています。
ヘッダーおすすめ記事
PCではこんな感じ
おすすめ記事を4つ表示させることができます。
数は増やそうと思えば増やせますが、あまり多すぎてもデザイン的に4つが好みです。
スマホではこんな感じ
スマホ版では2つのバージョンで作ってみました。
パソコン同様、ナビメニューリンクの下に4つの記事が表示されています。
- 左・細長いカード
- 右・四角いカード
カスタマイズする場所
今回はヘッダーにおすすめ記事を作ることが目的です。
カスタマイズには
- CSS
- HTML
を書き込みます。
書き込む場所はヘッダー→タイトル下→ヘッダー用のHTML部分に書いていきます。
CSSとHTMLはヘッダー用のHTML部分に書きます
HTMLはこちら
ヘッダー用HTML部分の任意の場所にコピペし、URL・テキストを4記事分入力します。
（ナビリンクの下におすすめ記事を表示したい時はナビリンクのHTMLの下にコピペ）
- 画像リンク用のURL
- 画像のURL
- タイトル用のURL
- タイトル
変更場所が多く面倒ですが、画像サイズは気にしなくて大丈夫になっているはずです。
CSSはこちら
スマホ版では細長カードver
長くてすみません・・・！
/*お好きな色*/ ←この部分の色を変えていただくと好きな色に変更できます。
「ーおすすめ記事ー」というタイトルの「ー」の部分は手入力の「ー」です。CSSでどうにかしたかったのですが無理でした。
スマホ版では四角カードver
/*お好きな色*/ ←この部分の色を変えていただくと好きな色に変更できます。
参考にさせていただいた記事
今回のおすすめ記事の作り方は、大元はこちらの記事を参考にしています。
はてなブログテーマ「MInimal Green」のデモブログで「MInimal Green」ユーザー向けに書かれた記事です。
当ブログのテーマは「MInimal Green」ではなく「Under Shirt」です。（＊現在は別のテーマです）
そのため、こちらの記事で紹介されているおすすめ記事の表示方法から、画像の処理やスクロールなしのデザインに変えるなど結構大幅に変えているところがあります。
また、iPhone6、iPad、MacBook Airからの確認のみです。
今回のカスタマイズを使われる場合は、ただの一般人（専門ではない）作ということをご理解くださいませ。
カスタマイズの前には必ずバックアップを取ってください。
ヘッダーに【おすすめ記事】を表示するメリット
このブログでは2018年11月25日から「ヘッダーのおすすめ記事」を表示していました。
その結果、「Page Analytics」によると約1ヶ月の間に4記事で約200クリックされている様子です。
「約1ヶ月でたった200クリック！？」と思われるかもしれませんが、同期間のトップページへのアクセスが約900PVなので、900PVの内の200クリックということを考えると意外とクリックされている方なのかなと。
検索からの流入がほとんどのブログでは「このブログのおすすめ記事はこれです！」と自動でアピールできておすすめです。
ちなみに普通の記事にリンクではなく、まとめ記事にリンクするともっと良いみたいです。（まとめ記事を書かなくては・・・！）
