Amp for WordPressで見出しのデザインを変更する方法【コピペ】

Amp for WordPressで見出しのデザインを変更する方法【コピペ】

どうも、だいち(@spountant)です。

「Amp for WordPress」のデフォルト設定では、見出しには何のcssも適用されていない。

AMP表示でも見出しのデザインを設定することで、より読者にとって見やすいページになるだろう。

このページでは、AMPの見出しデザインを変更する手順を紹介していく。

 

意外と簡単なのでFileZillaでFTPサーバをいじる

まずはFileZillaを使って、ワードプレスのテーマにAMPのphpを実装しよう。

一見むずかしそうに感じるが、やってみると意外と簡単なので、以下の記事を参考にやってみてほしい。

関連記事:FileZillaでWordPressのテーマにAMPのphpを実装する手順【図解】

 

AMPの見出しを変更する

上記の設定が完了したら、「テーマの編集」に「amp」が実装されているはずだ。

そしたら「amp」→「style.php」に以下のコードを追記する。

/* AMP見出しデザイン */
.amp-wp-article-content h2{
    font-size: 18px;
    line-height: 1.6;
    font-weight: bold;
    background-color: #61A0D3;
    color: #fff;
    padding: 18px 10px 18px 14px;
    border-radius:8px;
    border-left-width:0px;
}
.amp-wp-article-content h3{
    font-size: 18px;
    line-height: 1.5;
    background-color: #61A0D3;
    color: #fff;
    padding: 14px 10px 14px 14px;
    border-radius:8px;
    border-left-width:0px;
}

これで見出しデザインが変わっているはず。

あとは適宜、background-color(背景色)やcolor(文字色)を変更すればいい。

ちなみにborder-bottomなどは反映されなかったので注意が必要だ。

 

ほかにもAMPのデザインをいじってみる

見出し以外にも関連記事の表示やSNSシェアボタンの設置などをしてみたい場合は、以下の記事をご覧いただきたい。

関連記事:AMP表示におけるおすすめのデザイン変更・調整まとめ

 

URL :
TRACKBACK URL :

Warning: getimagesize(/home/spountant/wonderland02.com/public_html/wp-content/themes/dp-escena/img/json-ld/nologo.png): failed to open stream: No such file or directory in /home/spountant/wonderland02.com/public_html/wp-content/themes/dp-escena/functions.php on line 932