猫にも出来るオリジナル・スキン 3.2 [s k i n]
〈猫にも出来るオリジナル・スキン〉の第３弾です。初めての方は先に〈猫オス 1.1〉基礎篇と〈猫オス 2.1〉応用篇をお読み下さい。「上級篇」になりますが〈nice! を消す方法 2.1〉でプロフ欄を擬装しているユーザには簡単なはずです。今回も３つのテーマに分けてみました。
〔1〕マリオ式 ←マリオさんのスキン変更方法を紹介します
〔2〕プロフ画像をワイド化しよう ←プロフ欄のユーザ・アイコンを大きくしよう
〔3〕カスタムペイン倍増化計画 ←５つから10個に増やしちゃうぞ！
＊
ベーシック（white）
オリジナル・スキン 2（ellie）
〔1〕マリオさんが劃期的なオリジナル・スキンの変更方法を発見しました。#container{〜}は画像分割することなくヘッダ部分に画像を入れられる書式です。
#container{background:url("/_images/blog/_×××/××××/0000000.jpg") no-repeat center 0px}
ベーシック（白）の場合、スキンに枠を付けると右辺に僅かな隙間が空いてしまうので、下記のように修正しました。 #container{background:url("/_images/blog/_×××/××××/0000000.jpg") no-repeat 2px 0px; padding:0px 1px}
しかし、この方法はベーシック（白・黒）と So-netキャラクター （36種）でしか上手く反映されません（マリオさんの検証結果）。残念！‥‥HTMLタグやCSSは出来る限りシンプルな方が良いと思っているので、このまま埋もれさせるのは惜しい。mana☆さん（小５）の質問コメントを読みながら考えました──リヴリーやモモ（コモモ）などのキャラ・スキンを使っているユーザは、比較的低年齢層（ローティーン）が多い。彼らにターゲットを絞れば、難易度の低い「マリオ式」の普及する可能性が高いのではないかと。小中学生のユーザに利用してもらいましょうよ。もちろん、ベーシック（白・黒）を使っていて、他のスキンに浮気する気のない大人のユーザにもお勧めです。s k n y s - s y n k s のスキンも「マリオ式」に変えてあります。（「ネコヤナギ式に戻しました 2007/11/23 現在）
タイル地・スキン（cookie）
#header.sbHeader{position:absolute; top:0px} #banner{background: url("/_images/blog/_×××/××××/0000000.jpg") no-repeat center 0px; width:770px; height:167px} 上の#header.sbHeader{〜}を使うと画像分割しないでヘッダ部分に画像が入ります。#banner{〜}のようにバナーの縦横サイズをを指定することで、元スキンの画像サイズを変更出来るようになります（凄い！）。つまり、今までは使用する元スキンのサイズにオリジナル画像を合わせていたけれど、この書式でオリジナル画像のサイズにスキンの方を合わせることが可能になったのだ。上記の組み合わせだとヘッダを絶対的な位置に指定しているのでタイトル文字や紹介文が上部へ寄ってしまいますが、大きい画像を入れたいというユーザには喜ばれるかも（縦幅の長くすると相対的にタイトル文字と紹介文が上方に表示される）。詳細は「マリオの部屋」まで。
＊
擬装したプロフ欄 no nice!
〔2〕プロフ欄をカスタムペインで擬装している場合は枠線を付けるのと同じ要領で、簡単にプロフ画像のサイズを変更出来ます（初期値width="72"の数値を変えるだけ）。但し大きくし過ぎると右側のnice!と重なってしまう！‥‥marginやpaddingでは対応出来ないので、下記のように<br>の後ろに「かなスペース」（□）を入れて解消します。
<div id="profile"><a href="https://sknys.blog.so-net.ne.jp/2006-01-01"><img src="/_images/blog/_×××/××××/0000000.jpg" width="84" border="2"/></a> <div class="status">□<a href="https://sknys.blog.so-net.ne.jp/2006-06-06"><span class="nice">no nice!</span></a> <br>□<a href="https://sknys.blog.so-net.ne.jp/2006-05-19"><span class="nice"><font color="#dc143c">nice! 0!</font></span></a> <br>□<span class="profileLink"><a href= "http://blogcruiser.so-net.ne.jp/profile/view.do?toPersonalId=000205334847"> profile</a> <br>□<span class="profileLink"><a href="https://sknys.blog.so-net.ne.jp/archive/c290650">cat-log</a></div> </span></div></div>
<div class="sidebar" id="profile"><h3 class="sidebar-title"><a href="http://sknys.blog.so-net.ne.jp/">sknys</a> さん</h3><div class="sidebar-body"><dl><dt class="profile-img"><img alt="sknysさんの画像" src="/_images/profile/_m_sknys.png" border="2" width="84"></dt><dd class="profile-status">□<span class="nice">no nice!</span> 0 <br>□<span class="profileLink">記事 00</span><br>□<span class="profileLink"><a href="http://sknys.blog.so-net.ne.jp/_pages/user/profile/index"> プロフィール</a></span></dd></dl></div><div class="sidebar-end"></div></div>
プロフ画像は自動的に小さなサイズ（72px）に変換されてしまうので、拡大すると画質低下を招く。記事に画像をUPするのと同じ方法で、直接貼り付けた方が良いでしょう。プロフ画像を変更するとコメントやnice! 欄のユーザ・アイコンまで変わってしまいます。この方法なら自由にプロフ欄の画像だけを貼り替えることが出来るわけです。定期的に別の画像に更新するのも愉しいかもしれません。ベーシック（白）のサイド欄の横幅は190pxですが、余り大きくするとnice!が下に表示されてしまうし、メイン記事欄とのバランスも悪い。100pxくらいが上限でしょうか？
＊
分割表示したカスタムペイン 2
〔3〕左のサイドバーを見て下さい。プロフ欄を含めて全部で８つのカスタムペインがあります。どうやったの？‥‥実は３つのカスタムペインを２分割して、見かけ上６つに見せているの。ソネ風呂は公式アナウンスしていませんが、9/20のメンテ以降、カスタムペインの字数制限が1000字から2000字以内に緩和されました。記述出来るスペースが２倍になっても個数は変わらない。ならば２倍に倍増してみようというわけです。カスタマイズ方法は簡単‥‥プロフ欄を偽造した際にタイトルバーを１つ消したでしょう。今度は、それを逆手に取れば良いだけの話。具体例を挙げましょう‥‥１つのカスタムペインを「FUROCK & MAUKIE 2006」と「SKNYS ｰ SCRAPS」の２つに分割しています。
<div class="sidebar"><div class="customPane-body">
‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥‥ ← Maukieのリンク・タグ
</div></div><div class="customPane-end"></div>
<h3 class="customPane"><span class="text">
<a href="https://sknys.blog.so-net.ne.jp/2006-03-03" target="_blank">SKNYS ｰ SCRAPS</a> 2006/10/13</span></h3>
「FUROCK & MAUKIE 2006」は従来通りカスタムペインの「タイトル」に入れ、「SKNYS ｰ SCRAPS」のタイトルは「本文」に直接埋め込みます。全く見分けの付かないカスタマイズでしょう？‥‥タイトルバーと本文（画像）、カスタムペイン間の縦スペースは、別途CSSで微調節しています。興味のある方は「ページのソース」を見てね。
12/19メンテ後に、増設したサイドバーが崩れてしまいました。下記のCSSで修正して下さい（2006/12/29）。
.sidebar h3{border-left:solid 4px #339900; font-size:10px; color:#339900; padding-left:4px; line-height:100%}
書式をコピーした際に不自然な半角スペースが生じる場合は消して下さい。可能な限りスリム化していますが、カスタムペインの字数制限（2000字以内）でCSSやHTMLタグが入り切れない場合は、他のカスタムペインに分散表示させれば大丈夫。CSSは<style>〜</style>で囲むのを忘れないように。上級篇のカスタマイズ方法はベーシック（白）に準拠しています。他のスキンには当て嵌まらなかったり、上手く行かない場合があるかもしれません。
＊
- 短期間に多くのカスタマイズ方法を発見してくれたマリオさん、ありがとう。カスタマイズだけでなく、自作スキンを友達に配布しているスーパー小学生のmana☆さんにも驚かされました。プロフ欄の矢印変更の書式はkovaioさんの「エヴァ・スキン」を参考にしました（早く記事をUPして下さい＾＾;）
- 10/18のメンテ後にプロフ・ページがリニューアルされるそうですね。ちょっと期待しています＾＾
- ブロクル（BlogCruiser）って面白そう。早速ミニ名刺をサイドバーに貼ってみました。いっそのことプロフ欄を非表示にして、「デカ名刺」をトップに貼っちゃうのもありかな＾＾
- プロフ欄をカスタムペインで擬装している場合は自動的に「マイプロフィール」にリンクされません。手動でタグを変更して下さい。本文記事の方も修正しました（2006/10/18）
- kovaioさんのリンク先がマリオさんのところになっていました。訂正して、お詫びします。ゴメンなさい
- ベーシック（白）のサイド幅は190pxですね。(a_a)*あおさんのところで確認しました。訂正して、お詫びします（2006/10/20）
- 12/19のメンテでCSSの一部を入れ替えたために、カスタマイズした箇所が幾つか乱れてしまいました。ソネ風呂ガーの皆さんが正しく対処出来るように〈猫オス〉シリーズの記事を修正しました（2006/12/29）
- 11/21のメンテでヘッダ・デザインが変更されました。〈猫オス〉でカスタマイズしている方はセレクタ名を#header.sbHeaderに変えて下さい（2007/11/23）
＊
original skins 1.2 / 2.2 / 3.2 / 4.0 / sknynx / 048
2006-10-16 00:21
コメント(19)
トラックバック(1)
こんにちわ～戻ってきました。。。
オリジナル・スキン 3も記事できたんですね(^-^*)
カスタムペイント増やす方法ワタシも今度やってみよう。。。
これからもますます楽しみにしています(*｀▽´*)
by maya (2006-10-16 13:44)
こんにちは、mana☆です。
とうとう１、２に続いて猫にでも出来るオリジナルスキン３ですね＾ｖ＾
しかもスーパー小学生だなんて・・・。
私にはもったいないお言葉です。
またプロフィール画像も大きく出来るんですね
時間が空いたらいろいろためしてみます。
by mana☆ (2006-10-16 17:47)
mayaさん、コメントありがとう。
お帰りなさい‥‥フィリピン〜セブ島に行って来たんだ。
日焼けしてピンク娘から小麦色女性に大変身？
デカ・プロフ画像は「バカスタマイズ」ですが、
カスタムペインの分割は気にいっています。
10/18のメンテ後に始まる新サーヴィス「BlogCruiser」の
友達申請機能がメールの代わりに使えるかも
‥‥クローズなメッセージ交換が出来るようになるみたいだよ。
（http://www.so-net.ne.jp/blogcruiser/）
by sknys (2006-10-16 23:02)
mana☆さん、コメントありがとう。
月刊「猫オス」になっちゃった＾＾
小５で、これだけ出来れば「スーパー・ガール」でしょう。
プロフ画像を大きくするだけでなく、
別の画像に簡単に入れ替えられようになります。
カスタマイズはプロフ・ページがリニューアルされた後でも遅くはないよ。
by sknys (2006-10-16 23:23)
sknysさん こんにちはっ！＾＾；
またまた取り上げていただき、ありがとうございます！
CSSの記事まだあげてないんですけど（ごめんなさいぃぃ）、ツナギといってはなんですが、アイコン変更の記事上げておきましたぁ～
ご賞味くださいまし。＾＾
kovaioもプロフページリニューアルは期待しておりますです。
by kovaio (2006-10-17 18:57)
kovaioさん、コメントありがとう。
プロフ画像の拡大は「バカスタマイズ」ですね＾＾
「エヴァ・スキン」のCSSで、やっとプロフ欄の矢印を変更出来ました。
CSSの記事がUPしたらTBして下さい！‥‥こちらからもTBしますから。
ソニースタイル風のファヴィコン（favicon）にしたいけれど、
ちょっとハードルが高いかも＾＾;
by sknys (2006-10-17 21:04)
sknysさん
#container書式なんですが、今、自分はコレ使ってません。
簡単だから、初心者向け書式ということで！
いいだしっぺなんですけどね(´ー｀)
sknysさんの記事のsknysphoto（写真枠）、使ってみたいと思いました。
確かに便利ですね～凄い！猫オス２ですね、コレは。
フィルター効果をプラスすると、おもしろいかも～
http://www.d1.dion.ne.jp/~tomomi_s/DHTML/filter.htm
マウスをのせると、白黒写真になるとか～
写真枠の外側をShadowプロパティで影を付けたり、
写真枠のカドに丸みを付けたりしたら、おもしろいかもですね～
んー考え中です。
最新記事一覧や最近のコメントの表示、上が少しかけてますよね～
地味な修正ですが、
#side h3{ padding: 1px 0px 1px 4px; }を追加してもいいかなと今日思いました。
最新記事一覧の前の縦棒の色、変えられるんですかね～？
うーむ、変えてみたいけど、よくわかりません。
あと、ヘッダーとバーナー部の文字が、ctrl＋マウススクロールすると、
文字が上下してしまいますよね～
これも地味な修正ですが、
#banner h1 a{ line-height: 1.5; }
#banner .lead{ line-height: 1.5; }
#header .memberMenu{ line-height: 1.5; }
#header p{ line-height: 1.5; }
を追加して、行間固定してもいいかなと今日思いました。
#header{ position: absolute; top: 2px; }（絶対位置指定）の書式、
自分でもびっくりしました。実はよくわかっていません。
なぜ、バーナー部の画像の下に隠れないのか、まぁ、いいや。
ベーシック（白）のサイド欄の横幅（186px）を広くすることもできますよ～
記事欄(main)の横幅も～
contentとcontainerも幅変更しないといけませんが、
widthプロパティ、 heightプロパティ、positionプロパティを駆使すれば、
できると思うのですが、時間かかりそうなので、おあずけ状態です。
#nice{ display: none; }ですが、これを追加するなら、記事の下の
【2006-09-21 23:00 nice!(7) コメント(11) 】の部分のナイスへのリンク
も消したいところですよね～。これも、よくわかってないんですよね～
実は、sknysさんのカスタマイズ、全部理解できてません。
プロフィール欄の画像、縮小したいなって思ってるんですけど、
いまいち理解できてないんですよね。style間に記載していく方法しか
やってないからかな？
何度か自分で見て、それでも分からなかったら、教えてくださいねヽ(´ー`)ﾉ
凝りだすと、疲れますよね～、カスタマイズ、
だから、ちょっとずつですよね～。
by (2006-10-18 23:37)
マリオさん、長コメントありがとう。
#containerは小中学生のユーザに使って欲しいですね。
CSSで一括制御するsknysphoto（写真枠）はNecoさんの丸コピです＾＾;
画像のフィルタ機能はIEだけにしか反映されません。
オンマウスで色が変わる技は〈氷の国の摩天楼〉て試してみました。
今まで全然気づかなかったけれど、
「最新記事一覧」や「最近のコメント」の上部が欠けている
（マージンが狭い）ように見えなくもない。
サンプル・スキンでも同じように表示されているので、ソネ風呂仕様かな？
.text {font-weight:normal} で、欠けているかどうか確認出来ますよ。
iBook 12”で見ると、漢字フォント（bold）が潰れちゃう！
‥‥サイドバーのタイトルを英字に変えたい（カレンダー → CALENDAR）
と思っているのですが、無理な注文でしょうか＾＾
.sidebar h3{border-left:solid 4px #339900}で、
左のカラーバーの色も変わります。
普段マウスを使っていないので分からないのですが、これもソネ風呂仕様？
「絶対位置指定」の意味は、マリオさんに質問しようと思っていました＾＾;
{position:absolute}の概念が分かり難い！
ベーシック（白）の横幅は現状のままで良いかな？
.posted a{display:none}で、nice!(0) が消えますが、
コメントやTBリンクも消えてしまうので表示しています。
プロフ画像の縮小はHTMLなので、カスタムペインで擬装したタグの数値
（width="72"）を変えるだけ！
このコメントは「上級篇」ですね‥‥マリオさん、お疲れさまでした＾＾
by sknys (2006-10-19 21:36)
おこんばんは～☆
左メニューの、カーソルに反応する猫、かわいいね～！
わたしも左メニューにマネっこしちゃおうっと☆ふふふ
by あお (2006-10-20 21:31)
・・・と、思ったんだけど
面倒臭くなっちゃったので、ときどきココきて
カーソルあてて遊ばせてもらいます（＾＾；
by あお (2006-10-20 21:35)
(a_a)*あおさん、コメントありがとう。
黒猫Maukieはソネ風呂に入浴出来ないので、ファイルを外サーバに置くか、
リンクさせてもらうかです。
リンク先を探していて理想的な場所を発見しました。
Mac Fan誌に「CYBER RED CARD」を連載しているＫ弁護士のところです。
ここが一番安全かも。
カーソルで遊んでやるだけでなく、拡大やドラッグも可能。
サイドバーに置いて可愛がってあげてね＾＾
by sknys (2006-10-20 23:43)
カスタマイズの質問なのでこちらに書かせていただきます。(質問ばかりすみません)
呼んでいるブログなどの文字色が変わりません・・・。
タグはすべてはまっているはずなのですが･･･。
NEWの色は変わるんですが、ブログの名前の文字だけ色が変わらないのです･･・。
もしかして、タグか足りないのでしょうか？
by mana☆ (2006-10-22 16:07)
mana☆さん、コメント遅れてゴメンなさい。
サイドバーのタイトル文字は下の書式で簡単に変わります。
.sidebar h3{color:#990000}
それよりもメイン記事が全部消えて、サイド欄に入っちゃってますよ。
どこかイジったでしょ？
‥‥もしかしてカスタムペインを分割しようとしたのかな。
メイン記事をカスタムペインの「本文」の中に入れちゃダメ！
とりあえず、元の状態に戻してみようね。
‥‥出来るかな＾＾;
by sknys (2006-10-23 21:16)
Σ(ﾟ□ﾟ)いやいや･･･。いじってません･･･。
メイン記事･･･。
記事ならちゃんと表示されているはず･･･。
とりあえずタグをすべて消して最初からやり直してみます。
おかしいな････。
ずいぶんいじってないのですが･･･。
りせっとしてきますね・・・。orz
by mana☆ (2006-10-24 18:50)
自然に、あんな風になっちゃったんだ！
ソネ風呂のバグというのも考え難いよね。
不思議だなぁ。
念のため、パスワードを変更しておいた方が良いかな。
先ほど見に行ったら、ちゃんと修復されている。
流石はスーパー小学生！‥‥ちょっと心配していたけれど、杞憂でした＾＾;
by sknys (2006-10-24 22:09)
すべて緑に戻したので大丈夫だと思います＾＾；
ｓｋｎｙｓさんのように、スキンの周りに線を入れてみました。
心配させてしまってごめんなさい；；
念のためパスワード変更しておきますね
by mana☆ (2006-10-25 21:10)
mana☆さん、お疲れさまでした。
こちらの環境（Mac OS X＋Firefox）からだと、
スキンの枠線が見えていません。
二重線（double）の太さは「3px」くらいの方が良いかも。
その他は全く問題ないと思います。
by sknys (2006-10-25 23:28)
sknysさん こんばんは～＾＾；
遅くなりましたが、やっと、まとめアップしました。（大汗）
合わせて<猫オス１><猫オス２><猫オス３><nice! を消す方法 2>にTBさせていただきました。＾＾
ソースはそのまま記述したのでコピペしてもらえれば使えると思うんですけど、初心者向けかと言われると。。。（＾＾；）
by kovaio (2006-10-31 03:28)
kovaio式オリジナル・スキンの記事がUPされるのを待っていました。
これで、こちらからもTB出来ます＾＾
画像を貼り替える方法は一見、面倒そうですが、
一度手順を覚えてしまえば（応用も利くし）簡単ですね。
作っていただいたオリジナル・ファヴィコンは気に入って使っています。
イメージ通りのデザイン（色！）なのでビックリしちゃいました＾＾;
by sknys (2006-10-31 21:24)