AMPプラグインを入れたWordPressのスタイルをカスタマイズ


AMP対応はプラグインを使えば簡単!

AMP(Accelerated Mobile Pages)の対応、徐々に広がってきています。
せっかくなのでこのブログもAMP対応してみました。

WordPressなら「AMP」というそのものズヴァリのプラグインがすでにあります。

導入についての記事が先では?と思いつつ・・・

デザイナーとして、やっぱりこのデフォルトの見た目をどうにかしたいという要望に早くこたえたい!

AMP

勝手にWordPress色にされてしまう。
どこを修正したらいいのか、さっそく探していきましょう。

Chromeのデベロッパーツールで見てみると、AMP対応が入ると「amp-」接頭辞がついたclassやカスタム属性がつくようです。

じゃあこのclassに対して、どこでスタイル指定してるのかな~と見てみると、CSSを読み込んでいるのではなく、記事のHTMLに直接style要素で記述されているのがわかります。

もちろんCSSファイルで!importantとかやっても実現できることはできますが、さすがに野暮というものです。
ちゃんとプラグインをカスタマイズしましょう。

WordPressの管理画面で、「プラグイン」の中の「プラグイン編集」を選択します。

そうすると導入済みのプラグインが選択できますので、「AMP」を選んで「選択」ボタンをクリックします。
私はよくこの「選択」ボタンクリックを忘れてしまいます…
いまどき、選択した時点で切り替わると思い込んでるんですよ…

AMPプラグインを構成しているファイルの中に、それらしいものがありますね。
「amp/templates/style.php」を選択しましょう。

さきほどデベロッパーツールで見たstyle要素の中身がそのまま書かれています。ここまでくればデザイナーでも余裕でスタイルが修正できますね!
( ´∀`)bグッ!

無事、自分のブログの色に変更できました~(´∀`*)ウフフ

スポンサードリンク

菜摘

Web制作がメインですがときどきフライヤーデザインやCDラベルなどDTP系もやってます。 デザイナーだったはずがhtml/cssコーディングに目覚めた。 黒い画面は相変わらず怖い。 javascriptはこのごろちょっと頑張ってるよ。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です