2020.4.19 ブログテンプレートを「The THOR」に変更しました。細部を修正中です。
NO IMAGE

賢威テンプレートVer6.1で記事タイトル配色変更

賢威テンプレートVer6.1の記事タイトルの配色をいじってみます。

全体設定だと記事タイトルの配色変更ができないのです。
おそらくh2タグ関連で設定が入っていると思うので調べました。
まずは記事タイトル背景色を変更する方法。

◆記事タイトル背景色変更

WordPressの編集メニューから
外観

テーマ編集

右側デザインシート内のdesign.css

/*——————————————————–
メインコンテンツ(本文)
——————————————————–*/

#main-contents{ font-size: 1.4em; }

~~~~~

/*●H2タグ*/
#main-contents h2{
margin: 0 0 1.5em;
padding: 0.3em 0.5em;
border-left: 28px solid #00ffff;
background: url(./images/common/bg-dot.png) #333;
color: #fff;
font-size: 1.429em;
}

* html #main-contents h2{ background: #333; } /* IE6 */

ここの変更点は赤字のところのカラーコードを変更するだけです。
それで記事タイトルの背景色が変化します。

記事タイトルの背景色を変更して、
タイトル文字が見づらくなってしまった場合は文字色も変更しましょう。

◆記事タイトルの文字色変更

WordPressの編集メニューから
外観

テーマ編集

右側デザインシート内のdesign.css

/*——————————————————–
メインコンテンツ(本文)
——————————————————–*/

#main-contents{ font-size: 1.4em; }

#main-contents .contents{
margin-bottom: 3.5em;
padding: 0 10px;
}

/*●H2タグ*/
#main-contents h2{
~~~~~

* html #main-contents h2{ background: #333; } /* IE6 */

#main-contents h2 a:link,
#main-contents h2 a:visited{ color: #fff; }←通常記事タイトル文字色

#main-contents h2 a:hover,
#main-contents h2 a:active{ color: #f60; }←マウス載せ時のタイトル文字色

先ほどの直下の部分です。
赤字のカラーコードを希望の色に書き換えるだけで、
記事タイトルの文字色は変化します。

この辺ができるようになってくると、
テンプレートメーカー自体を使わなくても、
好きな配色ができるようになってきます。

NO IMAGE
最新情報をチェックしよう!