11/21のメンテナンス後にヘッダ・デザインが一新されました。突然の変更に戸惑ったソネ風呂ガーも少なくないでしょう。ワイドスキンには合っているかもしれませんが、通常幅のスキン（770px）には似合わない。ヘッダに画像の入っている公式スキンも上部が切れてデザインが損なわれている。ヘッダ・カラー（18色）を変えられる新機能を喜んでいる人が一体何人いるのかな？‥‥それよりは簡単に画像を入れられるように改良して欲しいし、少なくともワイドと通常、２パターンのヘッダ・サンプルを用意するべきでしょう。〈猫にも出来るオリジナル・スキン〉シリーズは修正したものの不完全燃焼！‥‥というわけで、「ワイド・ヘッダ攻略」に挑戦してみました。これまでの経緯を纏めた「オリジナル・スキンヘの道」は読まなくてもOKです。

　　　　　　　　　　　　　　　　　　　　＊

　　　オリジナル・スキン 2006（ellie）
　　　

■ オリジナル・スキンヘの道
スキン・カスタマイズ公式サポート以前、カスタムペイン内にCSSを入れてオリジナル・スキン化する方法が密かに流行りました。「密造オリジナル・スキン」は面白かったなぁ。

<style>
#banner{background:url("/_images/blog/_xxx/xxxx/0000000.jpg") no-repeat 0px 0px}
</style>

ヘッダ（#header）に画像を入れる方法は画像分割する手間が省ける「ネコヤナギ式」を採用。バナー（#banner）の縦幅をマイナス指定（-25px）するアイディアが秀逸だった。

<style>
#header{background:url("/_images/blog/_xxx/xxxx/0000000.jpg") no-repeat 0px 0px}

#banner{background:url("/_images/blog/_xxx/xxxx/0000000.jpg") no-repeat 0px -25px}
</style>

バナーではなくコンテナー（#container）に入れる「マリオ式」はシンプルで理に適った方法だったが、ベーシック（白・黒）など一部の公式スキンにしか対応しなかった。その理由は元スキンのバナーに画像が入っていたから（コンテナーの上にバナーが重なるレイヤーになっていて、常にバナーの方が優先される）。

<style> #container{background:url("/_images/blog/_xxx/xxxx/0000000.jpg") no-repeat 0px 0px; padding:0px 0px}
</style>

カスタマイズ公式サポート以降はコンテナーを指定するだけでヘッダ部分にも画像が入ったし、「So-net ブロク教室」からも「正しい方法です」という、お墨付きを得ました。これで一件落着と思っていたのに、突然のヘッダ・デザイン変更！‥‥ソネ風呂も余計なことをしてくれたものですね。

　　　　　　　　　　　　　　　　　　　　＊

　　　オリジナル・スキン 2007（ellie）
　　　

■ ワイド・ヘッダ攻略
1. バナーの縦位置調整
バナー（#banner）に画像を入れている場合は問題なし。コンテナー（#container）の場合は新ヘッダの縦幅だけ下にズレちゃうのでマージン下で、相対的に上へ移動したタイトルはパディング（padding）で調整します。以下の数値は〈s k n y s - s y n k s〉の具体例なので、適正値（＋25px）に変えて下さい。

#banner{margin-bottom:45px}
#banner h1{padding-top:60px}

2. ヘッダの横サイズ変更
ヘッダのセレクタを#headerから.sbHeaderに変更して、横幅（width）を指定します。

.sbHeader{width:770px; height:25px; margin:auto}

3. ヘッダ画像
「ネコヤナギ式」でバナーとヘッダに画像を入れます。ただしヘッダはカスタムスキンの編集ページ内ではなく、カスタムペインの中に入れないと画像が反映されません。

<style> .sbHeader{background:url(”/_images/blog/_xxx/xxxx/0000000.jpg”) no-repeat 0px 0px; width:770px; height:25px; margin:auto}
</style>

#banner{background:url("/_images/blog/_xxx/xxxx/0000000.jpg") no-repeat 0px -25px}

4. ヘッダの文字変更
ヘッダの横幅をリサイズ（770px）すると、右リンク文字が２行に表示されてしまいます。この不具合の修正法は未だ分からないのですが（ソネ風呂の達人に質問中です！）、とりあえず下記のCSSをカスタムペイン内に入れて対処して下さい（左に寄っちゃいますが）。右リンク文字の最小横幅を指定して、文字列が改行しないようにします。（2008/02/09）

    <style>
    .sbMenuR{float:right; min-width:139px}
    .sbHeader ul{white-space:nowrap}
    </style>

    ヘッダ右の「blogトップ　使い方　Q&A」（ログイン時）が煩わしいという人には、ちょっと乱暴ですが右リンクを非表示にする方法もあります。ただしログアウト状態では「ログイン」項目も消えてしまいます。（2007/11/28）

    <style>
    .sbMenuR{float:right; display:none}
    </style>

    文字色は擬似クラスで個別に指定しなければなりません。a:hoverはカーソルで触れた時の色。{text-decoration:none}で下線が消えます。文字サイズも変えられますが、余り大きくすると２行表示されちゃうので現状維持でしょうか。試しに左リンクの文字を少し大きくしてみました。

    <style>
    .sbHeader a:link, .sbHeader a:visited, .sbHeader a:active{color:#xxxxxx}
    .sbHeader a:hover{color:#xxxxxx; text-decoration:none}

    .sbMenuL{float:left; font-size:9pt}
    </style>


    　　　　　　　　　　　　　　　　　　　　＊

    　　　ヘッダサイズを変更して透過した公式スキンデザイン（happy）
    　　　

    スキンデザインの上辺が切られちゃったのは痛いけれど、ヘッダ・サイズを元に戻して背景色を透過させればソネ風呂公式スキンも見栄えが良くなります。

    <style>
    .sbHeader{background-color:transparent; width:770px; height:25px; margin:auto}
    </style>

    　　　　　　　　　　　　　　　　　　　　＊

    • ヘッダ文字を「折り返しなしで右寄せ」する方法が分かったので修正しました。タイトルも〈猫にも出来るワイド・ヘッダ攻略改〉に改めました（2008/02/09）

    • <style>〜</style>で囲ったヘッダのCSSはカスタムペイン内に入れて下さい

    • わざとカスタマイズし難いように変更されたような気もしますが‥‥＾＾

    • TANさんが「ヘッダの幅を変更する方法」（JavaScript）を公開しています＾＾

    • kovaioさんが「ヘッダ・カスタム」（CSS）の方法を紹介しています

    　　　　　　　　　　　　　　　　　　　　＊



    スタイルシート辞典 第４版

    • 著者：（株）アンク
    • 出版社：翔泳社
    • 発売日：2007/07/18
    • メディア：単行本（ソフトカバー）