【THE THOR】iPhone 8のエントリー記事カード レイアウト調整

WordPressテーマ THE THOR（ザ・トール）

別ブログのZMASAa.blogとMASAa.blogは、WordPressテーマ THE THOR（ザ・トール）を使って構築しています。

ZMASAa.blog│ガジェット好きのmasaaが情報発信する2nd WordPressブログサイト

wp.masaa.net

MASAa.blog│パズドラ好きのmasaaが情報発信する1st WordPressブログサイト

wp.masaa.me

今回は、WordPressテーマ THE THOR（ザ・トール）【ノーマルレイアウト】設定時での「iPhone 8のエントリー記事カード レイアウト調整」に関するカスタマイズ についてまとめてみました。

WordPressテーマ THE THOR（ザ・トール）【ノーマルレイアウト】は、MASAa.blogで採用しています。

WordPressテーマ THE THOR（ザ・トール）iPhone 8のエントリー記事カード

WordPressテーマ THE THOR（ザ・トール）【ノーマルレイアウト】設定時でのiPhone 8で表示したエントリー記事カードは、次の様になっています。

iPhone 8の画面解像度は【750×1334】です。

この画面解像度【750×1334】は、iPhone 6, iPhone 6s, iPhone 7, iPhone SE(2世代), iPhone SE(3世代)でも同様となっています。

決して見難いわけではないのですが、左のアイキャッチ画像と右のタイトル表示のバランスが合っていません。

そこで、iPhone 6, iPhone 6s, iPhone 7, iPhone 8, iPhone SE(2世代), iPhone SE(3世代)に合わせた「エントリー記事カード」にカスタマイズしたいと思います。

iPhone 8のエントリー記事カード レイアウト調整のカスタマイズ

WordPressテーマ THE THOR（ザ・トール）【ノーマルレイアウト】設定時での「iPhone 8のエントリー記事カード レイアウト調整」のカスタマイズを行います。

カスタマイズ内容

「iPhone 8のエントリー記事カード レイアウト調整」のカスタマイズ内容は、下記の通りです。

「スタイルシート(style-user.css)」を開き、今回のカスタマイズ内容を追記します。

/************************************
** ■アーカイブページ エントリー記事カード iPhone8縦表示
************************************/
@media only screen and (max-width: 410px) { /*iPhone8縦表示対応*/
	.btn.btn-right { /*続きを読む*/
		display: none; /*非表示*/
	}
	.archive .heading.heading-secondary { /*エントリー記事カードのタイトル*/
		margin-bottom: 0; /*下マージン調整*/
	}
	.archive__contents .heading a { /*エントリー記事カードのタイトル*/
		font-size: 13px!important; /*フォントサイズ*/
	}
	.dateList__item { /*日付*/
		font-size: 9px!important; /*フォントサイズ*/
	}
	.archive h2 a { /*メタディスクリプション*/
		padding-left: 20px; /*内側左余白設定*/
	}
}

カスタマイズ後のiPhone 8のエントリー記事カード

今回のカスタマイズによって、iPhone 8で表示したエントリー記事カードは、次の様になりました。

今回のカスタマイズでは、「続きを読む」ボタンを削除し、フォントサイズ調整、余白設定等を行いました。

最後に

iPhone 6, iPhone 6s, iPhone 7, iPhone 8, iPhone SE(2世代), iPhone SE(3世代)は、まだまだシェア多く専用に対応する価値はあるかと思います。

我が家でもiPhone 8, iPhone 6s, iPhone SE(2世代)と3台あるので、今後も引き続きブログサイトを対応表示させて行きます。