猫にも出来るオリジナル・スキン 1.2

〈猫にも出来るオリジナル・スキン〉の方法を紹介します。「オリジナル・スキン」と言ってもスキン全体を変えるわけではなく、「タイトル画像」を好みのバナーに貼り替えるだけのこと。既に紹介されている自作スキン記事を基に、最も易しいマニュアルを目指します。

〔1〕使用するスキンのサイズに合った「画像」を用意する
〔2〕「画像」をアップロードしてCSS（スタイルシート）にコピーする
〔3〕そのCSSを表示中のカスタムペインの中にコピペして保存する

〔1〕まず最初に、ベースとなるスキンをソネ風呂「公式スキンデザイン」の中から選びます。出来るだけシンプルなスキンを選びましょう。「タイトル画像」（バナー）の「背景画像を表示」するとサイズが分かります。基本的に横幅は770px。縦幅はスキンの種類によって変動しますが、ハミ出た下の部分は自動的にカットされるので、他のスキンへの転用やヘッダ部分にも画像を入れることを考えると、実測値より長めに設定（200〜300px）しておく方が良いでしょう（ちなみに、今表示している「タイトル画像」は770×200px）。ただし大まかなレイアウトを予め決めておく必要があります。縦位置を後から調整する際に、メインの画像（顔や全身像）が極端に上下に片寄っていたり大きすぎると、一部が切れちゃう場合がありますから。

〔2〕用意した「タイトル画像」を新規作成（下書き）にアップロードすると、次のように表示されます。

赤く表示されている部分を以下のCSSスプリクトの（"　"）内にコピペします。

実際に変更を加えるのはフォルダ名 / ユーザ名 / 画像番号（拡張子）だけです。

〔3〕後は<style>〜</style>のCSSを表示中の任意のカスタムペインにコピペするだけ。プレヴューは利かないので、該当のカスタムペインを「保存」してページを再読み込みしてみましょう。貴方の用意した新スキンにバナーが変わっているはず。簡単でしょ？‥‥最初から完璧な「画像」を用意しようとしないで、取り敢えず適当な画像をUPしておいて、手順を進める方が効率的。上記のCSSをカスタムペインに１度コピーしておけば、次からは７桁の番号を入れ替えるだけで自由に画像を変えられるからです。オリジナル・スキンにすると愉しいですよ。他のブロガーの「自作スキン」が妙に気になっちゃう。サイズの合った画像を用意しておけば、所要時間４〜５分の作業だよ。

　　　ベーシック（white）
　　　

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

　　　　　　　　　　　　　　　　　　　　＊

ヘッダ部分にも画像を入れたい場合は画像分割する必要があります。ヘッダ用の画像を別に用意しなければなりません。今使っているベーシック（白）のスキンだとヘッダ画像は770×25px、バナー部分の画像は770×142px。実際にトライしてみましたが、この作業は結構面倒！‥‥でも安心して下さい。NecoYanagiさんの紹介している方法で簡単に回避出来ちゃうのだ。バナーと同じ画像をヘッダ用のCSSにコピペして、バナーのスプリクトの最後を以下のように書き換えるだけでOKです。

ヘッダの縦幅（25px）だけバナー画像をマイナス表示にすることで位置を合わせているわけです。つまり画像全体の位置を上下にズラしたい場合は、ヘッダとバナー部分を25pxの差でプラス・マイナスすれば良いことになります。たとえば、画像を上方に5pxだけ位置調整したい場合は、ヘッダの縦値を-5px、バナーを-30pxとします。使用するスキンによってはヘッダの縦幅が異なる場合もあるので、上手く行かない場合は数値（-25px）を変えてみましょう。ちなみに左隣の数値（0px）を変えることで横位置の微調整も出来ます。

上掲のサンプル・スキンのようにヘッダとバナー部分がシームレスに繋がっていれば成功です。簡単でしょ？‥‥難しいよ！「オリジナル画像」なんて用意出来ないという人は「テキスタイル」を縦横タイル状に敷き詰めるだけでもOKです。壁紙などのフリー素材や、ソネ風呂スキンの背景画像（タイル）を表示させて保存〜アップロードするだけ。その場合は「no-repeat」の部分を「repeat」に置き換えるか、削除する必要があります。単にスキンの色を変えるだけならもっと簡単です。画像をUPする代わりに、好きな色のカラーコード（#××××××）を書き込むだけ。CSSの知識はないけれど取り敢えず今使っている無地スキンの色を変えてみたいという面倒臭がり屋さんに、お勧めです。次に紹介する「ブログタイトル」や「紹介文」の文字色と色合いが重ならないように気をつけましょう。ヘッダとバナー部分を違う色にする２トーン・スキンも面白いかもしれません。カラーコードは「WEB色見本原色大辞典」などを参照して下さい。

　　　タイル地・スキン（cookie）
　　　

　　　無地色・スキン（baby blue）
　　　

「ブログタイトル」と「紹介文」の文字サイズ、色、位置（左右）も自由に変更可能です。基本設定の「ブログタイトル」入力欄で（スペースキーで）右にズラすと、ブラウザ上のタイトルや「読んでいるブログ（RSS）」等の表示も右にズレちゃう不具合（　　s k n y s - s y n k s）が発生します。せっかくRSSに登録してもらっているのに表示がヘンなのは恥ずかしいかも？‥‥多少面倒でも、この方法で解消して下さい。CSSが字数制限（1000 2000字以内）で全部入り切れない場合は、別のカスタムペインに分割表示させれば大丈夫。下記の値はサンプル・スキン３種（オリジナル画像、タイル地、無地色）の設定例です。文字色を変えて、位置を右に少しズラしました。

　　　　　　　　　　　　　　　　　　　　＊

参考までに具体例として、このページの「オリジナル・スキン」ソース（CSS）を一部公開しておきます。使用しているブラウザの「表示」→「ページのソース」を表示させることで、誰でも自由に閲覧出来ます（FirefoxのショートカットはCmd＋U）。

#banner h1 a{font-size:13pt; color:#f0ffff; margin-left:270px}
#banner .lead #lead{font-size:10pt; color:#fffacd; margin-left:241px}
</style>

　　　　　　　　　　　　　　　　　　　　＊

この記事を書くに当たって下記の皆さんの記事を参考にしました。みつなりさん、NecoYanagiさん、papa007_ さん、チヨロギさん、茉莉花さん、●リンクス●さん、kovaioさん、氷の翡翠さん、ao*さん（順不同）‥‥どうもありがとうございました（ao*さんだけは記事が旧宅にあるのでリンク出来ませんでした。伝説の「猫スキン」を復活させて下さい！）。

ここまでが〈ネコ・オス〉の基礎篇。応用篇ではヘッダ部分の文字色を変更したり、画像に枠を付けたりする方法を紹介します。

フォント・サイズの表示がpx値になっていました。このままでも表示されますが正しい表記法（pt）に改めました。初歩的なミスで恥ずかしい！（2006/08/18）

〔2〕のCSS書式に一部誤りがあったので、訂正しました。読者の皆さんに、深くお詫びします。（2006/08/26）

マリオさんが劃期的なオリジナル・スキンの書式（画像分割しなくてもヘッダ部分に画像を入れられる！）を発見しました。
#container{background:url("/_images/blog/_×××/××××/0000000.jpg") no-repeat 2px 0px; padding:0px 1px}
上の書式はベーシック（白）用にアレンジしています。元スキンによっては上手く表示されない場合もあるので、注意して下さい。ベーシック（白・黒）とキャラ・スキン全36種で使用可能‥‥マリオさん検証がしてくれました。ヘッダ部分に画像を入れる書式は下記の方法でも代用出来ます
#header.sbHeader{position:absolute; top:0px}
マリオ式の方がシンプルで利に叶っているかも？‥‥画像に合わせてバナーのサイズを自由に設定出来る書式なども紹介しているので、興味のある人は覗いてみてね（2006/09/30）
12/19のメンテでCSSの一部を入れ替えたために、カスタマイズした箇所が幾つか乱れてしまいました。ソネ風呂ガーの皆さんが正しく対処出来るように〈猫オス〉シリーズの記事を修正しました（2006/12/29）

11/21のメンテでヘッダ・デザインが変更されました。〈猫オス〉でカスタマイズしている方はセレクタ名を#header.sbHeaderに変えて下さい（2007/11/23）

　　　　　　　　　　　　　　　　　　　　＊

　 original skins 1.2 / 2.2 / 3.2 / 4.0 / sknynx / 038

関連する記事