THE THOR ザ・トール 記事一覧をスマホ1列 タブレット2列 PC3列 に変更

THE THOR の記事一覧を画面サイズに合わせ1列から3列まで切り替わるようにしました。

どっちつかずな設定で行ったり来たりしていたのがこれで無くなります。

記事一覧をレスポンシブルにする狙い

THE THOR は標準の機能で記事一覧（アーカイブ）のレイアウトを3つのなかから選ぶことができます。

• ワイドレイアウト
• カードレイアウト
• ノーマルレイアウト

なかなか充実した設定だと思います。

特徴は以下のとおり。

ワイドレイアウト

ワイドレイアウトは1列表示です。アイキャッチ画像を大きく表示。スペースが広くタイトルも読みやすくなります。反面サイズが大きく1列なのでスクロールが長くなります。PC表示ではとんでもなくアイキャッチが大きくなってしまいます。PC表示では最悪ですがスマホ表示はインパクトがあり好みの表示です。

カードレイアウト

カードレイアウトは画面の幅にあわせて2列または3列で表示します。省スペースに多くの情報を詰め込むことができますが、少し文字が読みづらくなります。アイキャッチ画像は控えめな表示。3列表示ができるのでPC表示では見た目がよく最適と思います。

ノーマルレイアウト

ノーマルレイアウトは画像と文字を横並びにしたスタイル。名前の通りノーマルで無難なレイアウト。PC表示では文字部分が少し大きいかなと思うくらいのサイズ。

THE THOR では上記の3タイプの表示を切り替えることのできる「レイアウト切替ボタン」が設定可能です。

基本的なレイアウトを設定しておけばあとは閲覧者が自由に見やすいレイアウトを選択できるようになります。

とても素晴らしい機能です。しかし閲覧者全員が「レイアウト切替ボタン」を理解する、または使うということは到底考えられません。ひと手間かかるというのもユーザビリティ的に微妙かと思います。最初から適切な表示がしてあればその手間は必要ありません。

ここでいう最適な表示というのは完全に僕の好みになります。

記事一覧の列を変更した出来上がりを確認

出来上がりは以下のようになります。

スマホサイズで1列表示

タブレットサイズで2列表示

PCサイズで3列表示

列を変更する 当サイトの設定とオススメ設定

当サイトはページ全体を1カラムの設定にしています。サイドバーがないので3列表示も余裕です。サイドバーがあり2列で十分という場合は2列表示までにすることもできます。

設定は1カラムでも2カラムでもOKです。

必要な設定としてはワイドレイアウトをベースにタブレットサイズ、PCサイズに対応させるので基本的な設定をワイドレイアウトにしておきましょう。さらにオススメとしてはレイアウト切替ボタンを非表示にすること。無駄は省きましょう。

記事一覧の設定は以下の場所で変更可能です。

レイアウト切替ボタンを表示するにはレイアウト切替ボタンとコントローラーの両方を表示にする必要があります。

新着・人気順のタブ切替もこちらの設定にあります。

THE THOR 記事一覧 2列 3列 レスポンシブルに表示する

追加CSSに以下のコードを追加します。

/*　記事一覧　スマホ1列タブレット2列PC3列表示　*/
/*　均等配置　*/
.archive {
	justify-content: space-between;
}
/*　PCサイズ　*/
@media only screen and (min-width: 992px) {
	.archive__item {
		width: 32%;
	}
	.heading-secondary a{
		font-size: 1.8rem;
	}
	/*　最終行の並びを整頓　*/
	.archive:after {
	content: "";
	display: block;
	width: 32%; 
	height: 0;
	}
}
/*　タブレットサイズ　*/
@media only screen and (min-width: 768px) and (max-width: 992px){
	.archive__item {
		width: 49%;
	}
	.heading-secondary a{
		font-size: 1.6rem;
	}
}

画面が切り替わるポイントや文字サイズなどは各々のページにあわせ調整してください。

2列までの場合は以下のコードを使用

/*　記事一覧　スマホ1列大画面2列　*/
/*　均等配置　*/
.archive {
	justify-content: space-between;
}
/*　大画面2列　*/
@media only screen and (min-width: 768px) {
	.archive__item {
		width: calc(49.5%);
	}
	.heading-secondary a{
		font-size: 1.8rem;
	}
}

以上です。

それぞれで採用しているTHE THOR の設定次第ではうまく表示されない可能性もありますのでカスタマイズは自己責任でお願いします。

ざっくり解説

1. 992px以上の画面サイズでは記事を33%サイズにして横3つ表示。タイトルのフォントサイズは少し大きめな1.8rem
2. 768pxから992pxまでの画面サイズの場合は記事を49.5%サイズにして横2つ表示。タイトルのフォントサイズは1.6rem

列の隙間について

例えば3列表示の場合、この記事でのcssでは1列は33％と設定しています。

33％が3列で99％

残り1％が列と列の隙間になります。

30％に変更すると残りの10％が隙間として割り当てられます。数値を変更して好みのサイズを設定してください。

作りながら学ぶ HTML/CSSデザインの教科書

高橋 朋代, 森 智佳子

3,650円(12/06 10:55時点)

Amazonで購入する楽天市場で探すYahoo!で見る

Amazonの情報を掲載しています

あとがき

当サイトの場合は、スマホで擬似的にPC表示すると2列表示になります。（スマホ依存）

本当のPCだと3列表示になるので是非みていただきたいです。←自己満足

もしかしたらPC5列表示（19％）とかもありかな？