導入から半年、AMPページの見た目をようやく改善!【プラグイン「AMP」カスタマイズ】

AUTHORこのブログを書いている人

京都市左京区で開業している税理士です。 元税理士試験受験校「相続税法」講師。 相続税や所得税、贈与税など「個人の方にかかる税金」に特化した税理士として活動中。 好きなコトは写真を撮る(主に馬や京都の風景)、DEEN、イチロー、Ingressなど。 詳しいプロフィールはこちら!

以前からいじりたくて仕方がなかったAMPページの見た目。
昨日までの連休中に手を入れまして、ようやくマトモな見た目になりました!

【2017.12.21追記】
現在はAMPページの表示は停止しています。
以下の記事は全てAMPページの運用中に書いたものです。
スポンサーリンク

AMP=急速に普及してきているウェブページの高速表示方法

モバイル端末でウェブページを高速表示させる方法として急速に広まりつつあるAMP

このブログのテーマ「ストーク」自体はAMP表示に対応していませんが、それでも、「AMP」というプラグインを有効化するだけでAMP表示が可能になるので、当ブログでも今年の年明けから本格導入しています。

AMP表示がGoogleにキャッシュされると、検索結果でもリンク先がAMP表示であることを示す印が入ります。

検索の表示順位にもいい影響があるとかないとか??
導入半年で、今や私のブログでも15%ほどがAMPページへのアクセスです。

アクセスアップに効果があるかは今のところは正直微妙ですが、なんせGoogleが推している機能。
先々のことを考えると、ブログ運営者としては今のうちから是非とも導入しておきたいところです。
(そう思って私も今年から入れています。)

ただ入れただけでは見た目が…をようやく改善!

ただ、この「AMP」プラグインを利用したAMP表示。
高速表示することが最優先の造りなので、初期設定のままだと見た目が冴えないのが難点でした。

なんせ、

・フォントは全部無機質な明朝体だし…。
・見出しは太字になっているだけだし…。
・色付きの枠(この囲ってるやつです)は表示されないし…。
・リンクカードもちゃんと表示されないし…。
・画像の横に文字が勝手に回り込むし…。
・アドセンスは表示されないし…。(入れてるページ自体少ないけど)
・記事下のカテゴリー別の最新記事なんてフォントサイズがデカすぎるし…。

などなど、ひどいもんでした。
(その時のスクリーンショットは撮ってないのでお見せできないのが残念ですが(^^;)

AMPページへのアクセスが増えるにつれて、
「見にくい(醜い)ページですいません…。」
という申し訳ない気持ちも大きくなってきていました。

それらの一切合切をキレイにしましたよ〜!
実物は以下のページをどうぞ。
→現在AMPページの表示は停止しています。

OPENCAGE社さんのページを参考にfunctions.phpにコードを記述!

とはいえ、これは全部自分でやったわけではもちろんなく、参考にさせていただいたページもあります。
このブログのテーマ・ストークをリリースしているOPENCAGE社さんの以下の記事です。

上の2つの記事にあるとおり、functions.phpにAMP用のCSSを記述することによって、AMPページを通常のページとほぼ同じ見た目にすることに成功しました。

実際にfunctions.phpに書き足したコードを以下に公開してみますと…。
(メチャクチャ長いです。興味ない方はザッと流してくださいm(_ _)m)

13行目のコンテンツ&クレジット表示は各自の環境に応じて書き換えてください。

いろいろ足していったらこんなに長くなってしまいました(^^;

上のコードを書くことによって、

・通常のページとほぼ同じ見た目になるようにした。(27行目以降・CSSの追加)
・SNSシェアボタンの下にフッター表示(ブログトップやプロフィールなどへのリンク、著作権情報など)を入れた。(13行目・コードの追加)

といった変化を加えています。

「これはこのためのコードです」みたいな解説の文字も一切入れてないですし(入れてたらAMP表示のエラーが出たので消しました(^^;)、見せられるようなキレイなコードの書き方でもないですが、AMP表示を導入している方(特にストーク使いの方)の参考に少しでもなればと思い、貼っておきます。

functions.phpはコードの書き方を1つでも間違えると一瞬でブログが真っ白になってしまうので、手を加える際は必ず事前にバックアップを取ってすぐに元に戻せるようにしてからいじって下さいね!
(私も上のコードを書いていた時に、13行目の「’」を「”」にしただけで真っ白になって冷や汗をかきました(汗))

AMP表示が有効かは「AMPテスト」ページでチェックを

ちなみに、自分でいじったAMPページがちゃんとGoogleが好む形に整っているかは以下のページで確認できます。
AMP テスト – Google Search Console

このページで「有効なAMPページです」と表示されたらGoogleにAMPページがインデックスされます。
逆に、エラーが出ている状態ではいつまで経ってもGoogleにインデックスされません。
そこに書いてある原因を潰して「有効なAMPページです」が出るまで持っていきましょう。

スポンサーリンク

あとがき

実は、アドセンスをAMPページに表示させるのにもちょっとした工夫が必要だったんですが、これについては長くなるので別記事にします(^^;
(ただ、書く気が起きるかが問題ですが…。)

連休中には他にトップページもいじって、カテゴリー別の人気記事を表示させるようにもしています。

これらの作業だけで疲れてしまって、これ以外は恐ろしいぐらいに何もせずに過ごしました…。
ま、今日からまた頑張りますか。

京都下鴨の「尾藤武英税理士事務所」

相続税や所得税、贈与税など「個人の方にかかる税金」を専門とする税理士事務所です。
相続税に関してお困りの方や、個人事業主をはじめとするフリーランスの皆様のサポートに力を入れています。
税理士プロフィール
事務所ホームページ
当事務所の特長

仕事のご依頼・お問い合わせはこちら