2019-09-21こんにちは。マリ(@damarino_oheya)です!このブログははてなブログproで書いています。(追記*現在はワードプレスに移転しました)ワードプレスのブログで、よくヘッダーにおすすめ記事が表示されているのを見て「いいな〜」と思っていました。マリはてなブログでもCSSで色々とカスタマイズができるのですが、今回やっとヘッダーにおすすめ記事を作ってみました。この記事では、はてなブログのヘッダーにCSSだけでおすすめ記事を表示させる方法をまとめています。(*2019年2月にワードプレスに移転しました)目次ヘッダーおすすめ記事*PCではこんなかんじヘッダーおすすめ記事*スマホではこんな感じカスタマイズする場所HTMLはこんな感じですCSSはこちら(スマホ版*細長カード)CSSはこちら(スマホ版*四角カードタイプ)参考にさせていただいた記事ヘッダーに【おすすめ記事】のすすめヘッダーおすすめ記事*PCではこんなかんじヘッダーにおすすめ記事とはこんな感じです。おすすめ記事を4つ表示させることができます。数は増やそうと思えば増やせますが、あまり多すぎてもデザイン的にも良くないので4つがいいかな?と、4つにしています。MEMOヘッダーに4つの記事を表示させるヘッダーおすすめ記事*スマホではこんな感じまた、スマホで見たときのおすすめ記事はこちら。スマホ版では2つのバージョンで作っています。左・細長いカード右・四角いカードパソコン同様、ナビメニューリンクの下に4つの記事が表示されています。今回はヘッダーにおすすめ記事を作ることが目的です。カスタマイズにはCSSHTMLを書き込みます。書き込む場所はヘッダー→タイトル下→ヘッダー用のHTML部分に書いていきます。MEMOCSSとHTMLはヘッダー用のHTML部分に書くHTMLはこんな感じです早速ですが、HTMLはこちらです。(*申し訳ございません!*1月4日まで掲載していましたHTMLに誤りがありました。class=”toprecommend-boxtitle”>というタグが抜けておりましたので、1月4日以前に使用した方は修正いただけたらと思います。(画像リンクとテキストリンクの間にコピペでタグを追加ください)*こちらは修正後のHTMLになります。先ほどの、ヘッダー用HTML部分の任意の場所にコピペし、URL・テキストを4記事分入力します。(ナビリンクの下におすすめ記事を表示したい時はナビリンクのHTMLの下にコピペ)POINT画像リンク用のURL画像のURLタイトル用のURLタイトルマリちょっとめんどくさい感じですね。すみません!その代わり、画像サイズは気にしなくて大丈夫です。←この部分の色を変えていただくと好きな色に変更できます。HTMLとCSSをよーく見ていただくとわかるのですが、「ーおすすめ記事ー」というタイトルの「ー」の部分は手入力の「ー」なのでお恥ずかしい限りです。マリCSSでどうにかしたかったのですが無理でした。←この部分の色を変えていただくと好きな色に変更できます。今回のおすすめ記事の作り方は、大元はこちら(webデザインのプロの方)の記事を参考にしています。Green」ユーザー向けに書かれた記事です。そのため、こちらの記事で紹介されているおすすめ記事の表示方法から、画像の処理やスクロールなしのデザインに変えるなど結構大幅に変えているところがあります。Airからの確認のみです。今回のカスタマイズは、ただのブロガーが作ってみたものということをご理解くださいね。(むしろ「ここ変!」とかあったら教えてください・・・!)当然ですが、カスタマイズの前には必ずバックアップを取ってください。MEMOプロのCSSではありません使う前にバックアップをお願いしますヘッダーに【おすすめ記事】のすすめヘッダー部分のおすすめ記事の表示は、ワードプレスのブログではもはやデフォルトで付いてるの?というくらいにみなさん取り入れていますよね。(*WPでもデフォルトでは付いていませんが、有料テーマでは割と簡単に設置できます)当ブログには2018年11月25日から「ヘッダーのおすすめ記事」を表示させていました。Analytics」によると約1ヶ月の間に4記事で約200クリックされている様子です。「約1ヶ月でたった200クリック!?」と思われるかもしれませんが、同期間のトップページへのアクセスが約900PVです。マリ900PVの内の200クリックなので、意外とクリックされている方だと思います当ブログのように、検索からの流入がほとんどのブログでは「このブログのおすすめ記事はこれです!」と自動でアピールできておすすめです。あと、いちばん重要なことなのですが、普通の記事にリンクではなく、まとめ記事にリンクするともっと良いみたいです。2019-01-04はじめまして。素晴らしいカスタマイズをありがとうございます。現在はPCとスマホで使用させていただいております。1点質問をお願いできますでしょうか。スマホ版の記事タイトルについて、フォントサイズの調整は可能でしょうか。コード内にあるフォント部分の設定値を変更しても特に変化はありませんでした。御多忙とは存じますが、ご教示の程お願い申し上げます。2019-01-05nichinichisou0808様コメントありがとうございます・・!ご指摘の通り、HTMLに誤りがあったのでこの記事で掲載しているHTMLを訂正いたしました。タグがコメント欄に書けないため、nichinichisou0808様のブログからメールを送信いたしましたのでご確認いただけたらと存じます。お返事ありがとうございます。ご対応いただきまして大変感謝をしております。ご教示頂いた方法にて無事に解決をいたしました。これからも素晴らしいカスタマイズの開発に期待させていただきます。メール失礼いたしました。無事に反映できてよかったです!ご指摘いただかなかったら間違いに気づかなかったので本当に助かりました。カスタマイズを使っていただき嬉しかったです。<コードをちょっと変えましたが参考にさせていただいたのは、Migaru-daysさんです。コメントをキャンセルメールアドレスが公開されることはありません。【2019年の福袋】北欧雑貨にマリメッコにAmazonも。雑記Aboutマリ身軽に暮らす日々のことを書いています。育児中だからこそシンプルな暮らしで楽するヒントを綴ります。長所を知って好きな自分を知ろう!私の長所100個一覧にしてみた。