AMPAFFINGER5のAMPページの見出しに好きな色を付ける方法2019年4月3日WordPressテーマ「AFFINGER5(WING)」のAMPページは、デフォルトのデザインだとほぼモノクロです。AMPページにカラーを入れるには、「st-amp-css.php」ファイルをカスタマイズします。今回は、AMP化したなら最低限やっておきたいhタグ(見出し)に色を付ける方法をご紹介します。(デフォルトのデザイン)AMP化しただけだと、ほぼ白黒で味気ないデザインになってしまいます。変更後(赤に編集)分かりやすく赤に変更しました。見出しのカラーだけでも変更しておくと、ちょっと個性が出ます。AMPの見出しのカラー編集方法AFFINGER5のAMPページのカラーを変更するには、「st-amp-css.php」ファイルをカスタマイズします。「st-amp-css.php」を開く編集したいhタグを見つけるサイトで使用の色番号に変更する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)は、以下のコードを編集します。27px;}h3タグ(見出し3)h3タグ(見出し3)は、以下のコードを編集します。27px;}サイトで使用の色番号に変更する変更後(赤に編集)h2タグ(見出し2)例として、h2タグは以下のように変更します。#ffffff;」)、メリハリを持たせました。ボーダーは残しています。不要であれば「border-top」と「border-bottom」を削除してください。h3タグ(見出し3)例として、h3タグは以下のように変更します。#FF0000;」)。#FF0000;」)。上記をヒントに、自分で色やデザインを変えてみてください。まとめAFFINGER5のAMPページは、デフォルトだと白黒デザインでサイトの個性がなくなります。見出しだけでもサイトに合わせた色に変更しておかないと、いつも通常ページでサイトに訪問してくれているユーザーが「違うサイト?」と困惑します。変更方法は簡単なので、ご紹介したカスタマイズをヒントに、自分なりに変更してみてくださいね。AFFINGER5(WING)のAMPページカスタマイズまとめWordPressテーマ「AFFINGER5(WING)」のAMPページのカスタマイズ例をまとめました。AMPは機能に制限がありますが、カスタマイズをすれば少しはマシになります。Optimizer」を使い、次世代画像フォーマット「WebP(ウェッピー)」に変換する方法を解説します。WordPressAdSenseの「ページビュー」と「表示回数」の違い2019/4/3AdSenseのレポートでよく見る「ページビュー」と「表示回数」の意味の違いを解説します。Form7」を利用せずに、Googleが提供する「Googleフォーム」を使ったお問い合わせフォームの作り方をご紹介します。プラグインBOKUこのサイトのほか、いろんなブログをWordPressで作っている男。テーマはAFFINGER5を愛用。BOKU関連記事AFFINGER52019/8/9AFFINGE5おすすめヘッダーカードのキャッチコピー表示方法AFFINGER5(WING)のver20190801βより、おすすめヘッダーカードにキャッチコピーを表示できるようになりました。キャッチコピーはどうすれば表示されるのか?設定方法を解説します。AFFINGER52019/8/9AFFINGER5ヘッダー用メニュー(横列)のタイトル属性の設定法AFFINGER5(WING)のver20190801βより、ヘッダー用メニュー(横列)が設定できるようになりました。ヘッダー用メニュー(横列)では、タイトル属性でサブテキストも表示できますが、このタイトル属性が表示されないことがあります。AFFINGER52019/5/17AFFINGER5に「この記事は約何分で読めます」を表示する方法WordPressテーマ「AFFINGER5(WING)」の記事上に、自動的に「この記事は約何分で読めます」と表示させるカスタマイズをご紹介します。AMP2019/3/17AFFINGER5のAMPにスティッキー広告(追尾広告)を表示させる方法WordPressテーマ「AFFINGER5(WING)」のAMPページにスティッキー広告を表示させる方法を解説。AFFINGER52019/3/14AFFINGER5の404ページのカスタマイズ方法とサンプルWordPressテーマ「AFFINGER5(WING)」では、ウィジェットから404ページをカスタマイズ可能です。AMP2019/3/17AFFINGER5(WING)のAMPページカスタマイズまとめWordPressテーマ「AFFINGER5(WING)」のAMPページのカスタマイズ例をまとめました。AMPは機能に制限がありますが、カスタマイズをすれば少しはマシになります。