猫にも出来るワイド・ヘッダ攻略改：s k n y s

	ブログをはじめるログイン

猫にも出来るワイド・ヘッダ攻略改　[s k i n] [編集]

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

　　　　　　　　　　　　　　　　　　　　＊

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

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

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

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

カスタマイズ公式サポート以降はコンテナーを指定するだけでヘッダ部分にも画像が入ったし、「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. ヘッダ画像
「ネコヤナギ式」でバナーとヘッダに画像を入れます。ただしヘッダはカスタムスキンの編集ページ内ではなく、カスタムペインの中に入れないと画像が反映されません。

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

		blogトップ使い方 Q&A サービス登録ログイン

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

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

	sknys さん管理ページ新規作成自分のブログログアウト	blogトップ使い方 Q&A

　　　　　　　　　　　　　　　　　　　　＊

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

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

　　　　　　　　　　　　　　　　　　　　＊

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

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

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

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

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

　　　　　　　　　　　　　　　　　　　　＊

　 original skins 1.2 / 2.2 / 3.2 / 4.1 / original header 1.1 / sknynx / 117

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

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

タグ：original skin cats header

2007-11-26 00:21 コメント(8) トラックバック(3)

いつもご苦労様です。
しかし、買ったままのDVDも碌々見られない私が、これ見て自分とこのオリジナル･スキンを作成できるとは…とても思えません(笑)
by モバサム41 (2007-11-26 23:42)

モバサム41さん、コメントありがとう。
今回のカスタマイズは不粋なワイド・ヘッダを元に修復する方法です。
通常幅のスキンにワイド・ヘッダは馴染まない！
‥‥こんな記事は、出来れば書きたくなかったなぁ＾＾;
by sknys (2007-11-27 20:20)

ヘッダー右リンク表示の件、教えて頂きありがとうございました。
さっそく試してみたところJavaScript経由でも上手くいきました。
自分的には諦めていただけに気分スッキリです。
by TAN (2008-02-10 23:19)

TANさん、コメントありがとう。
上手く出来ないので（頭に来て）右リンクを非表示にしていましたが、
ずっと気になっていました。
CSSで作ってあるのだから、絶対CSSで修正出来るはずだと‥‥。
同じく「気分スッキリ」爽快です＾＾
by sknys (2008-02-11 13:30)

こんにちは。いつもありがとうございます。
ヘッダを背景色と同じにしたかったので透過させてみました。
上のCSSをそのままいれたのですけれど、なぜかヘッダの下の線だけが残ってしまうんです。
線は消えないのでしょうか？

by お針子姫 (2010-01-30 13:51)

お針子姫さん、コメントありがとう。
ヘッダCSSに{border-bottom:1px solid #f2becd}という指定が
ありました。
下記のCSSで試してみてね。
{border-style:none}や{border-bottom-style:none}でも
下枠線は消えるはずですが＾＾;

<style>
.sbHeader{background-color:transparent; border-bottom:0px none #}
</style>
by sknys (2010-01-31 19:09)

ありがとうございます。
やっと消えました。
{ border-bottom:0px none #}を上のCSSの最後に追加したら変化がなかったのですけれど、{border-style:none}を{background-color:transparent｝の次に入れてみたら消えました。
順番も大事なのでしょうか？
by お針子姫 (2010-01-31 23:02)

CSSには優先順位があるそうです。
1. 後からブラウザに読み込まれるCSSの方が優先される。
ヘッダCSSは後から読み込まれるので、
「CSS編集ページ」で設定しても上書き（無効化）されてしまう。

2. より詳細に限定的に設定したCSSの方が優先される。
HTMLタグに直接CSS（<☆ style="★">〜</☆>）を入れると、
最優先で反映されます。
兎に角、下枠線が消えて良かった＾＾
by sknys (2010-02-01 00:14)