スポンサーリンク

STINGER・AFFINGERカスタマイズ

【AFFINGER4】AMPページも自分色♪カスタマイズまとめ

投稿日:2017年5月20日 更新日:



当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。

当ブログの開設当初に利用していたWordPressテーマは「STINGER PLUS」。
まだ1年の月日も経っていないのに、なんだか、響きまで懐かしい感じがします。

可愛らしさと高機能に衝撃を受け、運命すら感じるというね。(笑)
私にとって史上最高にお気に入りのテーマとなりました。

その後、新たにリリースされた「AFFINGER4」にデザインそのままテーマ変更をしました。
きっかけとなったのは、テーマデフォルトのAMP対応です。

デフォルトのAMPページは本当にシンプルですが、簡単なカスタマイズで通常ページの雰囲気と同じように見た目を変えることができます。

  • AMPページから通常ページへの移動がスムーズにできる(現在はデフォルト仕様になりました)
  • AMPページから通常ページへ移動の際にデザインに違和感を感じないようする
  • Googleアドセンス広告を任意の場所に追加

上記の3点に重点をおいて、カスタマイズ方法をお伝えしてきました。
ここでは、今までご紹介してきたAMPページカスタマイズの全てのページを見渡しやすいようにまとめてみたいと思います。

AMPページもお気に入りの自分色に。。♪

スポンサーリンク

はじめに

  • AMPページ用のGoogleアナリティクスのトラッキングコードについて
  • AMPページ用のFacebookのシェアボタンがエラーになる場合の対処法
  • AMPラベルがGoogleの検索結果に表示されないときのチェックポイント

上記を含む、AFFINGER4のAMP化方法の全手順をまとめています。
チェックツールでエラーが出ていない場合でも、実際の表示を目視することが重要。
長文となりますが、初めてAMP化に挑戦される方にはご一読いただきたいページです。

アドセンス広告の追加とカスタマイズ

デフォルトでAMPページの記事下に表示されるアドセンス広告を中央寄せにする方法と「スポンサーリンク」のラベル表記を追加する方法です。


AMPページの最初の見出し(h2)の前にアドセンス広告を追加する方法です。
PHPの知識が乏しいため、かなり苦戦したカスタマイズです(笑)


AMPページの記事タイトル上(アイキャッチ画像の下)のファーストビューの位置に、高さを100pxに固定したレスポンシブサイズのアドセンス広告を追加する方法です。


AMPページの記事下(関連記事の上)に、アドセンスの関連コンテンツユニットを設置する方法です。

ヘッダーとフッターのカスタマイズ

AMPページのヘッダーとフッター部分の背景色の変更方法と背景画像を設定する方法です。


AMPページのヘッダーのサイトタイトルとキャプション(キャッチフレーズ)の文字色変更方法です。


AMPページのフッター(サイトタイトル・キャプション・コピーライト)の文字色変更とキャプション(キャッチフレーズ)を非表示にする方法です。

見出しのカスタマイズ

AMPページの見出し(h2~h4)のカスタマイズ方法です。
カラー変更方法・画像を使用する方法・当ブログでのカスタマイズ方法をご紹介しています。


AMPページの記事下に表示される関連記事の見出しとカテゴリ表示の背景色と文字色の変更方法です。

その他の細かいカスタマイズ

AMPページに通常ページへの移動リンクを追加する方法です。
現在はデフォルトでリンクボタンの表示ができるようになりましたが、メッセージを追加したい場合などに参考にしていただければ幸いです。


AMPページ用ウィジェットに見出しを追加、表示位置を関連記事の下に移動する方法です。


AMPページと通常ページの記事タイトル下にアクセント画像を追加する方法です。

さいごに

以上、AFFINGER4のAMPページカスタマイズまとめとして12記事をご紹介しました。

一つひとつのカスタマイズは簡単なコピペだけで挑戦できるものですので、気に入ったカスタマイズが見つかりましたら参考にしていただけると大変嬉しく思います。

また、現時点までに公開しているAFFINGER4のその他のカスタマイズは、下記ページにまとめています。

人気記事
今までの STINGER PLUS+ カスタマイズまとめ

当ページでご紹介しているカスタマイズは、AFFINGER4・STINGER8でも応用できます。(STINGER8は一部の記事) 無料WordPressテーマ『STINGER PLUS+』との出会いは、 ...

・・実は最近になってですね。
カスタマイザーで設定できる項目やデフォルト機能が豊富なAFFINGER4って。

こんなにカスタマイズする必要ないんじゃない?

そんな風に気づき始めているのですが。
↑遅?

当ブログで行ったカスタマイズ方法は全て公開していくというポリシーがありますので(笑)、自身の備忘録の意味も含めつつ、まずは、お問い合わせを多くいただくカスタマイズ方法を優先的に。
その後は「細かっ!」と、ツッコミが入りそうな部分もですね。
少しずつお伝えしていけたらと思っています。

そしてブログのSSL化にも着手しなくては....
あ。すみません。ひとり言です。(笑)

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

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

Twitter で

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

スポンサーリンク

-STINGER・AFFINGERカスタマイズ

Copyright© Kanamii , 2024 All Rights Reserved Powered by AFFINGER5.