AMPページのCSS(スタイルシート)を編集する/左寄せにする

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

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

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

AMPページのCSSを編集する

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

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

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

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

ソースコードをCSSに追加

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

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

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

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

AMP for WPを利用する

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

Advertisements
AMP・広告の設定/AMP for WP - webNote / WPとゲーム
Advertisements- 目次 A...

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 - webNote / WPとゲーム
Advertisements- 目次 A...
Advertisements
タイトルとURLをコピーしました