【はてなブログ】トップページの表示をスマホ版のみ「リスト表示（並列）」にする方法

ブログの顔である『トップページ』、皆さんどう表示していますか？

記事を大きく表示すると見やすい反面、一度に見える記事数は少なくなってしまいますね。。

そこで、今回はトップページ表示を「PCは カード型 / スマホは リスト型」にカスタマイズしてみたので、その方法をご紹介したいと思います。

⚠️今回のカスタマイズは、私が現在利用中のはてなブログテーマ「Innocent」の製作者様、直々に作っていただいたコードになります。

どんな環境でも正常に動作するかは分かりかねますので、必ずバックアップを取っておきましょう。

💡この記事は、【はてなブログProでのカスタマイズ】を紹介しています。

Pro版でしか反映されませんので、はてなブログProへアップグレードしてからカスタマイズして下さいね＾＾

まずはトップページをカード型にカスタマイズ
- はてなブログProで一覧形式表示を選択
スマホ版のみ「リスト型（並列）表示」にカスタマイズ
- 悪戦苦闘するもできず、、ココナラで見積もり出してみた
- ダメもとでテーマ「Innocent」の製作者へ泣きついたら、、、
まとめ

まずはトップページをカード型にカスタマイズ

まず初めに、「トップページの記事一覧をカード型にする」カスタマイズをしていきます。全体的にこの表示になる様にコードを書いていきます。

（今回は、このカスタマイズをしている上でのカスタマイズになります＾＾）

おしゃれなブロガーさん達はこぞってこの表示なので、憧れ✨がありますよね。一度に多くの記事を見てもらえるので、回遊率アップが期待できますね＾＾

▶まず、カード型にカスタマイズするには、▼コチラの記事▼ をご覧ください。

saruboro.com

はてなブログProで一覧形式表示を選択

引用元：はてなブログ

冒頭でも触れましたが、この『トップページの記事一覧をカード型表示にする』カスタマイズは、はてなブログProでないと、残念ながらできません。

まだ、はてなブログのPro版にしていない場合は、まずはてなブログProへアップグレードしておきましょう＾＾

\ 収益化するなら”Pro版” /

はてなブログPro

/ 600円/月という安さ！（2年契約時）\

スマホ版のみ「リスト型（並列）表示」にカスタマイズ

上で紹介した記事の様に、トップページの記事一覧をカード型にカスタマイズすると、PCでの表示も、スマホでの表示もカード型に変更されます。

▼PCでの見え方

▼スマホでの見え方

これも、見やすくて良いのですが、スマホだと１ページに見える記事数はせいぜい4~5記事。。。

私の様な、個人ブログは「どれだけ多くの記事に興味をもってもらえるか。」が大切なのに、これだと最新記事２つ程目に留まって「おしまい」ですね。。。

そこで！先輩ブロガーさん達のトップページかを参考に、なんとかスマホだけ『リスト表示』にできないのかと考えたのです。。

▼こんな感じの表示が、『リスト型』。

引用元：ブログ型？サイト型？AFFINGERでできるトップページの型を知ろう！アフィンガー６

いいですね、、、一度で何記事も目に飛び込んでくるので、より多くの記事に目を通してもらいやすくなりますね！

もっと、はてなブログProでも「カテゴリーの階層化」や「トップページをサイト風に」簡単にカスタマイズできたらいいのですが、そんな力量もない私。

少しでも多くの記事を見てもらうには、こうするしか。。。🙈

というわけで、早速調べまくって挑戦したのですが．．．

悪戦苦闘するもできず、、ココナラで見積もり出してみた

お恥ずかしい話ですが、、、調べまくっても出てこない。（調べ方が悪いのは承知ですが。。）

「これか！」と思う記事へ辿り着いて、カスタマイズを施すも、なんか違う。。

使っているテーマだったり、今までのカスタマイズだったりが影響しているのか、思う様にならない😢

（その時の状態：はてなブログPro・テーマ「Innocent」使用、上記のカード型へのカスタマイズ済み）

これは、、、「プロに頼むしかない！」と思い、*ココナラで見積もりを出してもらったのですが、なんと！10000円というお値段。。。諦めました。。。

※ココナラ：CMでも話題のスキルシェアサービス。詳しい記事はコチラをどうぞ。

ダメもとでテーマ「Innocent」の製作者へ泣きついたら、、、

それから1年ほど、、、ネット上で情報を探しては辿り着けず、を繰り返していたのですが、、（諦めきれてない。）

「もしかして、Innocentの製作者さんなら、コードを教示してくれるかもしれない。」

と、ふと。思ったんです。

幸いなことに、このテーマ「Innocent」の製作者さんのブログ「MoonNote」は2021年まで更新されており、もしかしたら!! 読んでもらえるかも。とダメもとで問い合わせさせて貰ったところ………

返事が、、、キターーーーーΣ(ﾟДﾟ)

なんと！有難いことに、「コードを書いてみたので、使ってください。」と。

神様ですね、本当に。さらに、あろうことか私の環境では少しばかり大きく表示されたと相談したら、再度

「希望に叶うか分かりませんが、作り直してみました。」

と、書き直したコードまで送っていただきました💦（その節は、本当にありがとうございました🙇🏻）

▶その時に、教示して頂いたコードがこちら👇

/* スマホでカードをリストにする */
@media screen and (max-width: 480px) {
.page-archive .archive-entries .archive-entry {
padding: 16px 0 16px 160px;
position: relative;
min-height: 108px; /* タイトルが2行以下の場合にリストの高さが減るのを防ぐ */
}
.page-archive .archive-entries .archive-entry-header {
padding: 0 16px;
}
.page-archive .archive-entries .archive-date{
margin: 0;
}
.page-archive .archive-entries .entry-title,
.page-archive .archive-entries .entry-title a{
font-size: 1em; /*見出しのフォントサイズ */
}
.page-archive .archive-entries .categories {
display: none; /* カテゴリ非表示 */
}
.page-archive .archive-entries .entry-thumb-link {
position: absolute;
top: 0;
left: 0;
width: 144px;
height: auto;
padding: 0;
margin: 16px 0 0 16px;
}
.page-archive .archive-entries .entry-thumb {
position: static;
height: 0;
padding-top: 52.5%;
}
}