見出しの改造

見出しを画像にするなど自由に改変する

　cocoonもいろいろに見出しを設定できるようにはなっているものの、見出しに画像を設定したり、メニューの左側少しだけの色を自由に変えたりする機能までは、実装されてはいないようです。
　KANSO導入を考えていた時に、KANSO用にメニューのcssをいじる設定を作っていたので、それを基にして、cocoonの見出しを変更してみることにします。

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

/* h3 */
#comment-area.comment-area h2#comments.comment-title,
#related-entries.related-entries h2.related-entry-heading,
body #main.main h3{
  line-height:125%;
    /* font */
  color:#fff;
  font-size:large;
  padding:3px 10px;
    /* background */
  border: 0px solid #ffffff;
  border-left: 8px solid #FFD700;
  background-color:#8db6cd;
  margin: 5px 0px;
  background-image:url("");
}


/* h4 + include.inc.php, calender_viwer.inc.php */
#comment-area.comment-area h3#reply-title.comment-reply-title,
#main.main .related-entry-card-content.card-content.e-card-content h3.related-entry-card-title.card-title.e-card-title,
body #main.main h4,
body #main.main h2.calender{
  width: 548px;
  text-align:center;
  font-size: 17px;
  color: #000;
/* 画像を使わないとき
  background: #ffdefd;   　*/
    /* 画像　　*/
  background-image:url("https://www.neko01.com/car/title2-dai.png");
    /*  background-position:center; */
  background-repeat:no-repeat;
  border:0px;
  background-size: 100% 100%;
  background-repeat:no-repeat;
  padding: 9px 10px;
  width:100%;
  margin: 0px;
}

　KANSOの時から変更する注意点は、「h2」や「h3」だけでは設定が反映されないので、「body #main.main h2」の様に、適応箇所に強い限定を入れます。
　以前の設定が表に出てこないように、画像の背景を白にし、borderも無しにします。
　見出しの上下に不自然な余白が残るのも嫌なので、marginを調整しました。

cocoonの見出しは<h1>からだが

　cocoonの見出しは通常<h1>から始まるのですが、私のようにページ見出しの上に目次を入れようとすると、目次は<h2>の前に入るようになっているので、ページ見出しを<H2>から始めなければなりません。
　また、KANSOから移行した場合も、最初ページ見出しは<h2>からになっています。
　しかし、通常<h1>から始まるものを1つずらしてしまうと、コメント欄などの<h2>タイトルがページ見出しと同じになってしまい、どぎつくなりすぎます。
　それで、黄色マーカー部分を追加しました。「background-image:url(“”);」を入れないと、<h2>で指定した画像がコメントの見出しにも表示されて、おかしな表示になってしまいます。

本文の上下の余白を取り除く

　タイトルの下に文字が続くときには、WordPressが勝手に <p> </p> タグを挿入します。その時の余白が大きすぎるので、下の様に調整しました。

/* 見出しと内容を詰める */
body #main.main p{
  margin: 5px 0px 15px 0px;
  padding:0px;
}

cocoonの見出しにタグは貼れない

　次頁で説明するように、cocoonの見出しにタグは貼れません。よって、<a> </a>は貼ることが出来ないので、これ関係のcssは全部削除しました。

投稿「関連ページ」タイトルだけ太くなる

　投稿ページ下の、「関連ページ」タイトルが、何故か本文のh2より少し太く表示されてしまいます。

  line-height:125%;

を追加しました。

背景画像作成ソフト

　背景画像の作成ソフトについては、リンクをご覧ください。