見出し表示

QHMの見出し表示に近づける

　KANSOの見出し表示はそれこそ簡素なので、QHMで表示していたような見出し表示をWordPressに移行してもしたかったりします。
　そこで、QHMで使っているmain.cssなど(私はかなり古いデザインを使っているのでcolor.cssでした)から、以下の部分を探して、「独自CSSやJavascript追加」のやり方でcssを指定してやれば、QHM時代に実現していたのに近い表示をするようになりました。

body main h1,
body main h2:not(.comments-title){
  /* font */
  color:#ffffff;
  font-size:18px;
  padding:10px 25px;
  /* background */
  /* 非画像時メインボーダー色設定 */
    /*  background-color:#1E90FF;   */
    /*  border-bottom:double 3px #ffffff;  */
  /* 背景画像設定 */
  background-image:url("icon_source/h2_bg.png");
  background-size: 100% 100%;
  background-repeat:no-repeat;
}

body main h2 a{
  color:#7FFFD4;
}

/* h3 */
body main h3{
  /* font */
  color:#fff;
  font-size:16px;
  padding:3px 10px;
  /* background */
  border-left: 8px solid #FFD700;
  background-color:#8db6cd;
  /* border */
}
body main h3 a{
  color:#7FFFD4;
}

/* h3 + include.inc.php, calender_viwer.inc.php */
body main h4,
body h2.calender{
  /* font */
  color:#060;
  font-size:16px;
  padding:3px 5px;
  /* border */
  border:none;
  border-bottom:solid 1px #333;
}
body main h4 a,
body h2.calender a{
  color:#006e54;
}

body h1 a:hover,
body h2 a:hover,
body h3 a:hover,
body h4 a:hover,
body h2.calender a:hover{
  text-decoration:underline;
}

　注意点は、「body」の前についていた#をすべて削除する。「h2」や「h3」で、そのままにしておくと、メニューの方にまで影響が出てしまうので、「body」との間に 「main」を付け加えておくということです。
　ただ、それだけではまだ、コメントのH2が同じタイトル表示になってうっとうしいので、「:not(.comments-title)」を付けて、コメントは除外しておきました。ソースをいくら探しても見つからず、苦し紛れの対策なので、まだ私が使ってはいない機能の時に、H2以外でも弊害が起こるやもしれません。
　また、ページのタイトル表示を有効にした時には、「h1」が使われるので、最初の所で、「h2」の表示と同じにしておきました。

背景画像作成ソフト

　このページの背景画像の作り方についてはこちら。