はてなブログはテーマによってブログの体裁をいろいろと変えられるのでR。
しかし、
記事一覧では1カラムの場合が多く、2カラムはそれになっておるテーマを選ぶことになるのでR。
しかし、
今使っているテーマが好みで、1カラムだと、今のテーマにいろいろといじって2カラム化しないといけないのでR。
その2カラム化が簡単にできたのでR。
それが、ここに書いてあったのでR。
それによると、「どんなテーマでも記事一覧がカード型２カラムの表示に対応できれるCSSが完成」とあるのでR。
そこで試しにしてみたのでR。
「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」に、
.archive-entries {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.archive-entries .archive-entry {
width: 47%;
}
.archive-entries .archive-entry {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.archive-entries .entry-thumb {
margin: 0;
background-size: cover;
background-position: 50% 50%;
width: 100%;
height: 180px;
}
と挿入してみると、見事にできたのでR。グルメゲリラ (id:tommyoctopas)様様でR。
あとは、css内のいくつかのサイズなどの%を変えると、自分好みのデザインにできたのでR。
また、スマホ対応にするには、先のcssに
@media screen and (max-width: 767px) {
.archive-entries .archive-entry {
width: 100%;
}
}
のようなcssを追加すればよいのでR。この場合は、横サイズが767pxまでは1カラム、それ以上が2カラムとできたのでR。
はてなブログのカスタマイズも含めて、はてなブログには下の本はとても分かりやすい本なのでR。
広告
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─
この記事をシェアできます。