Simplicity2 のAMPページで画像を一括で中央寄せする方法

このブログの通常ページでは、画像の類は中央寄せにしています。

これは、画像を挿入する際に WordPress の「配置」の項目で「中央」を選ぶと、class 指定として class=”aligncenter” が入ることを利用しています。

そして、通常ページで中央寄せ指定をしている画像は、Simplicity2 の AMP ページでも当然中央寄せになっているものと思っていたのですが…

よくよく見るとなっていませんでしたorz

CSS の記述を追加して、そこのところを改善してみましたので、シェアします。

スポンサーリンク

現状の確認

AMP ページを表示して現状を確認すると、画像が左寄せになっています。

通常ページでは中央寄せになっているのですが、AMP ページではそうなっていないので、これを修正します。

amp.css に追記

Simplicity2 の amp.css に下記を追記します。(私は子テーマを使っているので子テーマの amp.css に追記しました。)

結果を確認

結果は次の通りで、中央寄せされました。

特定の画像だけというわけではなく、記事内の画像は一括で中央寄せされます。

おわりに

以上、CSS を4行追記するだけの簡単カスタマイズでした。

ちょっとしたことですが、AMP ページと通常ページの統一感を出すという意味では、私としては欠かせない修正でした。

なお、上記の画像に出てきているマンガは、次の記事で紹介しています。オススメ漫画なので、気になる方は是非。

image credit: Hajime Taguchi先日、『東京23区内に月1万5千円以下で住んでみた』というコミックエ...

スポンサーリンク
スポンサーリンク