【AFFINGER4】AMPページの見出し（h2～h4）のカスタマイズ

投稿日：2017年3月29日更新日：2018年5月7日

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。

WordPressテーマ「AFFINGER4」のAMPページの見出し（h2～h4）のカスタマイズ方法をご紹介します。

通常ページではカスタマイザーで設定することができる見出しのカスタマイズですが、AMPページでもファイル編集によって、通常ページと同じように表示することが可能です。
表示を揃えることで、AMPページから通常ページに移動した際に自然な印象になりますね。

下記のような当ブログでの表示例も含めて、順に説明していきたいと思います。

h2・h3見本ページhttps://kanamii.jp/2599/amp/

Contents

1 事前準備
2 子テーマの作成
3 文字色・背景色・ボーダー色を変更する方法
4 見出し（h2）に背景画像を設定する方法
- 4.1 パターン背景画像を指定する場合
- 4.2 ワンポイント画像or1枚の画像を指定する場合
5 見出し（h3）に背景画像を設定する方法
6 当ブログでの見出しのカスタマイズ
- 6.1 見出し（h2）のカスタマイズコード
- 6.2 見出し（h3）のカスタマイズコード
7 関連記事

事前準備

WordPressダッシュボード→外観→カスタマイズ→「各テキストとhタグ（見出し）」で通常ページの見出しのカスタマイズを行っている場合は、文字色・背景色・ボーダー色の各カラーコードをメモ帳にコピーしておいてください。

カスタマイザーで背景画像を設定されている場合は、WordPressダッシュボード→メディア→「ライブラリ」を開き、アップロード済みの画像URLを同じくメモ帳にコピーしておいてくださいね。

子テーマの作成

今回のカスタマイズは「st-amp-css.php」を編集します。

AFFINGER4のアップデート時にカスタマイズ内容が消えてしまわないように、ご自身のパソコンにある親テーマ内の該当ファイルをFTPでお使いの子テーマ内にアップロードして子テーマを作成してください。
他のカスタマイズで既に作成済みの場合は、新たに作成する必要はありません。

5,172view

: WordPressのカスタマイズ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】

前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。ご自身 ...

今後のアップデートでAMPに関わる部分の変更（親テーマのコードの変更）があった場合は、再度子テーマの作成とカスタマイズが必要になります。

文字色・背景色・ボーダー色を変更する方法

WordPressダッシュボード→外観→テーマ→テーマの編集→「st-amp-css.php」（子テーマ）を開きます。

パソコンの「Ctrlキー」+「F」で表示される検索欄に「.post h3」と入力してマークされるあたりの下記コードを探してくださいね。
この部分が、h2とh3のスタイルを指定している部分です。

/* 中見出し */
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: #f3f3f3; /*背景色*/
	color: #1a1a1a; /*文字色*/
	font-size: 19px;
	line-height: 27px;
}

/*小見出し*/
.post h3 {
	margin: 20px 0;
	padding: 10px 15px;
	border-bottom: 1px #999 dotted; /*下のボーダー色*/
	background-position: left center;
	background-repeat: no-repeat;
	color: #1a1a1a; /*文字色*/
	font-size: 18px;
	line-height: 27px;
	line-height: 27px;
}

/* 中見出し */

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: #f3f3f3; /*背景色*/

color: #1a1a1a; /*文字色*/

font-size: 19px;

line-height: 27px;

}

/*小見出し*/

.post h3 {

margin: 20px 0;

padding: 10px 15px;

border-bottom: 1px #999 dotted; /*下のボーダー色*/

background-position: left center;

background-repeat: no-repeat;

color: #1a1a1a; /*文字色*/

font-size: 18px;

line-height: 27px;

}

その少し下にあるのが、h4を指定している部分です。

.post h4 {
	margin: 20px 0;
	padding: 10px 15px;
	background-color: #f3f3f3; /*背景色*/
	font-size: 17px;
	line-height: 26px;
}

.post h4 {

margin: 20px 0;

padding: 10px 15px;

background-color: #f3f3f3; /*背景色*/

font-size: 17px;

line-height: 26px;

}

「上のボーダー色」「下のボーダー色」「背景色」「文字色」とコメントを入れておきました。
その部分の「#」で始まるカラーコードをあらかじめメモ帳にコピーしておいたコードに書き換えてカラー変更は完了です。

見出し（h2）に背景画像を設定する方法

パターン背景画像を指定する場合

見出し（h2）に繰り返しのパターン背景画像を指定する場合は、上記コード内のbackground: #f3f3f3; /*背景色*/の部分を削除。
削除したスペースに下記コードを追加します。
【画像URL】の部分はあらかじめメモ帳にコピーしておいた画像URLに書き換えてくださいね。

background-image:url("【画像URL】");
background-repeat:repeat;

1 2	background-image:url("【画像URL】"); background-repeat:repeat;

ワンポイント画像or1枚の画像を指定する場合

見出し（h2）に繰り返し無しのワンポイント画像や1枚の画像を指定する場合の追加コードです。

background-image:url("【画像URL】");
background-repeat:no-repeat;
background-position: left center;

background-image:url("【画像URL】");

background-repeat:no-repeat;

background-position: left center;

文字の位置を調整したい場合は、コード内の

padding-top→上の余白
padding-right→右の余白
padding-bottom→下の余白
padding-left→左の余白

↑この部分の数値を変更することで調整可能です。

見出し（h3）に背景画像を設定する方法

見出し（h3）の左端にワンポイント画像を追加する方法です。
コード内のbackground-position: left center;のすぐ上に下記コードを追加します。

background-image:url("【画像URL】");

1	background-image:url("【画像URL】");

文字の位置を調整したい場合は、コード内の下記部分で変更できます。

padding: 10px 15px;

10px→上下の余白
15px→左右の余白

より詳細な指定をしたい場合は、上記コードを削除して、見出し（h2）のpaddingの指定方法をコピーペーストしてもOKです。

当ブログでの見出しのカスタマイズ

以前に通常ページの見出しのカスタマイズを記事にしていますが、AMPページでも同じ表示になるようにファイル編集を行っています。

8,937view

: 【STINGER PLUS】見出し（h2、h3）のCSSカスタマイズ～背景色指定・背景画像使用・ステッチ風～

こちらのカスタマイズは、STINGER8・AFFINGER4でも応用できます。 AFFINGER4での見出し（h3）のカスタマイズコードの指定先の変更を行いました。 7月に1度区切りをつけた、カテゴリ ...

見出し（h2）のカスタマイズコード

当ブログでのカスタマイズコードをそのまま掲載します。

以下のカスタマイズを行う場合は、元のコードを「/**/」で囲んでコメントアウトするか、削除してからコードを追加してくださいね。

/*見出し（h2）ここから*/
h2 {
  background-image:url("【画像のパスまたはURL】");
  background-repeat:repeat;
  font-size:20px;
  line-height:27px;
  margin:40px 0 40px 0;
  padding:10px 20px 10px 20px;
  border:2px dashed #ff6893;
  border-radius:5px;
  box-shadow: 0 0 0 4px #dfe0e1, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);
}

/*見出し（h2）ここから*/

h2 {

background-image:url("【画像のパスまたはURL】");

background-repeat:repeat;

font-size:20px;

line-height:27px;

margin:40px 0 40px 0;

padding:10px 20px 10px 20px;

border:2px dashed #ff6893;

border-radius:5px;

box-shadow: 0 0 0 4px #dfe0e1, 2px 1px 6px 4px rgba(10, 10, 0, 0.5);

}

【画像のパスまたはURL】の部分は、ご自身でアップロード済みの画像のパスまたはURLに書き換えてください。
border:2px dashed #ff6893→ステッチ部分のカラーコードです。お好きなカラーコードに変更可能です。
box-shadow: 0 0 0 4px #dfe0e1→カラーピッカーで取得したカラーコードです。記事をご参照の上変更してください。
margin・paddingの数値はお好みで変更可能です。

見出し（h3）のカスタマイズコード

/*見出し（h3）ここから*/
.post h3 {
  background-image:url("【画像のパスまたはURL】");
  background-repeat:no-repeat;
  background-position:0 10px;
  margin:10px 0 25px 0;
  padding:10px 10px 10px 30px;  
  border-bottom:2px #ff6893 dashed;
}

/*見出し（h3）ここから*/

.post h3 {

background-image:url("【画像のパスまたはURL】");

background-repeat:no-repeat;

background-position:0 10px;

margin:10px 0 25px 0;

padding:10px 10px 10px 30px;

border-bottom:2px #ff6893 dashed;

}

【画像のパスまたはURL】の部分は、ご自身でアップロード済みの画像のパスまたはURLに書き換えてください。
border-bottom:2px #ff6893→下線の太さとカラーコードはお好みで変更可能です。
background-position・margin・paddingの数値はお好みで変更可能です。

追加したコードが反映されない場合は、キャッシュをクリアして再度ご確認ください。

パソコンでのAMPページの表示確認方法を含めた、AFFINGER4のAMP化方法の全手順は下記ページで説明しています。

6,377view

: 【AFFINGER4】AMP化方法の全手順をまとめました

WordPressテーマ「AFFINGER4」は、テーマ標準でAMP対応機能が準備されています。これまで、いくつかの注意点や躓いたポイントなどを記事にしてきましたが、今回はAFFINGER4でのAM ...

以上、AFFINGER4のAMPページの見出し（h2～h4）のカスタマイズ方法をご紹介しました。

最後までお付き合いくださりありがとうございます。

2,086view

: 【AFFINGER4】AMPページも自分色♪カスタマイズまとめ

当ページでご紹介しているカスタマイズは、AFFINGER5「WING」でも応用できます。当ブログの開設当初に利用していたWordPressテーマは「STINGER PLUS」。まだ1年の月日も経っ ...

AFFINGERカスタマイズ記事一覧へ

AFFINGER5 WINGカスタマイズ一覧へ

Facebook・Twitterへ最新記事をお届けします

-STINGER・AFFINGERカスタマイズ

Kanami（かなみ）

40代、4児の母、認知症の義母と同居中です。何気ない日常に幸せを感じるマイペースなヒト。子育てと介護の傍ら「自分にできることってなんだろう？」を模索しながらブログを書いています。

プロフィールページへ

Recommend Posts・Ad

1,080view: 【AFFINGER4】AMPページと通常ページの記事タイトル下にアクセント画像を追加する方法

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 WordPressテーマ「AFFINGER4」のAMPページと通常ページの記事タイトル下にアクセント画像を追加する方法をご紹介 ...

4,370view: 【AFFINGER4】トップページのTwitterカードに画像が表示されない場合の対処法

AFFINGER5「WING」をお使いの場合は、WordPressダッシュボード→AFFINGER5管理→SNS→OGP設定→「投稿・固定ページ以外のアイキャッチ画像（トップページ含む）」にて設定可能 ...

1,325view: 【AFFINGER4】アップデート後のスクリプトエラーの解決法と以前のGoogleフォントコード一覧

当ブログで利用しているWordPressテーマ「AFFINGER4」ver20170905（2017年9月）のアップデート後に、一時的にスクリプトエラーが出るようになってドッキリしました。 Googl ...

5,193view: 【AFFINGER4】「この記事を書いた人」にプロフィールページへのリンクを追加する方法

ご紹介している追加コードにタグの閉じ忘れがあり修正を行いました。先に参考にしていただいた方には大変ご迷惑をおかけいたしますが、コードの変更をお願いいたします。申し訳ございません。（2017年10月4 ...

6,393view: AFFINGER4 専用子テーマ【JET】に変更しました～カスタマイズの引継ぎ・注意点など～

当ブログで利用しているWordPressテーマ「AFFINGER4」に専用子テーマ「JET」を導入しました。「JET」は、トップページ・アーカイブページ・記事下の関連記事をカード型で表示することがで ...

2,533view: STINGER PLUS 「子テーマ」がダウンロードできない！そんな時は自分で作成してみよう♪

2016年10月現在、STINGER PLUSのテーマ及び子テーマのダウンロードが停止中となっています。それに伴って、「子テーマだけを今から入手したいけどできません。何か良い方法はありませんか？」と ...

1,879view: 【AFFINGER4】AMPページのFacebookシェアボタンがエラーになる場合の対処法とOGP設定について

【3月10日追記】新規で作成したFacebookの fb:App_id（アプリID）を「開発者モード」から「公開」に変更する部分の記載漏れがございました。開発者モードのままですと、自分以外のFac ...

2,993view: WordPressサイトにPush7を導入する方法と設定手順を簡単4ステップで♪

Webプッシュ通知サービス「Push7」は、更新情報を購読者のブラウザに自動的に送ることができる便利なサービス。実は私もつい最近知ったばかりです。購読したいサイトの購読ボタンを押して通知を許可する ...

1,509view: 【AFFINGER4】通常ページのアイキャッチ画像の下に追加したアドセンスをAMPページで非表示にする方法

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 ※こちらの記事は、下記ページ内の「アイキャッチ画像の下にアドセンスを追加する方法」を参考にしてくださった方にのみ該当するカスタ ...

1,712view: 【AFFINGER4】AMPページに通常ページへの移動リンクを追加する方法

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。【2017年4月追記】 AFFINGER4ver20170410アップデートで、通常ページへ戻るリンクボタンが標準仕様となり、 ...

Recommended category

STINGER・AFFINGERカスタマイズ

WordPressテーマ「旧STINGER PLUS」「STINGER8」「AFFINGER4」のカスタマイズ情報です。現在見ていただいている当ブログで行っている全てのカスタマイズ方法を記録しています。気に入ったカスタマイズが見つかりましたら是非参考になさってください♪
※AFFINGER5「WING」のカスタマイズにつきましては、現在確認作業とまとめ記事の作成中です。

STINGER・AFFINGERカスタマイズ備忘録（WordPress）

ウィジェットに追加したアドセンスが保存できない・余白ができる場合の対処法

WordPressのウィジェットエリアにアドセンスコードを追加する場合、つい最近までは「カスタムHTML」を利用するのが一般的でしたが、WordPress4.9よりHTMLのエラーチェック機能が新たに加わったことで、エラーにより保存できない状態になることがあるようです。上記のように「！」の警告が表示されていても保存できる場合は問題ありませんが、保存ボタンをクリックしても保存されない場合は「カスタムHTML」ではなく「テキスト」にアドセンスコードを貼りかえることで対処することができます。 Kanamiコー ...

STINGER・AFFINGERカスタマイズ備忘録（WordPress）

カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ

記事内でおすすめの商品や書籍を紹介するときには、Amazonや楽天、Yahooショッピングなど、複数の商品リンクをひとまとめにすることができるブログパーツ「カエレバ・ヨメレバ」がとても便利。カエレバは商品の紹介用、ヨメレバは書籍の紹介用に使い分けることができます。利用されている方も多いですよね。当ブログでも導入を検討中に、お世話になっている方からタイムリーなご質問を受けたことをきっかけに、CSSカスタマイズに挑戦してみることにしました。ここでは、コピーペーストだけで「カエレバ・ヨメレバ」のカスタマ ...

STINGER・AFFINGERカスタマイズ

AFFINGER4 専用カスタマイズ済み子テーマ2種を無料配布します

お知らせ AFFINGER4 ver20171227bより追加された新パーツのAMP表示に対応した「Kanamii for AFFINGER C」「Kanamii for AFFINGER N」ver20180117を追加しました。（2017年1月17日） 2017年11月30日追記 style.css及びst-amp-css.php内の画像パスに拡張子（.png）の記載もれがあり、コードの修正を行いました。有効化後、各所の背景画像が正常に表示されている場合は修正前のままお使いいただけますが、表示されな ...

STINGER・AFFINGERカスタマイズ

【AFFINGER4】関連コンテンツを通常ページとAMPページに設置する方法

こちらのカスタマイズは、AFFINGER5「WING」でも応用できます。 WordPressテーマ「AFFINGER4」の通常ページとAMPページにアドセンスの関連コンテンツユニットを設置する方法をご紹介します。最近になって、新たに「インフィード広告」や「記事内広告」などのネイティブ広告が追加されたことで、どこにどんな風に広告を置けばいいんだろう？と戸惑っている方も多いのではないでしょうか。私自身も例外でななく、アドセンス、WordPressテーマ、AMP、SSL... 時代の流れについていくのは大変 ...

STINGER・AFFINGERカスタマイズ

【AFFINGER4】トップページのTwitterカードに画像が表示されない場合の対処法

AFFINGER5「WING」をお使いの場合は、WordPressダッシュボード→AFFINGER5管理→SNS→OGP設定→「投稿・固定ページ以外のアイキャッチ画像（トップページ含む）」にて設定可能になりました。先日Twitterでトップページをシェアしていただいたことをきっかけに、トップページのみ「Twitterカードの画像が表示されない」ことに気がつきました。下記は、TwitterとFacebookのOGPチェックツールでの検証結果です。《 Card Validator-Twitter Dev ...

記事一覧へ

おすすめ記事へ

ゼロからのWordPress入門

数年前、右も左もわからず挑戦したWordPressでのサイト作成。当時はWeb上の沢山の情報に助けられました。初心に戻り、WordPressにゼロから挑戦したい方を応援！難しい説明や専門用語は極力省いて、初心者さん目線でレクチャーします。

ゼロからのWordPress入門

WordPressとFacebook・Twitterを連携して更新情報を簡単に自動投稿する方法 - ゼロからのWordPress入門【21】

プラグインの設定方法について加筆修正を行いました。（2017年10月）前回までは、更新情報の受け取りツールとして、サイト名で登録することができる「Facebookページ」の作成方法とページプラグイン設置方法、さらに、Twitterのフォローボタンと埋め込みタイムラインの設置方法をお伝えしました。ここでは、プラグインJetpack by WordPress.comを利用して、FacebookページとTwitterへ更新情報を自動投稿する方法をいくつかの注意点などを含めてお伝えしていきます。 SNSへの自 ...

ゼロからのWordPress入門

サイドバーへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法（変更後）- ゼロからのWordPress入門【20】

前ページでは、ユーザーさん向けの更新情報受け取りのツールとして、サイト名で作成することができる「Facebookページ」の作成方法とページプラグインの導入方法をご紹介しました。今回は、サイドバーやフッターへのTwitter埋め込みタイムラインウィジェットとフォローボタンの設置方法、さらに埋め込みタイムラインの背景を透明にする方法を説明していきます。・・実は埋め込みタイムラインの設置方法については、以前にも記事内で一度お伝えしているのですが、その後変更があったようです。友人から「Twitterのタイム ...

ゼロからのWordPress入門

サイト名でのFacebookページ作成とページプラグイン導入方法 - ゼロからのWordPress入門【19】

前ページでは、WordPressのカスタマイズと子テーマについてご紹介しました。次のステップは、ブログの『更新情報発信』についてのお話しです。「更新まだかなー？」「・・まだだった・・」ご自身にもこんな経験はありませんか？無料ブログサービスのように、コミュニティ間での「読者登録」のツールがないWordPressでのサイト運営では、更新情報の受け取りに必要なツールは自身で設定する必要があります。 Facebookを頻繁に使われる方、Twitterを使われる方、RSSフィードや更新情報サービスを使われ ...

ゼロからのWordPress入門

WordPressのカスタマイズ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】

前ページでは、WordPressのファイルとデータベースのバックアップ方法をご紹介しました。もしものトラブルに備えてバックアップ方法をマスターしたら、次のステップはテーマのカスタマイズです。ご自身のサイトを見渡してみて、例えば「ここの文字は大きくしたほうが見やすいかな？」とか「ここの部分は少しスペースを空けたいなぁ」と思う箇所はありますか？ WordPressでは、自分の好みに合わせてテーマファイルを自由にカスマイズすることが可能となっています。このカスタマイズ時に便利なのが「子テーマ」です。「子 ...

ゼロからのWordPress入門

WordPressのバックアップ② ～ファイルとデータベースのバックアップ方法を詳しく～ - ゼロからのWordPress入門【17】

前ページでは、WordPressのバックアップの事前準備として「FFFTP（FTPS対応版）」のインストールと接続設定、基本操作方法をご紹介しました。ここでは、実際に「FFFTP」を利用したファイルのバックアップとWordPressプラグイン「WP-DBManager」を利用したデータベースの自動バックアップ方法を順を追って詳しく説明していきます。初めてのバックアップ作業はいくつものステップがあって大変ですが、2回目以降は面倒な設定がないのでとても楽チンです。お時間のとれるときに初期設定と初回バック ...

記事一覧へ

おすすめ記事へ

【AFFINGER4】AMPページに通常ページへの移動リンクを追加する方法

【AFFINGER4】AMPページの関連記事の見出しとカテゴリ表示の背景色＆文字色変更方法

Site search

PickUp♪

子育て

心は一緒に♪娘へのプレゼントはお揃いのくまのお守りに決めました

クリスマスまであと1か月を切りましたね。お子さんをお持ちの方はプレゼント選びや準備にワクワクの季節。お財布はシクシクの季節でもありますかね(笑) ・・・まぁね。それも含めてクリスマスは親子の一生の思い出に残る楽しいイベントだと思っている私です。さて。我が家では毎年、4人の子供たちが小さな頃からサンタさんからのプレゼントの他に、母企画の「家族Deビンゴ大会」というイベントをクリスマスイブに開催しています。一人ひとりが驚くような。嬉しいサプライズプレゼントはなんだろう？と心を弾ませるこの季節。我が ...

ブログ・サイト運営

【GoogleAdSenseマネタイズの教科書・札幌セミナー】のんくらさんってどんな人？

2019年3月13日、「のんくらセミナー」ことGoogle AdSenseフォローアップセミナー（札幌）に参加してきました。当日は受付を担当させていただいたものです。「受付で強制的に名刺渡してきたおばちゃん、誰やねん？」参加者の方々には謎の人物だったかもしれませんね。のんくらさん（@matari39）とは8年前、無料ブログサービスで子育てブログを書いていた頃に出会い、私にとっては、恩師でもあり...そうですね。友人というよりも、先生というよりも「お兄さん」という位置づけがぴったりの。そんな大切な ...

STINGER・AFFINGERカスタマイズ備忘録（WordPress）

カエレバ・ヨメレバを女性向けのかわいいデザインにCSSカスタマイズ

ブログ・サイト運営

ブログやSNSアイコンの似顔絵はどこで？おすすめサイトのご紹介♪

今までブログやSNSでのプロフィール画像は、フリー素材でお借りしたものを使っていましたが、2018年のスタートと合わせて似顔絵アイコンに変更しました。周囲にはご自身で綺麗に絵が描ける方もいらっしゃって、常々「すごいなぁ。そんなことができたら素敵だな。」と思っているのですが、なんせ人一倍絵心がなくてですね。何年前かな？「顔のほくろを取りました」といった内容の記事を書いたときに自分の似顔絵を堂々と公開したことがあるのですが.... これですからね。「・・・・・。」さて。前置きが長くなりましたが、新 ...

New entry

1,024view: ブログ・サイト運営

【GoogleAdSenseマネタイズの教科書・札幌セミナー】のんくらさんってどんな人？

2019/3/29

651view: ブログ・サイト運営

2018年の振り返り

2019/2/28

970view: 子育て

大学生・高校生・中学生・小学生・夫・おばあちゃんへのクリスマスプレゼントは？

2018/12/26

2,408view: 子育て

クリスマスプレゼントの隠し場所はどこに?おすすめアイデアのご紹介

2018/12/26

2,146view: 子育て

クリスマスパーティに100円ショップを有効利用♪家族Deビンゴ大会はいかが？

2018/12/24

【AFFINGER4】AMPページの見出し（h2～h4）のカスタマイズ

事前準備

子テーマの作成

WordPressのカスタマイズ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】

文字色・背景色・ボーダー色を変更する方法

見出し（h2）に背景画像を設定する方法

パターン背景画像を指定する場合

ワンポイント画像or1枚の画像を指定する場合

見出し（h3）に背景画像を設定する方法

当ブログでの見出しのカスタマイズ

【STINGER PLUS】見出し（h2、h3）のCSSカスタマイズ～背景色指定・背景画像使用・ステッチ風～

見出し（h2）のカスタマイズコード

見出し（h3）のカスタマイズコード

【AFFINGER4】AMP化方法の全手順をまとめました

関連記事

【AFFINGER4】AMPページも自分色♪カスタマイズまとめ

今までの STINGER PLUS+ カスタマイズまとめ

【STINGER PLUS】ヘッダー・サイドバー・コンテンツの細かいカスタマイズとCSSの基礎レッスン

Twitterカードが表示されない・タイムラグがある・修正後もエラーが出る場合の確認ポイントと対処法

【STINGER PLUS】サンプルデザイン（Sample03）と同じようにトップページを作る方法は？

SEO設定とは？トップページと投稿記事ページでのSEO設定方法 - ゼロからのWordPress入門【11】

固定ページの作成方法と注意点・カスタムメニューの使い方 - ゼロからのWordPress入門【12】

【STINGER PLUS】フッターのカスタマイズ（キャプションを非表示＆メニューカラーの変更）

WordPressとFacebook・Twitterを連携して更新情報を簡単に自動投稿する方法 - ゼロからのWordPress入門【21】

【STINGER PLUS】記事エリアの横幅を広げてアドセンス（レクタングル大）を横並びに配置する方法

【STINGER PLUS】トップページと固定ページのSNSボタンと投稿日を非表示にする方法

【AFFINGER4】AMPページの見出し（h2～h4）のカスタマイズ

事前準備

子テーマの作成

WordPressのカスタマイズ ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】

文字色・背景色・ボーダー色を変更する方法

見出し（h2）に背景画像を設定する方法

パターン背景画像を指定する場合

ワンポイント画像or1枚の画像を指定する場合

見出し（h3）に背景画像を設定する方法

当ブログでの見出しのカスタマイズ

【STINGER PLUS】 見出し（h2、h3）のCSSカスタマイズ～背景色指定・背景画像使用・ステッチ風～

見出し（h2）のカスタマイズコード

見出し（h3）のカスタマイズコード

【AFFINGER4】AMP化方法の全手順をまとめました

関連記事

【AFFINGER4】AMPページも自分色♪カスタマイズまとめ

WordPressのカスタマイズ～子テーマ利用のメリットとデメリット・各テーマファイルの子テーマ作成方法～ - ゼロからのWordPress入門【18】

【STINGER PLUS】見出し（h2、h3）のCSSカスタマイズ～背景色指定・背景画像使用・ステッチ風～