Bambi's BLOG @ hatena

ブログ運営 カスタマイズ テーマ制作 アフィリエイト いろいろ (ずぼらでも頑張るブログ)

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

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

 

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

 

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

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

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

 

しかしながら...

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

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

(って言うより、作ってもすぐに忘れちゃうので...ほぼ自分用の備忘録ですので、読みにくいとか誤字脱字などご容赦くださいねー)

 

 

 

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

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


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


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

 

ヘッダー下におすすめ記事(スマホ用2列)
ヘッダー下におすすめ記事(スマホ用1列)

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

元CAバンビのずぼら日記

 

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

 

1)アイキャッチ画像を用意

 

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

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

↓↓こんな感じで!

アイキャッチの例



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

 

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

 

 

 

2)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>

 

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

 

 

 

3)CSSをコピペ

 

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

CSSの構造

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

サンプル

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

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

 

CSSを挿入する場所

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

 

スマホ2列用


/*=== 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 2列表示 ===*/ @media(max-width: 767px){ .article-container { width:100%; flex-wrap: wrap;/*折り返し表示(2列)*/ 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 ===*/

 

スマホ1列用

 


/*=== 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 1列表示 ===*/ @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 ===*/

 

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

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

 

グローバルナビゲーションの設置方法やアクセスアップの方法に関しては、こちらも合わせてご覧ください!
↓↓

月間10万PV越え!これまでに試したアクセスアップの方法 

 

 

 

★参考にしたページ一覧★

今回、HTMLやCSSを作成するために参考にしたページ一覧です。
ご利用のテーマによっては上手く表示されない場合など、コードに変更を加える場合などにはこちらをご覧になると良いと思います。

★CSSコードについて★

justify-content - CSS: カスケーディングスタイルシート | MDN

flex-wrap - CSS: カスケーディングスタイルシート | MDN

日本語対応!CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス

1行追加でOK!CSSだけで画像をトリミングできる「object-fit」プロパティー | Webクリエイターボックス

【CSS】画像の下に謎の余白ができちゃう問題を解決する方法 - アイデアハッカー

 

★マウスオーバーの効果について★

CSS|マウスオーバーで画像に効果を入れる方法 | コトダマウェブ

 

★はてなブログ、ヘッダー下のおすすめ記事について★

flexboxで横並び ヘッダー下におすすめ記事を並べるカスタマイズ - Hatena Blog Theme Custom

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

 

★アイキャッチ画像について★

ブロガーさん必見!アイキャッチ画像を一瞬で作る方法 - 広め人|広め人

無料デザインツールCanvaとは?できることを解説(Canvaのt使い方)

 

カスタマイズ