AMPのCSSを編集する

AMPページのCSS編集 WP プラグイン

AMPのCSSを編集

Sponsor

AMPページのデザインをカスタム

AMPページで不都合・不具合があり、CSS(スタイルシート)をカスタムした方が良い場合、AMPに対応させるプラグイン「 AMP for WP 」で簡単にAMPページのCSSの編集ができます。

Sponsor

AMPページのCSSを編集する

AMPページを確認したところ、テーブル内の文字が中央寄せになっています。これを左寄せに変更します。

テーブル内の文字が中央寄せになっている

AMPページのデザインを変えたい
デロッパーツールで確認

AMPページのテーブルのテキストを左寄せにする

ソースコードをCSSに追加

.sgl td {
    text-align: left;
}

テーブル内の文字を左寄せに変更する

デロッパーツールで確認します。

  • F12開発者ツールを開く
  • 表示をスマートフォンまたはiPhoneにする
  • 左寄せのソース(text-align: left;)を追加する
  • 左寄せになっているか確認する
デロッパーツールで確認
デロッパーツールで確認

「AMP for WP」のCustom CSSを利用する

AMP for WP の設定は簡単で、広告の表示も簡単にできます。AMP for WPの設定については下のリンクを参照下さい。

AMPのページのCSSを追加する

  1. AMPの項目のDesignを開く
  2. Globalをクリックする
  3. Advancedを開く
  4. Custom CSSにソースコードを記述する

Custom CSS にソースを記述する

AMPページのCSS編集
AMPページのCSS編集

結果

次のようにテーブル内の文字(テキスト)が左寄せになりました。

AMPページのCSS編集
AMPページのCSS編集

AMP導入・設定とデザイン/AMP for WP

プラグイン公式 AMP for WP

ブラグインのインストールなど、サイトを変更する場合は、バックアップをとって行ってください。

WP プラグイン
Sponsor
ゆきををフォローする