伝えたい想いを自分らしく・・・

Kanamii

スポンサーリンク

STINGER・AFFINGERカスタマイズ

テーマをAFFINGER4に変えました~決め手はAMP対応~

投稿日:2017年2月16日 更新日:

WordPressテーマをSTINGER PLUSからAFFINGER4に変更しました。
ほぼ、見た目変わらずですので間違い探し状態ですね。

AFFINGER4は、リリース当初から別サイトで利用する予定で手元にありましたが、カスタマイズ記事だけを加筆修正しつつ、当ブログではSTINGER PLUSをこれからもずっと使い続けるつもりでいました。

デザインに関しては今までにない位お気に入りのテーマですから。

記事内やTwitterでも断言していましたしね。

一目惚れして今まで一緒に歩んできたんだから。大切に使い続けるって決めてるし。そうそう心変わりはしないもん!!

な~んて。

自分自身を信じてみるものの、そんなSTINGER PLUSへの「愛」もAFFINGER4を知れば知るほど、だんだんと「意地を張ってるだけ」みたいに思えるように...

まだまだ、言い訳お伝えしたい気持ちは沢山ありますが、エンドレストークになりそうですので一旦区切りたいと思います。(笑)

なかなか踏ん切りがつかずにいた私の背中を押してくださったのは、「AFFINGER4のAMP対応がすごいっ」という周囲の方の声。

そして、実際にAFFINGER4で作成したAMPページを拝見してその素晴らしさに共感。
素直に感じたことが「よいものはどんどん取り入れて発信していこう」という気持ちの方向転換でした。

スポンサーリンク

そもそもAMP対応ってなに?

ものすごく簡単に表現すると、Googleモバイル検索からアクセスしたAMP対応のページは、

ものすごく表示速度が速い。

この一言です。

そして、ページ内容がシンプル。という点も大きな特徴です。

スマホでWeb検索をされる方は、最近目にすることが増えてきたと思いますが、AMP対応のページには⚡マークの「AMPラベル」がつきます。

AMP対応について、もう少し詳しく知りたい方は下記参考サイトをご一読ください。

実際に体験すればわかるように、AMPページの表示は本当に高速です。
読み込みを待つ必要がほとんどありません。
一瞬でコンテンツが表示されます。

AMP表示に慣れてしまうと、たいていの普通のモバイル向けページは遅く感じられてしまうのではないでしょうか。
ユーザー体験を高めたいなら、AMPはとてもいい手段です。

導入に際して大きな障害がないのであれば、積極的にAMP対応に取り組んでみるといいのではないかと僕は考えます。

参考:▶日本のGoogleのモバイル検索もついにAMP化、通常の検索結果に⚡ラベルとともにAMP対応ページを表示/海外SEO情報ブログ

実際にAFFINGER4でAMP化したページの表示速度を体感して、検索からなんらかのキーワードを打ち込んでご来訪くださったモバイルユーザーさんが一番に求めているものはなんだろう?と改めて考えたとき、それは「探している答え」であると。自分なりに強く感じたことが、今回のテーマ変更の決め手となりました。

AFFINGER4のAMP対応のここがスゴイ

AMP化したページは、本当にシンプルで表示できる項目にもルールがあります。
例えばですね。
プラグインを使って表示しているもの(目次やリンクカード、人気記事ランキング、ハイライト表示のソースコード他)や、アフィリエイトリンク(AMP対応済みのコードやカスタマイズ可能なものを除く)、サイドバーなども表示することができません。
便利な機能だからといって、全てのページに適したものではないのですね。

さらに、ユーザーさんの利便性が上がるメリットの半面、「直帰率が上がってしまうのでは?・・」という不安も。

だけど、AFFINGER4にはそんな不安をスッキリと打ち消してくれる機能がありました。

ページ単位でのAMP対応が可能

現在の当ブログの投稿記事のほとんどがパソコンユーザーさん向け。しかも、カスタマイズ用のソースコードをハイライト表示している部分はAMPページで表示することができないので、一部のページのみ対応しています。

例としてAMP化した記事のURLを貼っておきますね。
パソコンでもアクセスできますが、その場合はGoogle Chromeのデベロッパーツールを使ってスマホサイズで見ていただいた方がわかりやすいかもしれません。

https://kanamii.jp/1514/amp/

・・・そうなんですっ!(タイミングがおかしいですね)

AFFINGER4では、管理画面からの過去記事を含む全ページ一括のAMP化の他に、例えばプラグインや標準機能の装飾を重要視したいページや紹介リンクを貼りたいページはそのまま。「読み物」として情報を発信しているページはAMP化する。といったページ単位でのAMP化が簡単にできるようになっています。

その方法は、AMP化したいページの投稿画面の項目にチェックを入れて更新するだけの手軽さです。(管理画面での必須項目の事前設定は必要)

ページ単位のAMP化は、例えば、多くの過去記事の修正は大変。だけど新規記事からAMP対応してみようかな。といった選択肢や、時間のあるときに数ページずつ表示確認をしながら過去記事もAMPページに変更していく。といった使い方もできます。
さらに、今後の記事の書き方や内容を変更したい場合にも柔軟に対応できるのでおすすめです。

アドセンス広告・SNSシェアボタン・関連記事表示が標準仕様

AMPページに設置するアドセンス広告やSNSシェアボタン、Googleアナリティクスの解析用のコードなど、通常ページとは別の専用コードを使用するというルールがあったり、先に説明したようにプラグインでの関連記事表示ができなかったりと、WordPressのAMP化プラグインや自力での対応は難しいと感じていた部分も、AFFINGER4は標準仕様で全てカバーしてくれます。

アドセンス広告は、管理画面にコード内の数字を入力するだけで、記事下とショートコードを使用している広告が自動表示、関連記事に関しては、表示されるリンクにAMP化したページが含まれている場合、自動的にAMPページへアクセスされるようになっています。

内部リンクのリンクカードもオリジナル対応

WordPress標準の埋め込みカード(Embedカード)はAMPページでは表示できません。(2017年2月現在)

これですね。

今までの STINGER PLUS+ カスタマイズまとめ

AFFINGER4では、このような通常ページ・AMPページ共通の内部リンクカードでの表示が可能となっています。
ちなみにこちらの記事は、今までのカスタマイズ記録です。
すべてAFFINGER4でも応用できますのでぜひ♪(笑)

今までの STINGER PLUS+ カスタマイズまとめ

無料WordPressテーマ『STINGER PLUS+』との出会いは、私にとって衝撃的な出来事でした。 一目惚れとはこのことだ・・と悟った瞬間。(笑) 「このテーマは、WordPress初心者さんで ...

続きを見る

表示方法は、入力した記事IDを選択後「ブログカード風」をクリックするだけ。自動的にショートコードが記事内に挿入されます。
こちらも関連記事同様、リンク先がAMP対応ページの場合はそちらにアクセスされます。

上記は、テキストエディタ上部のキャプチャですが、最後の「crayon」以外はAFFINGER4標準、リンクカードの他にも沢山の機能が準備されています。
これでもかぁ~っ!という位の親切さに感動。

表示項目が追加できるAMP用ウィジェット

WordPressダッシュボード→外観→ウィジェットで設定することができる「AMPサイドバーウィジェット」では、サイド用メニュー(通常ページ共通)をAMPページに追加することが可能です。

当ブログでは、通常ページには利用していませんので、AMPページ用にSNSのフォローリンクを入れています。

フォローしてくださる方が増えるといいなぁ...(笑)

デザインのカスタマイズも柔軟にできる

AFFINGER4だけでなく、STINGERシリーズ全般に言えることですが、カスタマイズのしやすさも大きなメリットだと思います。
当ブログでのAMPページでは、以下のカスタマイズを行っています。

  • 背景の変更(画像使用)
  • ヘッダーのキャプション(サイト説明文)の文字色変更
  • 記事タイトル下に画像追加
  • 記事下のアドセンスの中央寄せとラベル表記追加
  • 記事タイトル上と最初の見出し(h2)の上にアドセンス追加
  • 見出し(h2~h4)のカスタマイズ
  • 関連記事の見出しの背景色変更
  • 関連記事のカテゴリ表示の背景の変更(画像使用)
  • ウィジェットの見出し追加と表示位置の変更
  • フッターのキャプションを非表示
  • フッターのコピーライトの文字色変更

AFFINGER4の利用をご検討中の方へ

当ブログで利用しているWordPressテーマ「AFFINGER4」は、優待ページ(infotop経由)を利用すると標準価格より500円オフで購入することができます。
ページ内でご紹介したAMP対応機能は現在はβ版となっていますが、デザイン・機能共に自信を持っておすすめできるテーマです。
利用をご検討されている方はぜひチェックしてみてください。

Kanami
複数サイトでの利用可能。↑このようなリンクボタンや吹き出し会話機能もAFFINGER標準で使えます♪

今後は、テーマ変更の際に私が利用したローカル環境での子テーマ作成とアップロード方法、AFFINGER4でのAMP対応の手順や注意事項、そして今までのSTINGER PLUSと同じように、当ブログで行った全てのカスタマイズ方法を公開していきます。

不定期更新でお待たせしてしまうこともあるかと思いますが、お時間のあるときにでもお立ち寄りいただけると大変嬉しく思います。

大変長文になりました。
最後までお付き合いくださりありがとうございます。

この記事が気に入ったら
いいね!しよう

Twitter で

Facebook・Twitterへ最新記事をお届けします

-STINGER・AFFINGERカスタマイズ

スポンサーリンク

Copyright© Kanamii , 2017 AllRights Reserved Powered by AFFINGER4.