スポンサーリンク

STINGER・AFFINGERカスタマイズ

【AFFINGER4】AMPページの見出し(h2~h4)のカスタマイズ

投稿日:2017年3月29日 更新日:



こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。

WordPressテーマ「AFFINGER4」のAMPページの見出し(h2~h4)のカスタマイズ方法をご紹介します。

通常ページではカスタマイザーで設定することができる見出しのカスタマイズですが、AMPページでもファイル編集によって、通常ページと同じように表示することが可能です。
表示を揃えることで、AMPページから通常ページに移動した際に自然な印象になりますね。

下記のような当ブログでの表示例も含めて、順に説明していきたいと思います。

h2・h3見本ページhttps://kanamii.jp/2599/amp/

スポンサーリンク

事前準備

WordPressダッシュボード→外観→カスタマイズ→「各テキストとhタグ(見出し)」で通常ページの見出しのカスタマイズを行っている場合は、文字色・背景色・ボーダー色の各カラーコードをメモ帳にコピーしておいてください。

カスタマイザーで背景画像を設定されている場合は、WordPressダッシュボード→メディア→「ライブラリ」を開き、アップロード済みの画像URLを同じくメモ帳にコピーしておいてくださいね。

子テーマの作成

今回のカスタマイズは「st-amp-css.php」を編集します。

AFFINGER4のアップデート時にカスタマイズ内容が消えてしまわないように、ご自身のパソコンにある親テーマ内の該当ファイルをFTPでお使いの子テーマ内にアップロードして子テーマを作成してください。
他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。

5,206view
WordPressのカスタマイズ ~子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法~ - ゼロからのWordPress入門【18】

前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。 もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。 ご自身 ...

今後のアップデートでAMPに関わる部分の変更(親テーマのコードの変更)があった場合は、再度子テーマの作成とカスタマイズが必要になります。

文字色・背景色・ボーダー色を変更する方法

WordPressダッシュボード→外観→テーマ→テーマの編集→「st-amp-css.php」(子テーマ)を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「.post h3」と入力してマークされるあたりの下記コードを探してくださいね。
この部分が、h2とh3のスタイルを指定している部分です。

その少し下にあるのが、h4を指定している部分です。

「上のボーダー色」「下のボーダー色」「背景色」「文字色」とコメントを入れておきました。
その部分の「#」で始まるカラーコードをあらかじめメモ帳にコピーしておいたコードに書き換えてカラー変更は完了です。

見出し(h2)に背景画像を設定する方法

パターン背景画像を指定する場合

見出し(h2)に繰り返しのパターン背景画像を指定する場合は、上記コード内のbackground: #f3f3f3; /*背景色*/の部分を削除。
削除したスペースに下記コードを追加します。
【画像URL】の部分はあらかじめメモ帳にコピーしておいた画像URLに書き換えてくださいね。

ワンポイント画像or1枚の画像を指定する場合

見出し(h2)に繰り返し無しのワンポイント画像や1枚の画像を指定する場合の追加コードです。

文字の位置を調整したい場合は、コード内の

  • padding-top→上の余白
  • padding-right→右の余白
  • padding-bottom→下の余白
  • padding-left→左の余白

↑この部分の数値を変更することで調整可能です。

見出し(h3)に背景画像を設定する方法

見出し(h3)の左端にワンポイント画像を追加する方法です。
コード内のbackground-position: left center;すぐ上に下記コードを追加します。

文字の位置を調整したい場合は、コード内の下記部分で変更できます。

padding: 10px 15px;

  • 10px→上下の余白
  • 15px→左右の余白

より詳細な指定をしたい場合は、上記コードを削除して、見出し(h2)のpaddingの指定方法をコピーペーストしてもOKです。

当ブログでの見出しのカスタマイズ

以前に通常ページの見出しのカスタマイズを記事にしていますが、AMPページでも同じ表示になるようにファイル編集を行っています。

8,984view
【STINGER PLUS】 見出し(h2、h3)のCSSカスタマイズ~背景色指定・背景画像使用・ステッチ風~

こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。 AFFINGER4での見出し(h3)のカスタマイズコードの指定先の変更を行いました。 7月に1度区切りをつけた、カテゴリ ...

見出し(h2)のカスタマイズコード

当ブログでのカスタマイズコードをそのまま掲載します。

以下のカスタマイズを行う場合は、元のコードを「/**/」で囲んでコメントアウトするか、削除してからコードを追加してくださいね。

  • 【画像のパスまたはURL】の部分は、ご自身でアップロード済みの画像のパスまたはURLに書き換えてください。
  • border:2px dashed #ff6893→ステッチ部分のカラーコードです。お好きなカラーコードに変更可能です。
  • box-shadow: 0 0 0 4px #dfe0e1→カラーピッカーで取得したカラーコードです。記事をご参照の上変更してください。
  • margin・paddingの数値はお好みで変更可能です。

見出し(h3)のカスタマイズコード

  • 【画像のパスまたはURL】の部分は、ご自身でアップロード済みの画像のパスまたはURLに書き換えてください。
  • border-bottom:2px #ff6893→下線の太さとカラーコードはお好みで変更可能です。
  • background-position・margin・paddingの数値はお好みで変更可能です。

追加したコードが反映されない場合は、キャッシュをクリアして再度ご確認ください。

パソコンでのAMPページの表示確認方法を含めた、AFFINGER4のAMP化方法の全手順は下記ページで説明しています。

6,397view
【AFFINGER4】AMP化方法の全手順をまとめました

WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。 これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...

以上、AFFINGER4のAMPページの見出し(h2~h4)のカスタマイズ方法をご紹介しました。

最後までお付き合いくださりありがとうございます。

関連記事

2,099view
【AFFINGER4】AMPページも自分色♪カスタマイズまとめ

当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。 当ブログの開設当初に利用していたWordPressテーマは「STINGER PLUS」。 まだ1年の月日も経っ ...

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

スポンサーリンク

-STINGER・AFFINGERカスタマイズ

Copyright© Kanamii , 2024 All Rights Reserved Powered by AFFINGER5.