Amazonの大セール【サイバーマンデー】
12/6(金)AM9:00〜セール会場はこちら

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

こんにちは。マリ(@damarino_oheya)です!

このブログははてなブログproで書いています。(追記*現在はワードプレスに移転しました)

 

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

マリ

はてなブログでも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はこちら(スマホ版*四角カードタイプ)

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

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

 

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

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

blog.minimal-green.com

はてなブログテーマ「MInimal Green」のデモブログで「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です。

マリ

900PVの内の200クリックなので、意外とクリックされている方だと思います

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

 

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

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

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

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

はてなブログのヘッダーに細長いテキストリンクを入れる方法

はてなブログのヘッダーに細長いテキストリンクを挿入する方法

4 COMMENTS

nichinichisou0808

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

返信する
damarin

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

返信する
nichinichisou0808

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

返信する
damarin

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

返信する

コメントを残す

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

3 × 1 =