Amp for WordPressのヘッダーの背景色、ブログタイトルの文字色を変更する方法【コピペ】

Amp for WordPressのヘッダーの背景色、ブログタイトルの文字色を変更する方法【コピペ】

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

Amp for WordPress」プラグインでは、デフォルトでヘッダーの背景色が青色になっている。

これでは元のブログにそぐわないので、このページではヘッダーの背景色を変更する方法と、ヘッダーのブログタイトルの文字色を変更する方法を紹介していく。

 

FileZillaでAMPのデザインを変更する下準備をする

まずは以下の記事を見て、ワードプレスのテーマ自体に新しいphpを実装しよう。

自分もここで挫けそうになったが、手を付けてみると意外と簡単だったので、ぜひ諦めずにやってみてほしい。

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

 

AMP表示におけるヘッダーの背景色をデフォルトの青色から変更する

上記のFileZillaでの設定が終わったら、「テーマの編集」でヘッダーの背景色を変更する。

「amp」→「style.php」の120行目に/* Header */があるので、その直下のコードを編集しよう。

.amp-wp-header {
	background-color: #ffffff;
}

上記の#ffffffの部分を好きな色に変更すればよい。

 

AMP表示におけるブログタイトルの文字色を変更する

背景色と合わせて、ブログタイトルの文字色を変更したい場合は、「style.php」の136行目「.amp-wp-header a」内を変更しよう。

.amp-wp-header a {
	color: #333333;
	text-decoration: none;
}

color部分を変更すれば、ブログタイトルの文字色を変更することができる。

 

ほかにもAMPのデザインを調整したい場合

ほかにも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