はてなブログProの場合、以下のようにトップページの表示形式を選択することができます。
今までも一覧形式を選択してサムネイル、記事タイトル、記事本文の一部が一覧で表示されるタイプのデザインにしていたのですが、カード型レイアウトもとても気になっていました。
もちろん、テーマストアにあるテーマを使わせて頂くという方法もありますが、今まで使ってきたテーマをあちこちカスタマイズしており、ただ単にインストールしただけだとデザインが崩れてしまう箇所が出てきたり、また一からカスタマイズするのもなんだか気後れしてしまい･･･。
そこで、今回はPC画面だけの表示になるのですが、今使っているテーマのままのトップページをカード型レイアウトにするという方法を試してみることにしました。
参考にさせて頂いたサイトさん blog.minimal-green.com
上記サイトさんにあるコードを「｛｝デザインcss」に貼り付けるだけで出来上がりです。
後々、やり方を忘れてしまわないように、方法をメモっておきます。 詳しい方法は上記サイトさんを参考にしてください。
方法：
管理画面→デザイン→（カスタマイズ）→｛｝デザイン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: 20px;
box-sizing: border-box;
width: calc(50% - 20px);
}
.page-index .entry-thumb {
float:none;
display: block;
width: 100%;
height: 200px;
background-position: center center;
background-size: cover;
border-radius: 8px;
}
.entry-thumb-link:hover {
opacity:0.7;
}
}
記事タイトルをサムネイルの下に表示したい場合は以下のコードを追加する
.page-index .archive-entry {
position: relative;
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.page-index .entry-thumb-link {
order: 1;
height: 200px;
}
.page-index .archive-entry-header {
order: 2;
}
.page-index .categories {
order:3;
}
.page-index .archive-entry-body {
order:4
}
}
記事本文の一部も見えなくする場合は、以下のようにdisplay:noneとして非表示にすることもできます。
display:none;
}
思っていたよりも簡単にできてしまいました。 暫くはカード型レイアウトでいきたいと思います。
