WordPressテーマ「AFFINGER4」のAMPページの見出し（h2～h4）のカスタマイズ方法をご紹介します。
通常ページではカスタマイザーで設定することができる見出しのカスタマイズですが、AMPページでもファイル編集によって、通常ページと同じように表示することが可能です。
表示を揃えることで、AMPページから通常ページに移動した際に自然な印象になりますね。
下記のような当ブログでの表示例も含めて、順に説明していきたいと思います。
h2・h3見本ページhttps://kanamii.jp/2599/amp/
スポンサーリンク
Contents
事前準備
WordPressダッシュボード→外観→カスタマイズ→「各テキストとhタグ（見出し）」で通常ページの見出しのカスタマイズを行っている場合は、文字色・背景色・ボーダー色の各カラーコードをメモ帳にコピーしておいてください。
カスタマイザーで背景画像を設定されている場合は、WordPressダッシュボード→メディア→「ライブラリ」を開き、アップロード済みの画像URLを同じくメモ帳にコピーしておいてくださいね。
子テーマの作成
今回のカスタマイズは「st-amp-css.php」を編集します。
AFFINGER4のアップデート時にカスタマイズ内容が消えてしまわないように、ご自身のパソコンにある親テーマ内の該当ファイルをFTPでお使いの子テーマ内にアップロードして子テーマを作成してください。
他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。
-
-
WordPressのカスタマイズ ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】
前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...
文字色・背景色・ボーダー色を変更する方法
WordPressダッシュボード→外観→テーマ→テーマの編集→「st-amp-css.php」（子テーマ）を開きます。
パソコンの「Ctrlキー」+「F」で表示される検索欄に「.post h3」と入力してマークされるあたりの下記コードを探してくださいね。
この部分が、h2とh3のスタイルを指定している部分です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
/* 中見出し */ 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; } /*小見出し*/ .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; line-height: 27px; } |
その少し下にあるのが、h4を指定している部分です。
|
1 2 3 4 5 6 7 |
.post h4 { margin: 20px 0; padding: 10px 15px; background-color: #f3f3f3; /*背景色*/ font-size: 17px; line-height: 26px; } |
「上のボーダー色」「下のボーダー色」「背景色」「文字色」とコメントを入れておきました。
その部分の「#」で始まるカラーコードをあらかじめメモ帳にコピーしておいたコードに書き換えてカラー変更は完了です。
見出し（h2）に背景画像を設定する方法
パターン背景画像を指定する場合
見出し（h2）に繰り返しのパターン背景画像を指定する場合は、上記コード内のbackground: #f3f3f3; /*背景色*/の部分を削除。
削除したスペースに下記コードを追加します。
【画像URL】の部分はあらかじめメモ帳にコピーしておいた画像URLに書き換えてくださいね。
|
1 2 |
background-image:url("【画像URL】"); background-repeat:repeat; |
ワンポイント画像or1枚の画像を指定する場合
見出し（h2）に繰り返し無しのワンポイント画像や1枚の画像を指定する場合の追加コードです。
|
1 2 3 |
background-image:url("【画像URL】"); background-repeat:no-repeat; background-position: left center; |
文字の位置を調整したい場合は、コード内の
- padding-top→上の余白
- padding-right→右の余白
- padding-bottom→下の余白
- padding-left→左の余白
↑この部分の数値を変更することで調整可能です。
見出し（h3）に背景画像を設定する方法
見出し（h3）の左端にワンポイント画像を追加する方法です。
コード内のbackground-position: left center;のすぐ上に下記コードを追加します。
|
1 |
background-image:url("【画像URL】"); |
文字の位置を調整したい場合は、コード内の下記部分で変更できます。
padding: 10px 15px;
- 10px→上下の余白
- 15px→左右の余白
より詳細な指定をしたい場合は、上記コードを削除して、見出し（h2）のpaddingの指定方法をコピーペーストしてもOKです。
当ブログでの見出しのカスタマイズ
以前に通常ページの見出しのカスタマイズを記事にしていますが、AMPページでも同じ表示になるようにファイル編集を行っています。
-
-
【STINGER PLUS】 見出し（h2、h3）のCSSカスタマイズ～背景色指定・背景画像使用・ステッチ風～
こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。 AFFINGER4での見出し（h3）のカスタマイズコードの指定先の変更を行いました。 7月に1度区切りをつけた、カテゴリ ...
見出し（h2）のカスタマイズコード
当ブログでのカスタマイズコードをそのまま掲載します。
以下のカスタマイズを行う場合は、元のコードを「/**/」で囲んでコメントアウトするか、削除してからコードを追加してくださいね。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/*見出し（h2）ここから*/ h2 { background-image:url("【画像のパスまたはURL】"); background-repeat:repeat; font-size:20px; line-height:27px; margin:40px 0 40px 0; padding:10px 20px 10px 20px; border:2px dashed #ff6893; border-radius:5px; box-shadow: 0 0 0 4px #dfe0e1, 2px 1px 6px 4px rgba(10, 10, 0, 0.5); } |
- 【画像のパスまたはURL】の部分は、ご自身でアップロード済みの画像のパスまたはURLに書き換えてください。
- border:2px dashed #ff6893→ステッチ部分のカラーコードです。お好きなカラーコードに変更可能です。
- box-shadow: 0 0 0 4px #dfe0e1→カラーピッカーで取得したカラーコードです。記事をご参照の上変更してください。
- margin・paddingの数値はお好みで変更可能です。
見出し（h3）のカスタマイズコード
|
1 2 3 4 5 6 7 8 9 |
/*見出し（h3）ここから*/ .post h3 { background-image:url("【画像のパスまたはURL】"); background-repeat:no-repeat; background-position:0 10px; margin:10px 0 25px 0; padding:10px 10px 10px 30px; border-bottom:2px #ff6893 dashed; } |
- 【画像のパスまたはURL】の部分は、ご自身でアップロード済みの画像のパスまたはURLに書き換えてください。
- border-bottom:2px #ff6893→下線の太さとカラーコードはお好みで変更可能です。
- background-position・margin・paddingの数値はお好みで変更可能です。
追加したコードが反映されない場合は、キャッシュをクリアして再度ご確認ください。
パソコンでのAMPページの表示確認方法を含めた、AFFINGER4のAMP化方法の全手順は下記ページで説明しています。
-
-
【AFFINGER4】AMP化方法の全手順をまとめました
WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。 これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...
以上、AFFINGER4のAMPページの見出し（h2～h4）のカスタマイズ方法をご紹介しました。
最後までお付き合いくださりありがとうございます。
関連記事
-
-
【AFFINGER4】AMPページも自分色♪カスタマイズまとめ
当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。 当ブログの開設当初に利用していたWordPressテーマは「STINGER PLUS」。 まだ1年の月日も経っ ...
