テーマをSimplicity使用という環境で、AMPページの見出しタグをカスタマイズしたい時に。
子テーマのバージョンがVersion:20161002(現時点では最新)の場合、子テーマの中にAMP.CSSがあるので、ワードプレスダッシュボード左メニューの外観→テーマの編集と進んだページの右側に編集したい箇所を選択出来るようになっているので、amp.cssに、見出しタグのCSSを入力すればOKです。それはampではなくて普通のページの見出しタグを編集する時と同じタグを入れればOK。
例えば、私の場合はシンプルに太字だけの見出しにしているので、h2であれば左側の線を消す見出しタグカスタマイズをしているので、ampでは普通のページのテーマ編集(style.css)に、このように入力しているのですが
/* h2見出しタグの左の線を消したい */
.article h2 { border-left: none; }
普通のページと同じカスタマイズをampページにもしたい場合、普通のページ用のCSSと同じCSSをamp.cssに入力すればOKです。
見出しタグのカスタマイズCSSについてはこちらの記事に書きましたが
私のカスタマイズはh2～h4を太字のみにするカスタマイズなので、インターネットで「見出しタグ カスタマイズ」などで検索して、お好みのCSSを探したほうが良いと思います。
子テーマの、テーマの編集にamp.cssがない時は
テーマ編集にamp.cssがないよっていう場合は、子テーマのバージョンが以前のものになっているので子テーマを最新のものに変えれば、amp.cssが表示されますが、子テーマをインストールし直すことにより、今までカスタマイズしたものが消えてしまうので(記事や画像は消えないのですが、設定がふりだしに戻ってしまう)
子テーマをインストールし直さないでamp.cssを使用出来るようにしたい場合は、親テーマ(simplicity2)からamp.cssファイルをダウンロードして子テーマにインストールします。(親テーマにも子テーマにもamp.cssがある状態にします。)
その方法はエックスサーバーでしたらファイルマネージャ(FTP)にログインして、設定したいドメインを選択→public_html→wp-content→themes→simplicity2と進むと、amp.cssがあるので、その青くなっている文字をクリック(普通に左クリック)するとamp.cssをダウンロード出来ます。
そのページから1つ前のページに戻ってsimplicity2-childに進んで、先ほどダウンロードしたamp.cssをページ上にあるファイルのアップロードというボタンからアップロードすればOK、アップロードの際に「自動、アスキーモード、バイナリーモード」と選択出来るようになっているのですが、自動のままでOKです。あとはFTPからログアウトして終了します。
これでワードプレス上のテーマの編集で子テーマでamp.cssが使えるようになっています。
私はエックスサーバーでの話でしか解説出来ないのですが、親テーマからamp.cssをダウンロードして子テーマにアップロード(親テーマから子テーマにコピー)という方法で、他の環境の方でも可能だと思います。
AMPページh2見出しタグの背景を消したい
AMPの見出しタグ編集は、普通のページの見出しタグCSSをamp.cssに入力するだけなので特に迷うことはなかったのですが、私にとって1つ困った点が。
デフォルト設定でAMPページのh2タグのところに背景がついてしまっている。
何も飾りなく、太字だけにしたいのでこの背景を消したい…という時は
/* h2見出しタグの左の線を消したい */
.article h2 { border-left: none; }
/* h2見出しタグの背景を消したい */
.article h2 { background: none; }
とamp.cssに入力すればＯＫです。
AMPページの個別記事ページの記事タイトルすぐ下の日付やカテゴリ名が書いてあるところに、グレーっぽい背景がついているのですが
この色も消して白い背景にしたい時は
amp.cssに、このように入力すると
/* AMPページ記事タイトル下の日付部分のグレーの背景を消したい */
p.post-meta { background: none; }
背景のグレーを消すことが出来ます。
画像はスマホではなく、パソコンからAMPのテストページにアクセスしたものを使用しています。サブドメインでやっているブログのAMPページのキャプチャ画像です。
amp.cssにタグを入力したけどうまくいかない、という時は
CSSを入力してもうまくいかない時は、ctrl+f5でページを更新することと、タグの半角スペースを一回消して自分で入れ直してみることを試してみてください。
コメント