モーニング&ランチ

ゲーム・Wordpress

映像・音楽機器・インテリア関連

previous arrow
next arrow
Shadow
Slider

AMPページのCSSを編集する

AMPページのCSS編集
WordPress
Advertisements

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

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

Advertisements

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・広告の設定/AMP for WP
AMPのページに広告…

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

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

Custom CSS にソースを記述する

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

結果

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

AMPページのCSS編集
AMPページのCSS編集
AMP導入・設定とデザイン・AMPテストとAMPエラー
AMP 導入Goog…
AMP・広告の設定/AMP for WP
AMPのページに広告…
Advertisements
タイトルとURLをコピーしました