cocoon

ヘッダ－を改造する

繰り返し画像の表示

　cocoonの初期状態では、ヘッダーに、パソコンの横一杯に伸びた画像は貼れないし、繰り返しの画像なども貼れないような気がします。これをやってみたいと思います。

/* ヘッダー　写真表示 */
#header{
  background-image:url("icon_source/star.gif");
  background-repeat:repeat;
/*  background-size:100% 100%;*/
}

　こんな感じで、「独自CSSやJavascript追加」のやり方でcssを追加すれば、ヘッダーを自由に改造できそうです。
　コメントアウトを復活させれば、画像を枠に合わせて表示させることもできるはずです。その場合は、「no-repeat」を指定して、repeatをさせないようにします。

タイトルの前に画像を挿入

/* ヘッダー　ねこ画像表示 */
#header　.site-name-text{
  position:relative;
  top: 0px; left: 0px; 
  line-height:2em;
  padding-left:2em;
}
#header .site-name-text:before{
  position:relative;
  top: 10px; left: 0px; 
  content:"";
  display:inline-block;
  width:2em;
  height:2em;
  background:url(https://www.neko01.com/pc/etc/nekotori.gif) no-repeat;
  background-size:contain;
}

　訳が分からずに、こんな風にやってみました。一応望みの位置には、表示しています。

モバイル時簡易ヘッダー表示

　モバイルには、私はヘッダーモバイルボタンを使って、ヘッダーのようなものを表示しているので、上のヘッダーは、モバイル時には表示されません。
　モバイル時、普通のヘッダーを表示した上に、更にメニュー表示用のボタンを挿入すると、それだけで場所を取ってすっきりさが無くなってしまいます。
　それで、私は、ヘッダーモバイルボタンをヘッダ代りに使うことにしました。PC
版と同じ背景に、タイトルと、ページ下に表示したメニューへのリンクボタンを表示します。
　これの設置の仕方は、別頁に譲ります。