[Gutenberg対応あり] AMPページに表示したくないコンテンツを非表示にする方法

2019/06/19マークアップ言語HTML, CSS, AMP対応

AMP関連記事 トップ用イメージ

Search ConsoleのAMPエラーも全て対応が済んで多少は安定してきたように思える当サイトのAMPページですが、相変わらずちょっとでも何か変わった事をしようとすると、すぐに「やだなにこれ」な状態にしてくれるのが困りモノです。

当サイトで利用中のWordPressテーマLuxeritasはかなりガチでAMP対応してくれるすばらなテーマですが、それでもユーザーが追加するコンテンツまではさすがに対応しきれない部分もあるので、何かAMPページでの表示・非表示を巧くコントロールするいい方法はないものかと無い知恵を絞って考えてみました。

AMPページでの表示をコントロール

正直言って自分でも何やそれーと思うところはありますが、他にいい方法が思いつきませんでしたし、結果的にこんなシンプルな方法でも一応ちゃんとコントロール出来るようになるという事でここはよしとして下さい。

HTMLとCSSで簡単に出来ます

クラスセレクタの名前は好きなように変更していただいて構いませんが、とりあえずここではamp-display-noneという名前にしています。

AMPページで非表示にしたい部分をこんな感じで囲みます。

AMPページで非表示にしたい部分を囲む
<div class="amp-display-none">
	@AMPページで非表示にしたい部分@
</div>

もちろんコンテンツの親要素に追加してもOKです。

AMP用のCSSには以下のコードを追加します。

AMPページで非表示

.amp-display-none { display: none; }

以上です!何だか微妙にしょっぱい方法ですいまっせん…

ですが、これでAMPページに表示したくないコンテンツを非表示に出来ます。

あくまでも非表示にするだけなので、出力されているコードの内容によってはAMPエラーになる可能性があります。その点は何卒ご了承を…

Gutenbergを使用している場合

WordPressでGutenbergを使用している場合は、AMPページで非表示にしたい部分を括る代わりにブロックの設定から高度な設定を開いて、追加CSSクラスにamp-display-noneと記述します。

Gutenbergの場合 ブロックの設定 > 高度な設定 > 追加CSSクラスを使用

と言うかむしろGutenbergの方が簡単でいいかも?

AMP用CSSの編集について

WordPressでLuxeritasやCocoonのようなAMP用CSSテンプレートが用意されているテーマを利用している場合は簡単に出来ますが、そうでない場合は

  • AMPページのhead内に書く
  • phpファイルを作成してincludeする
  • functions.phpで追加する(WordPressの場合)

てな感じになるでしょうか、実は私もその辺りの事はイマイチよくわかっていませんのでまたおいおい調べておきたいと思います。

PCでの表示をコントロール

この方法を応用するとスマホではコンテンツを表示してPCでは非表示にするといった事も可能になります。と言ってもCSSでデバイスやユーザーエージェントによる判別は出来ないので、メディアクエリで1200px以上だったらPCと見做すような感じになりますけど。

PCで非表示にしたい部分を以下のコードで囲みます。

PCで非表示にしたい部分を囲む
<div class="pc-display-none">
	@PCで非表示にしたい部分@
</div>

Gutenbergの場合はAMPページと同様にPCで非表示にしたいブロックの追加CSSにpc-display-noneと記述します。

CSSはこんな感じでしょうか。

PCで非表示
@media screen and ( min-width: 1200px ) {
	.pc-display-none { display: none; }
}

メディアクエリの値は適切なブレークポイントなりに変更して自由にお使い下さい。

尚、これと先ほどのAMP用のクラスを巧く使い分ける事で、PCとスマホで表示するコンテンツ内容を変えるといった事も出来るようになります。

AMPページで問題のある部分は非表示に

根本的な解決にはならないかもしれませんが、どうしてもAMPページでうまく表示出来ないコンテンツを何とかしたい場合に「この部分はスマホでは表示されなくてもいいか」という事ならいっそスパっと非表示にしてしまうのも一つの方法かと思います。

決してドヤ顔で語れるようなスマートな方法ではないにしても、私としてはこれで結構楽になった部分もそれなりにありますので、当エントリーで紹介した方法が少しでもどなたかのお役に立てば幸いです。