ボクのアフィリエイト日記

ボクアフィ

AFFINGER5 AMP

AFFINGER5のAMPページの見出しに好きな色を付ける方法

WordPressテーマ「AFFINGER5(WING)」のAMPページは、デフォルトのデザインだとほぼモノクロです。

AMPページにカラーを入れるには、「st-amp-css.php」ファイルをカスタマイズします。今回は、AMP化したなら最低限やっておきたいhタグ(見出し)に色を付ける方法をご紹介します。

見出しのカラー変更前と変更後

変更前

AFFINGER5のAMPページのhタグにカラーを付ける前

変更前(デフォルトのデザイン)

AMP化しただけだと、ほぼ白黒で味気ないデザインになってしまいます。

変更後

AFFINGER5のAMPページのhタグにカラーを付けた後

変更後(赤に編集)

分かりやすく赤に変更しました。見出しのカラーだけでも変更しておくと、ちょっと個性が出ます。

AMPの見出しのカラー編集方法

AFFINGER5のAMPページのカラーを変更するには、「st-amp-css.php」ファイルをカスタマイズします。

手順は以下の通り。

  1. 「st-amp-css.php」を開く
  2. 編集したいhタグを見つける
  3. サイトで使用の色番号に変更する

1つずつ解説します。

「st-amp-css.php」を開く

「st-amp-css.php」は、AFFINGER5のAMPページのCSSファイルです。このファイルを編集することで、AMPページの色やデザインを編集できます。

「st-amp-css.php」は、FTPでサーバーにログインして、

ドメイン>public_html>wp-content>themes>affinger5>st-amp-css.php

の順に開くと見つかります。

たとえば、「ロリポップ!」だったら「ロリポップ!FTP」にログイン、「エックスサーバー」だったら「ファイルマネージャ」にログインして探します。

不明点は、各レンタルサーバーのマニュアルを参考にしましょう。

編集したいhタグを見つける

「st-amp-css.php」を開いたら、編集したいコードを見つけてサイトの色に合わせます。

今回は、h2タグ(見出し2)とh3タグ(見出し3)の色とデザインを変更します。

h2タグ(見出し2)

h2タグ(見出し2)は、以下のコードを編集します。

.h2modoki,
h2 {
	margin: 20px 0;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	border-top: 2px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #f3f3f3;
	color: #1a1a1a;
	font-size: 19px;
	line-height: 27px;
}

h3タグ(見出し3)

h3タグ(見出し3)は、以下のコードを編集します。

.h3modoki,
.post h3 {
	margin: 20px 0;
	padding: 10px 15px;
	border-bottom: 1px #999 dotted;
	background-position: left center;
	background-repeat: no-repeat;
	color: #1a1a1a;
	font-size: 18px;
	line-height: 27px;
}

サイトで使用の色番号に変更する

AFFINGER5のAMPページのhタグにカラーを付けた後

変更後(赤に編集)

h2タグ(見出し2)

例として、h2タグは以下のように変更します。

.h2modoki,
h2 {
	margin: 20px 0;
	padding-top: 10px;
	padding-right: 20px;
	padding-bottom: 10px;
	padding-left: 20px;
	border-top: 2px solid #ccc;
	border-bottom: 1px solid #ccc;
	background: #FF0000;
	color: #ffffff;
	font-size: 19px;
	line-height: 27px;
}

背景色にカラーを付け(「background: #FF0000;」)、見出しのテキストを白にして(「color: #ffffff;」)、メリハリを持たせました。

ボーダーは残しています。不要であれば「border-top」と「border-bottom」を削除してください。

h3タグ(見出し3)

例として、h3タグは以下のように変更します。

.h3modoki,
.post h3 {
	margin: 20px 0;
	padding: 10px 15px;
	border-bottom: 1px solid #FF0000;
	background-position: left center;
	background-repeat: no-repeat;
	color: #FF0000;
	font-size: 18px;
	line-height: 27px;
}

下線のドットをラインに変更し、色を赤にしました(「border-bottom: 1px solid #FF0000;」)。

テキストカラーも赤にしました(「color: #FF0000;」)。

上記をヒントに、自分で色やデザインを変えてみてください。

まとめ

AFFINGER5のAMPページは、デフォルトだと白黒デザインでサイトの個性がなくなります。

せめて見出しだけでもサイトに合わせた色に変更しておかないと、いつも通常ページでサイトに訪問してくれているユーザーが「違うサイト?」と困惑します。

変更方法は簡単なので、ご紹介したカスタマイズをヒントに、自分なりに変更してみてくださいね。

AFFINGER5(WING)のAMPページカスタマイズまとめ

WordPressテーマ「AFFINGER5(WING)」のAMPページのカスタマイズ例をまとめました。AMPは機能に制限がありますが、カスタマイズをすれば少しはマシになります。 紹介カスタマイズ 見 ...

続きを見る

おすすめ記事

EWWW Image Optimizerの設定画面
画像を「EWWW Image Optimizer」でWebPに変換する方法

2019/5/17  

WordPressプラグイン「EWWW Image Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。

AdSenseの「ページビュー」と「表示回数」の違い
AdSenseの「ページビュー」と「表示回数」の違い

2019/4/3  

AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。

プラグイン不要!Googleフォームでお問い合わせフォームを作る方法
プラグイン不要!Googleフォームでお問い合わせフォームを作る方法

2019/4/3  

WordPressで人気のプラグイン「Contact Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。

BOKU

このサイトのほか、いろんなブログをWordPressで作っている男。 テーマはAFFINGER5を愛用。

    -AFFINGER5, AMP

    Copyright© ボクアフィ , 2019 All Rights Reserved.