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

このブログは「はてなブログ」で書いています。

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

 

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

 

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

(*2019年2月にワードプレスに移転しました)

ヘッダーおすすめ記事とはPCではこんなかんじ

f:id:damarin:20181220230624p:plain

ヘッダーにおすすめ記事とは、このブログのトップページで表示されるのですが、こんな感じにおすすめ記事を4つ表示させることができます。

 

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

MEMO
  • ヘッダーに4つの記事を表示させる

 

スマホではこんな感じ

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

f:id:damarin:20181220230831p:plain

スマホ版では2つのバージョンで作っています。

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

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

MEMO
  • スマホ版では細長カードと四角カードの2種類

 

カスタマイズする場所

f:id:damarin:20181203234808p:plain

今回はヘッダーにおすすめ記事を作りたいので、カスタマイズのCSSとHTMLはヘッダー→タイトル下の、ヘッダー用のHTML部分に書いていきます。

MEMO
  • CSSとHTMLはヘッダー用のHTML部分に書く

 

HTMLはこんな感じです 

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

(*申し訳ございません!*1月4日まで掲載していましたHTMLに誤りがあったので修正しております)

 

画像リンクとテキストリンクの間に

</a><br></span>

<span class=”toprecommend-boxtitle>

というタグが抜けておりましたので、1月4日以前に使用した方は修正いただけたらと思います。

(画像リンクとテキストリンクの間にコピペでタグを追加ください)

 

こちらは修正後のHTMLになります。

 

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

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

POINT
  1. 画像リンク用のURL
  2. 画像のURL
  3. タイトル用のURL
  4. タイトル

ちょっとめんどくさい感じですよね。

その代わり、画像サイズは気にしなくて大丈夫です。(多分!) 

 

CSSはこちら(スマホ版*細長カード)

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

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

 

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

 

記事を書く時の見出しのように、CSSでどうにかしたかったのですが無理でした。

 

CSSはこちら(スマホ版*四角カードタイプ)

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

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

 

(注)素人が作ったCSSです

今回のおすすめ記事の作り方は、大元はこちら(webデザインのプロの方)の記事を参考にしています。

blog.minimal-green.com

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

 

当ブログのテーマは「Under Shirt」を使っているので、この記事で紹介しているおすすめ記事の表示は、画像の処理やスクロールなしのデザインに変えるなど結構大幅に変えているところがあります。

 

また、iPhone6、iPad、MacBook Airからの確認のみです。

 

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

(むしろ「ここ変!」とかあったら教えてください・・・!)

 

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

MEMO
  • プロのCSSではありません
  • 使う前にバックアップをお願いします

 

ヘッダーに【おすすめ記事】のすすめ

f:id:damarin:20181221002408j:plain

ヘッダー部分のおすすめ記事の表示は、ワードプレスのブログではもはやデフォルトで付いてるの?というくらいにみなさん取り入れていますよね。(WPでもデフォルトでは付いていません)

 

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

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

 

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

 

当ブログのように、検索からの流入がほとんどのブログでは、ユーザーは記事を読んでトップページを見るのだと思いますが「このブログのおすすめ記事はこれですー!」と無言でアピールできておすすめかなと思います。

 

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

POINT
  • 意外と少しはクリックされる
  • まとめ記事のリンクを貼るのがベスト

*お願い*もし使ってみた方で「反映されない!」という場合はコメントからご一報いただくと助かります・・・!

 

このような記事もあります

www.oheya-migaru.com

ヘッダーに細長いテキストリンクも作ってみました。アマゾンや楽天へのリンク、注目してもらいたい記事を貼るのに使えます。

4 COMMENTS

nichinichisou0808

はじめまして。
素晴らしいカスタマイズをありがとうございます。現在はPCとスマホで使用させていただいております。
1点質問をお願いできますでしょうか。
スマホ版の記事タイトルについて、フォントサイズの調整は可能でしょうか。
コード内にあるフォント部分の設定値を変更しても特に変化はありませんでした。
御多忙とは存じますが、ご教示の程お願い申し上げます。

返信する
damarin

nichinichisou0808様
コメントありがとうございます・・!
ご指摘の通り、HTMLに誤りがあったのでこの記事で掲載しているHTMLを訂正いたしました。
また、タグがコメント欄に書けないため、nichinichisou0808様のブログからメールを送信いたしましたのでご確認いただけたらと存じます。
ご迷惑をおかけしまして本当に申し訳ございません・・・!ご指摘ありがとうございました!

返信する
nichinichisou0808

マリ様
早速のお返事ありがとうございます。
また、ご対応いただきまして大変感謝をしております。
ご教示頂いた方法にて無事に解決をいたしました。
これからも素晴らしいカスタマイズの開発に期待させていただきます。

返信する
damarin

nichinichisou0808様
突然のメール失礼いたしました。
無事に反映できてよかったです!
ご指摘いただかなかったら間違いに気づかなかったので本当に助かりました。
カスタマイズを使っていただき嬉しかったです。ありがとうございました!

返信する

コメントを残す

メールアドレスが公開されることはありません。