migaru-days

身軽なシンプル生活

はてなブログのヘッダーにおすすめ記事をCSSだけで作ってみた

ワードプレスのブログで、よくヘッダーにおすすめ記事が表示されているのを見て「いいな〜」と思っていました。

はてなブログでもCSSで色々とカスタマイズができるのですが、今回やっとヘッダーにおすすめ記事を作ってみました。

この記事では、はてなブログのヘッダーにCSSだけでおすすめ記事を表示させる方法をまとめています。

(*このブログは2019年2月にワードプレスに移転しました)

ヘッダーおすすめ記事

PCではこんな感じ

f:id:damarin:20181220230624p:plain

ヘッダーにおすすめ記事とはこんな感じです。

おすすめ記事を4つ表示させることができます。

数は増やそうと思えば増やせますが、あまり多すぎてもデザイン的にも良くないので4つがいいかな?と、4つにしています。

スマホではこんな感じ

スマホで見たときのおすすめ記事はこちら。

f:id:damarin:20181220230831p:plain

スマホ版では2つのバージョンで作ってみました。

パソコン同様、ナビメニューリンクの下に4つの記事が表示されています。

  • 左・細長いカード
  • 右・四角いカード

カスタマイズする場所

f:id:damarin:20181203234808p:plain

今回はヘッダーにおすすめ記事を作ることが目的です。

カスタマイズには

を書き込みます。

書き込む場所はヘッダー→タイトル下→ヘッダー用のHTML部分に書いていきます。

memo

CSSとHTMLはヘッダー用のHTML部分に書きます

HTMLはこちら

早速ですが、HTMLはこちらです。

先ほどの、ヘッダー用HTML部分の任意の場所にコピペし、URL・テキストを4記事分入力します。

(ナビリンクの下におすすめ記事を表示したい時はナビリンクのHTMLの下にコピペ)

POINT
  • 画像リンク用のURL
  • 画像のURL
  • タイトル用のURL
  • タイトル

変更場所が多く面倒ですが、画像サイズは気にしなくて大丈夫になっているはずです。

CSSはこちら

スマホ版では細長カードver

長くてすみません・・・!

/*お好きな色*/ ←この部分の色を変えていただくと好きな色に変更できます。

HTMLとCSSをよく見ていただくとわかるのですが、「ーおすすめ記事ー」というタイトルの「ー」の部分は手入力の「ー」です。CSSでどうにかしたかったのですが無理でした。

スマホ版では四角カードver

こちらも長くてすみません・・・!

/*お好きな色*/ ←この部分の色を変えていただくと好きな色に変更できます。

参考にさせていただいた記事

今回のおすすめ記事の作り方は、大元はこちらの記事を参考にしています。

blog.minimal-green.com

はてなブログテーマ「MInimal Green」のデモブログで「MInimal Green」ユーザー向けに書かれた記事です。

当ブログのテーマは「MInimal Green」ではなく「Under Shirt」です。

そのため、こちらの記事で紹介されているおすすめ記事の表示方法から、画像の処理やスクロールなしのデザインに変えるなど結構大幅に変えているところがあります。

また、iPhone6iPadMacBook Airからの確認のみです。

今回のカスタマイズは、ただのブロガーが作ってみたものということをご理解くださいませ。

当然ですが、カスタマイズの前には必ずバックアップを取ってください。

memo

いちブロガーのCSSです。使う前にバックアップをお願いします!

ヘッダーに【おすすめ記事】を表示するメリット

f:id:damarin:20181221002408j:plain

当ブログには2018年11月25日から「ヘッダーのおすすめ記事」を表示していました。

その結果、「Page Analytics」によると約1ヶ月の間に4記事で約200クリックされている様子です。

「約1ヶ月でたった200クリック!?」と思われるかもしれませんが、同期間のトップページへのアクセスが約900PVなので、900PVの内の200クリックということを考えると意外とクリックされている方だと思います

当ブログのように、検索からの流入がほとんどのブログでは「このブログのおすすめ記事はこれです!」と自動でアピールできておすすめです。

あと、いちばん重要なことなのですが、普通の記事にリンクではなく、まとめ記事にリンクするともっと良いみたいです。(まとめ記事を書かなくては・・・!)

おすすめ関連記事です