wordpress・SEO

AFFINGER5のAMP対応への悪口とカラー変更について

こんにちは。
本日は、AFFINGER5のAMP対応について悪口と悪い面をリカバリする方法を記事にします。
AFFINGER5自他は、アフェリエイトに強いやAMP対応しているところを売りにしていますが、AFIFNGER5のAMP対応は正直今一つです。
でも、頑張れば個人の力でリカバリー可能です。

なお、THE THORというAFFINGER5の比較も過去しているので興味あったらこちらをご覧ください。

またAFFINGER5の概要はこちらをご覧ください。


AFFINGER5のAMP対応のここがイマイチ

最初に不満を記載します。AFFINGER5自体は、投稿画面にあるチェックを一つすればその投稿自体がAMP対応されると記載しています。

しかし、微妙なところがあります。それはデザインです。

AMP対応したAFFINGER5で作った投稿画面のh2やh3ラベルは、グレーというかAFFINGER5のデフォルトカラーになってしまうのです。デザインで通常のサイトの画面は、緑でもAMPだとグレーです。囲み枠などもグレーになってしまいます。

なお、AMPページとして画面が簡素になるのは仕方ありません。簡素だから読み込みが早いのです。

ですが、正直、本当にこれでAMP対応といってよいか悩みます・・・。ハードコードの手動調整かよ・・・。

AMP画面が出力するだけじゃないか・・・。

今回の記載したかったから悪口はこんなところです。


スポンサーリンク

AMP画面のh2やh3のカラーを変更

文句はいいましたが、AMP画面のカラー変更したいです。じゃあ、どうするか?
そうCSSを変更するんです。

えっ?CSSを自分で変更したくないから有料テーマかった?買ったテーマがAFFINGER5の仕様だからあきらめてください。

さて修正方法です。まず修正は、外観 ⇒ テーマエディタ を選択します。その後にAFFINGER5を編集するテーマから選択します。(childではないです)

それを選択してst-amp-css.phpを選択します。ここにamp画面のcssが格納されています。

この中から自分の修正したh2やh3の定義を探すのです。

例えばh2ならこちらです。このbackgroundなどを修正します。

h2{
  margin:20px 0;
  padding-top:10px;
  padding-right:20px;
  padding-bottom:10px;
  padding-left:20px;
  border-top:2px solid #ccc;
  border-bottom:1px solid #ccc;
  background:#f0f7e9;
  color:#7CB342;
  font-size:19px;
  line-height:27px
                         }

結構なコード数があり探すのも手間です。
ですが、CSSを頑張って修正すればまぁ使えるAMP画面になります。

修正ミスが怖いのでFTPでローカルにファイルを押したり、ローカルにWordPress環境を作るのを推奨します。

なお、ブログカードを含み多くのプラグインやアフェリエイトはAMP対応していないものも注意してくだささい。記事ごとに必ずAMP対応すべきか判断すべきです。

AMP記事単位にAMP画面の確認して納得がゆくものにするのです。またはAMP対応時に問題となる埋め込みをしないことも必要です。

スポンサーリンク
  • この記事を書いた人

marusuke1216

30代のシステムエンジニア。 インフラ関連の案件中に従事している。 資格は、ネットワークスペシャリスト、PMO等を保有。

-wordpress・SEO

Copyright© SEのアソビ , 2020 All Rights Reserved Powered by AFFINGER5.