【お知らせ】このサイトではWordPressテーマ Cocoonを採用しています。THE THORのカスタマイズ状況についてはZMASAa.blogをご参照下さい。
WordPress関連THE THOR

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

アイキャッチ画像 THE THOR(ザ・トール)
この記事は約4分で読めます。
スポンサーリンク

WordPressテーマ THE THOR(ザ・トール)

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

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

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

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

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

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

【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世代)に合わせた「エントリー記事カード」にカスタマイズしたいと思います。

WordPressテーマ THE THOR(ザ・トール)レイアウト設定箇所
【アーカイブページ設定[THE]】-【コントローラー設定】-【レイアウト切替ボタンの設定】で、
→【レイアウト切替ボタンを表示するか選択】を【非常時(default)】に設定
→【レイアウト切替ボタンの初期checkedを選択】を【ノーマルレイアウト】に設定

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で表示したエントリー記事カードは、次の様になりました。

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

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

最後に

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

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

MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

おすすめWordPressテーマ!
WordPressテーマ WING(AFFINGER6)
WordPressテーマ THE THOR(ザ・トール)
WordPressテーマ Diver

下記バナーからスマホゲームのインストールお願いします!
ザ・グランドマフィア
少女ウォーズ
れじぇくろ! ~レジェンド・クローバー~
イース6 オンライン〜ナピシュテムの匣〜
極道のエデン
リネージュ2M
魔剣伝説
超次元彼女
ライフアフター
覇王の天下-戦略シミュレーション
グランドサマナーズ
The King of Fighters '98UM OL

MASAa.net

コメント