Migaru-Days

身軽に暮らす、考える。

ーおすすめ記事ー

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

スポンサーリンク

 

f:id:damarin:20181220225109p:plain

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

 

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

 

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

 

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

 

 

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

f:id:damarin:20181220230624p:plain

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

 

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

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

 

スマホではこんな感じ

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

f:id:damarin:20181220230831p:plain

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

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

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

スマホ版のPOINT
  • 細長・四角カードの2種類

 

カスタマイズする場所

f:id:damarin:20181203234808p:plain

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

POINT
  • 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ではありません!

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

blog.minimal-green.com

こちらははてなブログテーマ「MInimal Green」のデモブログで、「MInimal Green」を使っている人向けに書かれた記事です。

 

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

 

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

 

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

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

 

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

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

 

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

f:id:damarin:20181221002408j:plain

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

 

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

 

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

 

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

 

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

 

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

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

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

 

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

www.oheya-migaru.com

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

キーワードで探す