の まとめ

デジタルガジェットレビュー、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の検索欄にテキストを表示しておく方法

HTML5で導入されたplaceholder属性によって、フォームのテキスト入力 …

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

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

【WordPress】テーマ「Stinger3」の記事内広告をダブルレクタングルにする方法

WordPressのテーマ「Stinger3」における本文中の広告を2つ並べて表 …

【WordPress】ソースコードを表示するプラグイン「SyntaxHighlighter Evolved」の使い方

WordPressでソースコードなどを表示するのに適したプラグイン「Syntax …

WordPressのパーマリンク設定を変更してSEOに失敗した実例と対策

素人が思いつきでSEO対策をすると失敗するよ、というお話です。 はじめに 本ブロ …