【はてなブログ】ヘッダー下におすすめ記事やアイキャッチを並べて表示するカスタマイズ方法

自分のブログを訪れてくれた人に読んでもらいたい「おすすめ記事」をトップページのヘッダー下に表示する方法です。

ヘッダーにおすすめ記事を表示するカスタマイズ

ブログは日々新しい記事が更新されるので、読んでもらいたいイチオシ記事も埋もれてしまいがちです。

★★「はてなブログ」では、トップページに記事を指定して常に表示できるような機能があります。
↓↓こちらですね^-^

ブログのトップページの先頭に、記事を固定できるようにしました - はてなブログ開発ブログ

しかしながら...

上記のやり方だと、１記事しかトップに固定できないのです。

自分のイチオシ記事を数記事トップに並べて、初めてページに訪れた方に読んでもらいたい！＆ブログ内での回遊率も上がってアクセスもアップするし！！
という方の願望を叶えます♪♪

このカスタマイズ方法の特徴

★このやり方では、
自分でオススメ記事のURLを選べるので、人気順や更新日時に関係なく、表示したい記事をお好きな順番で表示することができます。

★自分でURLを指定できるので、カテゴリーや固定ページなどを表示することもできます。

★マウスオーバーで、画像が少しズームするようなオシャレな仕様になっております♪

★また、PCの時はヘッダー下に横に４記事並べて表示、スマホだと↓↓の２列表示と１列表示の２つの方法があります。

あ！ちなみに↑↑こちらは、私のメインブログの旅行ブログとなっております♡
「おすすめ記事」表示の確認だけでなく、ブログにもご興味のある方は、ぜひ見てみてくださいねー（ついでに宣伝^^;）

元CAバンビのずぼら日記

カスタマイズコードの使い方とその解説

それでは、さっそく「やり方」を説明しますね。

１）アイキャッチ画像を用意

まずは、アイキャッチ画像を用意します。

私のやり方では、画像だけでリンクするやり方なので、アイキャッチ画像には、読みやすい「タイトル」を入れるのがオススメ！

↓↓こんな感じで！

アイキャッチの例

★アイキャッチ画像を用意する方法は、長くなるのでココでは解説しません。今度、こちらのやり方も解説していきたいな...とは思ってますが、いつになるか分かりませんので、テキトーに「アイキャッチ画像」などで検索してみてくださいませ。

ちなみに私は

Canva（キャンバ）

というサイトを使ってアイキャッチ画像を作っています。
はじめにメール登録が必要ですが、無料でオンライン上で簡単に色々できるので、めちゃ便利です♪♪

＊もともと無料で使えるサイトですが、有料版にするとさらに色々な機能が使えるようになります。（今なら有料版が30日間お試しでつかえるキャンペーンをやってますよ！）

追記：2021/02/17 - はてなブログの編集画面でアイキャッチ画像が作れるようになりました♪♪
↓↓この記事の終わりにもリンクを入れておきますので、こちらも読んでね(^-^)

コレめっちゃ便利！はてなブログ編集画面で「アイキャッチ画像」が作れる♪Canvaの使い方や注意点は？

２）HTMLを作成

HTMLは下記の通りです。
記事のURL、画像のURLを書き換えてください。「alt="タイトルのテキスト"」の部分は（良く分かりませんが）SEO的には入れた方が良さげです。

※なお画像URLは、一旦「記事を書く」でアップロードし、HTML編集の画面から引っ張ってくるか「はてなフォトライフ」からも取得できます。


<div class="article-area">

<div class="article-container">

<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>
<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>
<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>
<div class="article-box"><div class="article-img"><a href="記事のURL"><img src="画像のURL" alt="タイトルのテキスト" /></a></div></div>

</div>

</div>

挿入する場所は、デザイン→スパナマーク（カスタマイズ）→ヘッダ→タイトル下

３）CSSをコピペ

構造はこんな感じにしました。
色やサイズなどを変更する場合はこちらをご参考になさってくださいね^-^

CSSの構造

CSSのにはわかりやすいようにこのように色を付けています。
背景の薄紫は「lavender」でアイキャッチ画像の枠は「lightyellow」ですので、その部分を変えてくださいね。

サンプル

PCでは上記のように４つ横並び、スマホ表示の場合は２列（１列）と自動的に表示が変わるようなレスポンシブにしています。
なお、スマホ表示は、767px以下の場合で設定しています。

CSSは2種類用意しています。

CSSを挿入する場所

デザイン→スパナマーク（カスタマイズ）→ { }デザインCSS

スマホ２列用


/*=== article window ===*/
.article-area{
    background-color:lavender;/*背景色*/
}
.article-container{
    width: 90%;/*画像表示の幅*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    box-sizing: border-box;
    margin: 0px auto;
    padding:0px;
    text-align:center;}
.article-box{
    box-sizing:border-box;
    border:5px solid lightyellow;/*画像の枠色*/
    width:25%;
    padding:0px;
    margin:30px 15px;/*画像周りの空白*/
    overflow:hidden;}
.article-img img{
    width:100%;
    display:block;
    object-fit:cover; 
    transition-duration: 0.5s;/*ゆっくり戻る*/}
.article-img:hover img{/*マウスオーバーで拡大表示*/
    transform: scale(1.1);/*1.1倍に表示*/
    transition-duration: 0.5s;/*ゆっくり拡大*/}

/*=== smartphone ２列表示 ===*/
@media(max-width: 767px){
.article-container {
    width:100%;
    flex-wrap: wrap;/*折り返し表示（２列）*/
    justify-content:space-between;
    padding:8px;}
.article-box {
    width:45%;
    padding:0px;
    margin:8px;}
.article-img img{
    width:100%;
    padding:0;
    object-fit:cover;}}
.page-entry .article-area{display:none;}
/*=== end of article window ===*/

スマホ１列用


/*=== article window ===*/
.article-area{
    background-color:lavender;/*背景色*/
}
.article-container{
    width: 90%;/*画像表示の幅*/
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    box-sizing: border-box;
    margin: 0px auto;
    padding:0px;
    text-align:center;}
.article-box{
    box-sizing:border-box;
    border:5px solid lightyellow;/*画像の枠色*/
    width:25%;
    padding:0px;
    margin:30px 15px;/*画像周りの空白*/
    overflow:hidden;}
.article-img img{
    width:100%;
    display:block;
    object-fit:cover; 
    transition-duration: 0.5s;/*ゆっくり戻る*/}
.article-img:hover img{/*マウスオーバーで拡大表示*/
    transform: scale(1.1);/*1.1倍に表示*/
    transition-duration: 0.5s;/*ゆっくり拡大*/}

/*=== smartphone １列表示 ===*/
@media(max-width: 767px){
.article-container {
    width: 100%;
    flex-direction:column;/*縦に表示*/
    justify-content:center;
    padding:10px;}
.article-box {
    width: 100%;
    padding:0px;
    margin:5px 0;}
.article-img img{
    width:100%;
    padding:0;
    object-fit:cover;}}
.page-entry .article-area{display:none;}
/*=== end of article window ===*/

今日は、はてなブログで、ヘッダー下におすすめ記事やアイキャッチ画像を並べて表示するカスタマイズの方法を紹介しました！

検索からブログを訪れた方は必ずしもトップページを最初に読むわけではないので、グローバルナビゲーションや、サイドバーを使ってブログのトップページに誘導することも忘れずに♡

Canvaを使ったアイキャッチ画像の作り方

コレめっちゃ便利！はてなブログ編集画面で「アイキャッチ画像」が作れる♪Canvaの使い方や注意点は？

コードの公開についてのお願い

今回紹介したコードは記事末尾に紹介している様々なサイトを参考にして、一から自分で考えたものです。

・ご自身のサイトに組み込んで自由にお使い頂けます。

・もし、カスタマイズのやり方などで、記事の中でコードを紹介する場合には、参考ページとして、このページ（https://www.bambi.pro/entry/blog-eyecatch-list）へのリンクを紹介してください。
（無断で何の紹介もなくコピペで掲載されているのを見つけると悲しくなってしまいますので、どうぞよろしくお願いします！）