今回はTOPページの記事一覧の表示を2列のカード型表示にする方法と一番上に来ている記事を大きく表示する方法について紹介します。
※はてなブログproでトップページの表示形式を一覧表示にしているPC版ブログ限定の記事になります。
2列のカード型にする理由と記事を大きく表示する理由
2列のカード型にする理由
トップページを開いたときに目に飛び込んでくる情報量を増やしたかったからです。モニターサイズによると思いますが僕の場合、1記事分しか増えてません。
情報量を増やすといってもやたらに詰め込むとごちゃごちゃするだけになってしまうので、そこはうまくやりたいところです。
2列カード型表示はとてもいいのですが表示されたカードの中の表示はもう少し考えたいと思っています。
デザインするのって難しいですね。
とりあえずはこの形で様子をみようと思っています。
2列のカード型にすることで目に飛び込んでくる情報量が増える！
トップ記事を大きく表示させる理由
1列表示のときからトップには一番読んでもらいたい記事を固定で置くようにしていました。
詳しくはこちらで。
ところが、2列型に変更すると、「固定記事」と「最新記事」が並んで表示されることになってしまい何となく「固定記事」の強調具合が薄れる感じがしたんです。
折角固定して上に持ってきているのだからより強調させたい。
ということでTOPの記事だけ横幅いっぱいのカード型にしました。
2列カード型でTOPに記事を固定する場合はトップだけ1列カード型表示にする！
2列表示のカード型にしてTOPの記事を大きく表示する方法
次のコードを
「デザイン」→「カスタマイズ」→「デザインCSS」
にコピペすれば完了です！
/* トップページカード型 */
@media (min-width: 768px){
.page-index .archive-entries {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-between;
justify-content: space-between;
}
.page-index .archive-entry {
margin-bottom: 20px!important;
padding-bottom: 10px;
box-sizing: border-box;
width: calc(50% - 10px);
}
/*TOP記事を大きく表示*/
.page-index .archive-entries > section:first-child {
flex: 0 0 100%;/*TOP記事を大きく表示*/
}
}
黄色のマーカー部の数値を変更して好みの記事間隔にすることができます。
@media (min-width: 768px)〜はデバイスの画面幅が768px以上のものに適用しますよという意味でサイズ的にタブレットを指すようです。
※もちろんこの数字は自由に変えられます。
ですのでスマホで見ると以前と何も変わっていません。
ビフォーアフター
変更前の記事一覧がこんな感じ。（ちょっと古いですが）
今回の変更を加えたものです。
もうちょっとスッキリさせたいですが、しばらくこれで行きたいと思います。
※本ブログは現在すでにこの表示方法ではありません！また改めて記事にしたいと思います。
＜注意事項＞
HTMLやCSSなどあまり知識のない素人がカスタマイズについて書かれているサイトを調べながら、くっ付けて貼り付けてちょっと変えて、を繰り返して作ったものです。ご自分のサイトで使う場合はご注意ください。形が崩れたり、機能しないなんてこともあるかもしれません。
すでにどなたのブログから頂いたものかわからない状態です。ご連絡いただいたらもちろんすぐに紹介させてもらいます！
では！
