THE THOR のトップページの記事一覧のレイアウトは、大きなワイドタイプと横に2記事並ぶカードタイプ、横長のノーマルタイプの3種類。ユーザーがレイアウトを変更できる切替ボタンをつけることもできます。
個人的にはカードタイプのレイアウトが好きなのですが、これをデフォルトに設定するとスマホから見た時も横に2記事が並び、タイトルが縦に間延びしてしまいます。カスタマイザーからはデフォルトのレイアウトを端末別に変更することができないので、この辺のレイアウト周りをカスタマイズしてみました。
実装するとこんな感じになります
PCやipad以上の画面サイズの端末から見た時はカスタマイザーでの設定と同じ見た目（レイアウト切替ボタンも動作します）で、タブレット・モバイルから見た時のレイアウトのみをCSSで変更しています。ノーマルタイプのような横長のタイプとカード型の2種類があり、どちらも CSS をコピペするだけで実装可能です。
私は「続きを読む」ボタンを非表示にしていますが、ボタンを表示させてもレイアウトが崩れないようにしてあります。また、タブレット・モバイルからの見た目が固定されるため、レイアウト切替ボタンは非表示にしました。
①横長（ノーマルタイプの変形）
タブレットからはノーマルタイプに近い横長のカードが表示され、スマホから見た場合はノーマルタイプの記事リンクのアイキャッチ部分が正方形になります。
カテゴリー名の配置をカード右上に変更して下部の余白を詰め、シュッとさせてみました。コンパクトにまとめたい方にはこちらがおすすめです。
モバイルのレイアウト
タブレットのレイアウト
②カード型（タブレット：1列2記事・モバイル：1列1記事）
iPad未満の画面サイズの端末から見た時はカードタイプのように1列2記事で、スマホから見た時はワイドタイプのように1列1記事で、カード型の記事リンクが並びます。
アイキャッチを綺麗に見せたい方はこちらがおすすめです。
モバイルのレイアウト
タブレットのレイアウト
①のレイアウトに変更する方法
編集するファイル
子テーマの「style-user.css」に以下をコピペします。
WordPress ＞ 外観 ＞ テーマの編集 ＞ style-user.css
から編集できます。
追加する CSS
style-user.css
@media only screen and (max-width: 767px){
#viewCard:checked ~ .archive .archive__item, #viewNormal:checked ~ .archive .archive__item, #viewWide:checked ~ .archive .archive__item{
width: 100%;
display: flex;
align-items: flex-start;
padding: 10px;
margin-right: 0;
position: relative;
}
#viewCard:checked ~ .archive .archive__item{
margin-right:15px;
}
.archive .eyecatch {
position: unset;
max-width: 160px;
min-height: 90px;
margin-bottom:0;
}
#viewNormal:checked ~ .archive .eyecatch {
max-width: 160px;
}
.archive .eyecatch__cat a {
padding: 5px 7.5px;
font-size: .9rem;
}
.archive .eyecatch__link {
position: absolute;
top: 10px;
left: 10px;
width: 160px;
height: 90px;
}
.archive .heading-secondary {
font-size: 1rem;
margin-bottom: 0;
}
.archive__contents {
width: 100%;
margin-left: 15px;
}
.archive__contents .btn{
margin-top:10px;
}
.archive .heading a {
font-size: 1.3rem;
}
.archive .dateList {
margin-bottom: 7px;
}
.archive .dateList__item{
font-size:1.1rem;
}
.archive .eyecatch__link-maskzoomrotate:hover img, .archive .eyecatch__link:hover img{
transform: scale(1) rotate(0deg);
}
.controller__viewLabel{
display:none
}
}
@media only screen and (max-width: 480px){
.archive .eyecatch, #viewNormal:checked ~ .archive .eyecatch{
max-width:90px;
}
.archive .eyecatch__link {
width:90px;
}
}スマホから見た時にカテゴリー名が更新日に被る場合
投稿日と更新日を両方表示する設定にしている場合、スマホから表示した時にカテゴリ名が日付に被ってしまうと思います。日付の上に余白を入れることも考えたのですが、レイアウトが崩れてしまうので、カスタマイザーの「アーカイブページ設定 ＞ 記事一覧リスト設定」から、どちらかのみの表示に設定するのがおすすめです。
また、スマホから見た時は投稿日か更新日のどちらかだけを表示するように、片方を「display:none;」で消してしまう方法もあります。こちらの方法を取る場合は、上のCSSの62行目の後に以下を追記してください。
投稿日だけを表示する場合
style-user.css
.dateList__item.icon-update{
display:none;
}更新日だけを表示する場合
style-user.css
.dateList__item.icon-clock{
display:none;
}②のレイアウトに変更する方法
編集するファイル
子テーマの「style-user.css」に以下をコピペします。
WordPress ＞ 外観 ＞ テーマの編集 ＞ style-user.css
から編集できます。
追加する CSS
style-user.css
@media only screen and (max-width: 768px){
.archive {
width: calc(100% + 15px);
}
#viewCard:checked ~ .archive .archive__item, #viewNormal:checked ~ .archive .archive__item, #viewWide:checked ~ .archive .archive__item {
width: calc(50% - 15px);
margin-right: 15px;
}
#viewNormal:checked ~ .archive .archive__item {
display: unset;
align-items: unset;
}
#viewNormal:checked ~ .archive .eyecatch {
max-width:100%;
}
#viewNormal:checked ~ .archive .archive__contents {
margin-left: 0;
}
#viewCard:checked ~ .archive .archive__item-shadow, #viewNormal:checked ~ .archive .archive__item-shadow, .archive__item-shadow {
padding: 10px;
}
.archive__contents {
padding: 0 5px;
}
.controller__viewLabel{
display:none
}
}
@media only screen and (max-width: 480px){
#viewCard:checked ~ .archive .archive__item, #viewNormal:checked ~ .archive .archive__item, #viewWide:checked ~ .archive .archive__item {
width: 100%;
}
.archive__item {
margin-bottom:30px;
}
}