はてなブログで記事一覧を2カラムにするのでR

はてなブログはテーマによってブログの体裁をいろいろと変えられるので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。

広告



（広告）月額900円(税抜)から、高速・多機能・高安定レンタルサーバー『エックスサーバー』
（広告）WordPressの運用に特化したレンタルサーバー『wpXレンタルサーバー』
（広告）年間920円（税抜）からの格安ドメイン取得サービス─ムームードメイン─