<
スポンサーリンク

AMPページのCSSを編集する

AMPページのCSS編集 WordPress
AMPページのCSS編集
この記事は約2分で読めます。

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

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

AMPページのCSSを編集する

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

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

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

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

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

F12のツールで確認します。

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

次のソースコードをCSSに追加すればいいことがわかります。

  • .sgl td {
  •     text-align: left;
  • }
  •  

AMP for WPを利用する

AMP for WP の設定は簡単で、広告の表示も簡単にできます。

AMP for WPの設定については下のリンクを参照下さい。

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

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

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

AMPページのCSS編集
AMPページのCSS編集
タイトルとURLをコピーしました