KANSO改造

サブページにも同じヘッダ画像を表示する

　KANSOの初期状態では、ヘッダの画像はトップページだけで、それ以降のページではアイキャッチ画像を使うことが推奨されています。
　しかし、ページを作るごとにそれに適切なアイキャッチ画像を探すのは大変ですし、同じヘッダ画像がどっしりと表示されている方が、一つのホームページの中にいる存在感もある様に思います。
　それに、KANSOのトップページには、サイトタイトルやらヘッダタイトルやら、サブタイトルやら、同じような使い分け方が分からないものが3つも表示されて、少しうっとうしかったところでした。これも、サイトタイトルだけで十分です。
　そういうわけで、元々のサイトタイトルが入る細い帯は無くして、Topページと同じヘッダ画像をサブページ以下でも表示するようにしたいと思います。

サブページにも同じヘッダ画像を表示する

⁄* タイトル背景画像　2ページ目以降も表示*/
.uk-container-expand{
  background-image:url("icon_source/paint.jpg");
  background-size:100% 100%;
  height:150px;
}
⁄* 下の本文を全体下に寄せるために必要 */
#kns-head-nav>nav{
  height:150px;
  color:#060;
}
⁄* タイトル背景画像 ここまで*/

　heightの数字を変えることで、画像の高さが変わります。

表示の設定

　「外観 >　カスタマイズ > サイトの基本情報」で、サイトのタイトルを入力します。
　「外観 >　カスタマイズ > ヘッダ画像」で、 ヘッダのタイトル・サブタイトルは入力しません。ヘｯダの高さは、０にします。当然、画像の指定もしません。
　ここの画面で、サイトのタイトルの文字色を、白か黒で選ぶことが出来ます。ただし、背景の色を薄く設定すると黒、濃く設定すると白しか選べないようになっているようです。
　背景は結局、画像で隠れてしまいますが、必要な文字色を選べるように、背景色を設定します。
　ヘッダ右側に表示されるサブメニューの色も、「ヘッダー画像 > 全体 : ナビ色+α」の所で選んだ色によって、白か黒が決まるようです。cssでいじらない方が賢明です。
　「サイトの基本情報」の「キャッチフレーズ」は、Front Pageのheadのソース部分にだけ入るようでが、表示はされません。

サブメニューのアクティブ時の色変更

　基本、サブメニューの表示色はあまりいじらない方が良いと思いますが、アクティブ時に、黒っぽい背景だと隠れてしまうのでそこだけ変えることにします。

⁄* タイトル画像内  メニュactive時の色 #333から*/
.uk-navbar-nav > li.uk-active > a {
  color: #f0e68c;
}

ヘッダタイトル文字色の色の変更

⁄* アイキャッチ左側の文字色  */
.uk-navbar-left a {
  font-weight:bold;
  color: #FFD700;;
}

表示の設定

　本文はある程度の幅に制限されている表示なのに、ヘッダだけが画面いっぱいにびよーんと伸びていることに、最初、どうしても違和感を感じていたので、とっても苦労して、ヘッダ部分を、記事の上だけになるように、改造してみました。
　ところが、元の伸びた表示と、記事の上だけに制限された表示とを見比べてみると、画像が大きいためか、意外にも元のヘッダが横に伸びた表示の方がずいぶんと迫力があります。
　他のホームページを探してみても、このように伸びた表示のものが、大手メーカーの中にもずいぶんとあります。
　それで結局、このページのような簡単な改造に戻ることにしました。
　　幅の狭い従来型のデザイン
　　ヘッダだけが横に伸びるﾃﾞｻﾞｲﾝ
　上の二つを見比べてみると、色をたくさん使った昔のデザインの方が野暮ったいのがよく分かります。

いくらか不具合はあるが

　携帯で縦表示から横表示に変えた時、画像の幅が縦表示のままで、下に元のヘッダの色が伸びているような不細工なことになります。でもこれは、どうも、この改造によるものではなくて、KANSOの元々の不具合のようです。
　記事を上下させると、きちんとした表示になるので、あまりこの件は気にしないことにします。