THE THOR
[THE] 画像付き新着記事 ウィジェットを2列で表示する

THE THOR のウィジェット [THE] 画像付き新着記事 をカスタマイズ。

 

[THE]画像付き新着記事は、新着記事を横幅いっぱいに表示することができます。

個人的に画像が大きすぎると感じました。特にPC表示で横幅いっぱいはかなりの大きさです。

トオル
標準は、
画像が大きくてインパクト大!
好みの問題だな。

 

この記事ではCSSを使いウィジェット[THE]画像付き新着記事を横幅半分(約50%)にして2列表示に変更します。

※[THE]カテゴリ人気記事にも反映されます。

 

THE THOR
[THE] 画像付き新着記事 ウィジェットを2列表示

THOR [THE]画像付き新着記事 2列

 

2列表示にするには追加CSSを利用。

操作手順
外観 → カスタマイズ → 追加CSS

 

追加CSSに以下のコードをコピペすると上記画像のような表示になります。

/* TOP新着記事の枠 */
/* TOP新着記事二分割 */
.widgetArchive {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
li.widgetArchive__item{
	width:calc(50% - 6px);
	text-align: center;
	background-color: #fff;
	box-shadow: 0px 1px 3px 0px #ccc;
	margin-bottom: 12px;
	padding-bottom: 4px;
}
.widgetArchive .heading a{
	font-weight: 400;
	padding:0 4px;
}

※カスタマイズは自己責任でお願いします。

 

補足

2列表示をするメインのCSSは以下の通りです。

これ以外の部分は装飾なのでお好みに合わせて数値を変更したり行ごと削除してください。

.widgetArchive {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
li.widgetArchive__item{
	width:calc(50% - 6px);
}
テツ
リンクカードの大きさは
横幅50%から6px引いた幅、
つまりカード間は12pxだ。

 

装飾変更サンプル

THOR [THE]画像付き新着記事 装飾サンプル

こんな表示も可能!

 

あとがき

 

当サイトではウィジェット[THE]画像付き新着記事をスマホでは1列(標準)、PCでは2列(CSS)で表示していました。

スマホでも2列表示をしたいという問い合わせを頂き、実際に2列表示をテストしたところ若干直帰率が改善されたのでPC/スマホともに2列表示を当サイトで採用することにしました。

質問や問い合わせを頂くとやる気に繋がり改善のきっかけにもなります。皆さんのご意見ご希望をお待ちしています。

 

 

>ダミーのタイトルをいれて高さを保つ

ダミーのタイトルをいれて高さを保つ