[Gutenberg対応あり] AMPページに表示したくないコンテンツを非表示にする方法
Search ConsoleのAMPエラーも全て対応が済んで多少は安定してきたように思える当サイトのAMPページですが、相変わらずちょっとでも何か変わった事をしようとすると、すぐに「やだなにこれ」な状態にしてくれるのが困りモノです。
当サイトで利用中のWordPressテーマLuxeritasはかなりガチでAMP対応してくれるすばらなテーマですが、それでもユーザーが追加するコンテンツまではさすがに対応しきれない部分もあるので、何かAMPページでの表示・非表示を巧くコントロールするいい方法はないものかと無い知恵を絞って考えてみました。
AMPページでの表示をコントロール
正直言って自分でも何やそれーと思うところはありますが、他にいい方法が思いつきませんでしたし、結果的にこんなシンプルな方法でも一応ちゃんとコントロール出来るようになるという事でここはよしとして下さい。
HTMLとCSSで簡単に出来ます
クラスセレクタの名前は好きなように変更していただいて構いませんが、とりあえずここではamp-display-noneという名前にしています。
AMPページで非表示にしたい部分をこんな感じで囲みます。
<div class="amp-display-none">
＠AMPページで非表示にしたい部分＠
</div>
もちろんコンテンツの親要素に追加してもOKです。
AMP用のCSSには以下のコードを追加します。
.amp-display-none { display: none; }
以上です！何だか微妙にしょっぱい方法ですいまっせん…
ですが、これでAMPページに表示したくないコンテンツを非表示に出来ます。
Gutenbergを使用している場合
WordPressでGutenbergを使用している場合は、AMPページで非表示にしたい部分を括る代わりにブロックの設定からを開いて、追加CSSクラスにamp-display-noneと記述します。
と言うかむしろGutenbergの方が簡単でいいかも？
AMP用CSSの編集について
WordPressでLuxeritasやCocoonのようなAMP用CSSテンプレートが用意されているテーマを利用している場合は簡単に出来ますが、そうでない場合は
- AMPページのhead内に書く
- phpファイルを作成してincludeする
- functions.phpで追加する（WordPressの場合）
てな感じになるでしょうか、実は私もその辺りの事はイマイチよくわかっていませんのでまたおいおい調べておきたいと思います。
PCでの表示をコントロール
この方法を応用するとスマホではコンテンツを表示してPCでは非表示にするといった事も可能になります。と言ってもCSSでデバイスやユーザーエージェントによる判別は出来ないので、メディアクエリで1200px以上だったらPCと見做すような感じになりますけど。
PCで非表示にしたい部分を以下のコードで囲みます。
<div class="pc-display-none">
＠PCで非表示にしたい部分＠
</div>
Gutenbergの場合はAMPページと同様にPCで非表示にしたいブロックの追加CSSにpc-display-noneと記述します。
CSSはこんな感じでしょうか。
@media screen and ( min-width: 1200px ) {
.pc-display-none { display: none; }
}
メディアクエリの値は適切なブレークポイントなりに変更して自由にお使い下さい。
尚、これと先ほどのAMP用のクラスを巧く使い分ける事で、PCとスマホで表示するコンテンツ内容を変えるといった事も出来るようになります。
AMPページで問題のある部分は非表示に
根本的な解決にはならないかもしれませんが、どうしてもAMPページでうまく表示出来ないコンテンツを何とかしたい場合に「この部分はスマホでは表示されなくてもいいか」という事ならいっそスパっと非表示にしてしまうのも一つの方法かと思います。
決してドヤ顔で語れるようなスマートな方法ではないにしても、私としてはこれで結構楽になった部分もそれなりにありますので、当エントリーで紹介した方法が少しでもどなたかのお役に立てば幸いです。