画像中心表示、文字の色を変える方法【Simplicity 2 AMP対応ハマったこと】

もち(@dailymochiblog)です！

この記事では、

　AMP適応したけど、あれ？文字の色変えられない…画像、文字が中央揃えできない…助けて

そんなあなたに向けた記事です。

もう、文字の色・配置くらい簡単に調整させてよ…

できるようになったから共有するね！

(このブログはAMPに適応させてないけどね…スマホから見てもらうことが多いからやっぱり適応させた方がいいのは分かってるけど。大変だからやりたくない…)

記載するところの確認

しっかりバックアップを取ってから作業してください。

ここでは、紹介する方法で記載する箇所を紹介します。

って、書いてあるところは『テキスト』と書いてある方に記載してください。

毎回書くのは大変なので、
プラグインAddQuicktagを使うと一覧から選択できるのでおすすめです。

って、書いてあるところは下記の部分を選択して記載します。

ダッシュボード→外観→テーマの編集→編集するテーマを選択→Simplicity2 child(子テーマを選択）→amp.cssを選択

[speech_bubble type=”std” subtype=”L1″ icon=”mochidori.jpg” name=”もち”]このamp.cssの部分に追記するよ！[/speech_bubble]

HTMLに追加

<p class=”img_center”>ここに画像リンクor文字 </p>

[speech_bubble type=”std” subtype=”L1″ icon=”mochidori.jpg” name=”もち”]文字でも画像でもどっちでも中央表示させられるよ[/speech_bubble]

amp.cssに追加

/*中心表示*/
p.img_center{
text-align: center;
}

HTMLに追加

amp.cssに追加

/*青の指定*/
.blue {color : #0A24FB ;

}

[speech_bubble type=”std” subtype=”L1″ icon=”mochidori.jpg” name=”もち”]好きな色をこれで指定できるので試してね！[/speech_bubble]

ヘッダースタイル等もamp.cssにstyle.cssに書いたものをコピーして貼り付ければ同じように反映されました。

この記事では、

　AMP適応したけど、あれ？文字の色変えられない…画像文字が中央表示されない…助けて

この質問に答えることでした。

これに対して

amp.cssとHTMLに記載するコードを紹介しました。

そんじゃ、AMPでも通常サイトに近づけてみてね！