の まとめ

デジタルガジェットレビュー、Mac ・ iPhone・ WordPressのコード、食レポなどをまとめて比較してお届けします。

【WordPress】stinger3の見出し(h2,h3,h4タグ)のデザインを変更する方法

      2015/01/15

WordPressのテーマ「Stinger3」の見出し(h2、h3、h4)を変更してみました。

htag

環境

  • WordPress3.9.1
  • stinger3ver20131217

手順

  1. WordPressにログインし、「外観」から「テーマ編集」を選択します。
  2. 画面左の「スタイルシート(style.css)」と「smart.css」のファイルを修正します。

スタイルシート(style.css)の修正

1.ソースの1/3くらいにある「h2」を次の内容に書き換えます。すぐ上にある「.demo h2」ではないので注意してください。

h2 {
 font-size: 24px;
 background-color: #F2F2F2;
 padding :  5px 0  5px  16px;
 margin  : 20px 0 20px -21px;
 border-left-width: 20px;
 border-left-style: solid;
 border-left-color: #e4e4e4;
 line-height: 30px;
}

2.次に「.kizi h3」を次の内容に書き換えます。

.kizi h3 {
 font-size: 20px;
 padding :  0   0  0    16px;
 margin  : 20px 0 20px -21px;
 border-left-width: 20px;
 border-left-style: solid;
 border-left-color: #F2F2F2;
 line-height: 30px;
}

3.最後に「.post h4」を書き換えます。

.post h4 {
 font-size: 16px;
 background-color: #F3F3F3;
 padding:10px 10px 10px 10px;
 margin :0    0    20px  0;
 line-height: 28px;
}

smart.cssの修正

1.smart.cssはスマホ用のCSSです。スマホ用の表示も変更したい場合は修正が必要です。CSSのソースは「style.css」の記述内容とほぼ同じですが、書き換える場所が異なるので注意してください。

2.ソースの1/3くらいにある「h2」を次の内容に書き換えます。

h2 {
 font-size: 24px;
 background-color: #F2F2F2;
 padding :  5px 0  5px  16px;
 margin  : 20px 0 20px -21px;
 border-left-width: 20px;
 border-left-style: solid;
 border-left-color: #e4e4e4;
 line-height: 30px;
}

3.次に「.post h3」を次の内容に書き換えます。

.post h3 {
 font-size: 20px;
 padding :  0   0  0    16px;
 margin  : 20px 0 20px -21px;
 border-left-width: 20px;
 border-left-style: solid;
 border-left-color: #F2F2F2;
 line-height: 30px;
}

4.最後に「.post h4」を書き換えます。

.post h4 {
 font-size: 16px;
 background-color: #F3F3F3;
 padding:10px 10px 10px 10px;
 margin :0    0    20px  0;
 line-height: 28px;
}

まとめ

WordPressのテーマ「stinger3」の見出しh2、h3、h4のデザインを修正・変更する方法を紹介しました。

念のため修正前にはファイルをバックアップしておいてください。

 - WordPress , , , ,

336-280

  関連記事

【WordPress】テーマ「Stinger5」の広告の位置を変更してみました

WordPressのテーマ「Stinger5」の広告の位置を変更してみました。 …

リンクの例
【WordPress】アイキャッチ付きサイト内記事へのリンクを作成する方法

アイキャッチ付きのサイト内記事リンクを作るプラグインを紹介します。 functi …

tag
WordPressテーマStinger5でアイコンフォントを使ってシェアボタンを作成する方法【初心者向け】

SNSのシェアボタンに、もう一工夫欲しい!ということでアイコンフォントを使ってみ …

【WordPress】テーマ「stinger3」の自動追尾するSNSボタンを非表示にする方法

WordPressのテーマ「stinger3」では、画面のスクロールに追尾するフ …

【WordPress】テーマ「Stinger5」のタイトルにカテゴリー名を入れる方法

サイト名を「まとめと比較」を「の まとめ」に変更しました。 カテゴリーの特色が強 …