こんにちは。
本日は、AFFINGER5のAMP対応について悪口と悪い面をリカバリする方法を記事にします。
AFFINGER5自他は、アフェリエイトに強いやAMP対応しているところを売りにしていますが、AFIFNGER5のＡＭＰ対応は正直今一つです。
でも、頑張れば個人の力でリカバリー可能です。
なお、THE THORというAFFINGER5の比較も過去しているので興味あったらこちらをご覧ください。
またAFFINGER5の概要はこちらをご覧ください。
AFFINGER5のAMP対応のここがイマイチ
最初に不満を記載します。AFFINGER5自体は、投稿画面にあるチェックを一つすればその投稿自体がAMP対応されると記載しています。
しかし、微妙なところがあります。それはデザインです。
AMP対応したAFFINGER5で作った投稿画面のh2やh3ラベルは、グレーというかAFFINGER5のデフォルトカラーになってしまうのです。デザインで通常のサイトの画面は、緑でもAMPだとグレーです。囲み枠などもグレーになってしまいます。
なお、AMPページとして画面が簡素になるのは仕方ありません。簡素だから読み込みが早いのです。
ですが、正直、本当にこれでAMP対応といってよいか悩みます・・・。ハードコードの手動調整かよ・・・。
AMP画面が出力するだけじゃないか・・・。
今回の記載したかったから悪口はこんなところです。
AMP画面のh2やh3のカラーを変更
文句はいいましたが、AMP画面のカラー変更したいです。じゃあ、どうするか？
そうＣＳＳを変更するんです。
えっ？ＣＳＳを自分で変更したくないから有料テーマかった？買ったテーマがAFFINGER５の仕様だからあきらめてください。
さて修正方法です。まず修正は、外観 ⇒ テーマエディタ を選択します。その後に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
}結構なコード数があり探すのも手間です。
ですが、ＣＳＳを頑張って修正すればまぁ使えるＡＭＰ画面になります。
修正ミスが怖いのでFTPでローカルにファイルを押したり、ローカルにWordPress環境を作るのを推奨します。
なお、ブログカードを含み多くのプラグインやアフェリエイトはAMP対応していないものも注意してくだささい。記事ごとに必ずＡＭＰ対応すべきか判断すべきです。
AMP記事単位にAMP画面の確認して納得がゆくものにするのです。またはAMP対応時に問題となる埋め込みをしないことも必要です。