猫にも出来るオリジナル・スキン 2.2 [s k i n]
〈猫にも出来るオリジナル・スキン〉の応用篇です。初めての人は先に〈猫オス 1.1〉基礎篇をお読み下さい。CSS書式をカスタムペインにコピペする方法は同じなので、既にオリジナル・スキン化に成功しているユーザには簡単なはずです。３つのテーマに分けてみました。
〔1〕ヘッダ変更する？ ←kovaioさんの書式をアレンジしました
〔2〕画像に枠を付けよう ←NecoYanagiさんの書式をアレンジしました
〔3〕サイドバー攻略！←mayaさんのリクエストに応えました＾＾
＊
〔1〕ヘッダ部分の文字は自分のリンクであるのと同時に、訪問してくれた閲覧者のリンクにもなっています。オリジナル画像のせいでリンク文字が見え難くなってしまうのは管理人として心苦しい。出来るだけ目立つ色に変更しておきましょう。kovaioさんが公開しているCSSを少々アレンジしました。下記の書式を<style>〜</style>の中に入れて表示中のカスタムペインにコピペ→保存して下さい。
ベーシック（white）
タイル地・スキン 2（heart）
#header a{font-size:10pt; color:#339900; text-decoration:none}
#globalMenu a, #memberMenu a.sbHeader a:link, .sbHeader a:visited, .sbHeader a:active{font-size:10pt; color:#339900; text-decoration:none} ←ヘッダ部分のサイズと文字色
#header p{font-size:10pt; float:right; margin:0px; padding:3px 12px 0px 0px; color:#339900}
#globalMenu{color:#339900} ←「blogトップ | 使い方 | Q&A」の縦線の色とサイズ
#header .memberMenu{float:left; font-size:10pt; margin:0px; padding:3px 0px 3px 12px; color:#339900}
#memberMenu{color:#339900} ←「○○さん」の文字色:とサイズ
#header .menuDecoration{background:url("/_images/blog/_×××/××××/0000000.gif") no-repeat left center; vertical-align:middle; margin-left:10px; padding-left:12px} .menuDecoration{background:url("/_images/blog/_×××/××××/0000000.gif") no-repeat left center} ←「矢印」の画像（凄い！）
「矢印」の変更は色を変えるのではなく、オリジナル・スキンと同じく「画像」を貼り替える方法。ソネ風呂「公式スキン・デザイン」の中から気に入った矢印の「画像を表示」させて保存〜アップロードしてCSSの（" "）内にコピーします（矢印でなくても良い）。ベーシック（白）のヘッダ文字は小さく、カーソルで触れないとリンク色に変わらないので、文字サイズを大きく、目立つ色に変更。「text-decoration:none」でリンク文字の下線を消しました。
＊
（2）画像に枠を付ける方法はNecoさんが詳しく紹介していますが、その前の肩ならしとしてプロフ画像に枠を付けてみましょう。プロフ欄をカスタムペインで擬装しているユーザは「border="0"」の整数値を変えるだけで簡単に枠が付きます。数値を大きくすると枠線が太くなるけれど、余り太いと葬式の「遺影写真」みたいになってしまうので、１〜３辺りが適当でしょう。枠色も変えられますが画像にリンクを埋め込むことで元スキンのデフォルト色が付きます（ちなみに黒猫をクリックすると「猫写真リスト」にジャンプ！）。詳しくは〈nice! を消す方法 2.1〉のHTMLタグを参照して下さい。
擬装したプロフ欄（no nice!）
.sknysphoto{border:outset 2px #999999; background-color:#f3f3f3; padding:10px; margin-left:41px} ←カスタムペイン内のCSS
<img class="sknysphoto" src="/blog/_images/blog/_×××/××××/0000000.jpg" />
↑記事内のHTMLタグ
上記の書式でトップの「ネコ写真」の枠線（border）の太さ、色、形状、枠線と写真の間の余白（padding）、写真の位置（margin）‥‥を一括して指定出来ます。このCSSをカスタムペインに忍ばせておけば、<img class="sknysphoto" 〜 />で指定した画像すべてに適用させることが可能（忍法「猫柳」）。本文記事内にHTMLタグを書き込む手間が省けるわけです。「sknysphoto」は任意の名称‥‥ユーザ各自で好きな名前を付けてね。
ネコ・ネイル（dotted）
オリジナル・スキンに枠を付ける方法も簡単。でもヘッダとバナー部分を画像分割している場合は一工夫しなければなりません。このままだとヘッダとバナーの境目に２重の横線が表示されてしまうから‥‥。この不具合を回避するには下記のように変更します。
#banner{border:solid 1px #999999} ←バナーだけに画像を入れている場合
#header.sbHeader{border:solid #999999; border-width:1px 1px 0px} ←画像分割している場合
#banner{border:solid #999999; border-width:0px 1px 1px}
ヘッダの下辺とバナーの上辺の値を「0px」にすることで、枠戦を消しているわけです。形状もデフォルト（solid）の他、破線（dashed）、点線（dotted）、２重枠（double）などに変更出来ます。たかが枠線と思われるかもしれませんが、枠線で囲むことで全体がシャープなり引き締まります。オリジナル・スキンが淡い色調だったり、背景の色合いと似ている場合などに効果的です。反対に濃い色合いの場合は枠線を白にするのも有効。色々試して一番気に入った組み合わせを見つけましょう。
＊
（3）サイドバー攻略はイジリ出すとキリがありません。お洒落でキュートなカスタマイズ方法を幾つか紹介しておきます。
カレンダー・アイコン（maukie）
- カレンダーの更新日（アイコン）を変更する方法もNecoさんが詳しく紹介しているように、元スキンによって色を変えるタイプと画像を貼り替えるタイプがあります（ここでは後者を紹介）。画像はソネ風呂の「スキン・デザイン一覧」のカレンダー・アイコンをヘッダの「矢印」と同じ方法で貼り付けます。
- 記事＆サイドバーのタイトル左にあるカラーバー色とタイトル文字色を変えるには？
- タイトル・カラーバーを横に長く表示するには？ .articles h3, .articles h2, .sidebar h3{padding:3px 15px 2px; background-color:#339900; color:#ffffff} →「擬装したプロフ欄」参照
- サイドバーや記事タイトルの上のリンク文字色を変えるには？
- サイドバーの文字色と記事タイトルの上の非リンク文字色を変えるには？
- nice! の文字色、枠色、背景色を変えるには？
- NEW の色を変えて点滅させるには？
- コメント欄や記事検索窓の枠色を一括して変えるには？
- オマケに「読者になる（RSSに登録）」の矢印とバナー色を変える方法も紹介しておきます。余り意味のないカスタマイズですが、ピンク好きのmayaさんのリクエストに応えました＾＾;
#calendar td.link{background:url("/_images/blog/_×××/××××/0000000.gif") no-repeat center center} ←更新日のアイコン
#calendar td a #calendar td.link a{color:#f0ffff} ←日付けのリンク色
.articles h3, .articles h2, .sidebar h3{border-left:solid 4px #339900; color:#339900}
.previousLink a, .nextLink a, .archive-links a, .sidebar a, .articles a{color:#70a000}
.sidebar, .archive-name{color:#339900}
.nice{color:#339900; border-color:#339900; background:#ff99cc}
.new{color:#ff99cc; text-decoration:blink}
*{border-color:#339900} ← *{ } はオールマイティ最強コマンド！
.rss-reader a{background-color:#ff99cc; padding:3px 15px 2px}
#rssRegist a{background:#339900; padding:3px 35px 3px 20px; margin-left:17px}
.rss-reader #rssRegist{background:url("/_images/blog/_×××/××××/0000000.gif")
no-repeat 0px 0px}
＊
- kovaioさんとNecoYanagiさんの記事、mayaさんのリクエストがなかったら、〈猫オス２〉は成立しなかったでしょう。３氏に大感謝！‥‥ありがとう
- ao*さんのスキンを見たら、ウチのサイドバーが幼稚に思えて来ちゃった＾＾;
- 9/20のメンテ後にカスタムペインの字数制限が2000字以内に緩和されました
- 12/19のメンテでCSSの一部を入れ替えたために、カスタマイズした箇所が幾つか乱れてしまいました。ソネ風呂ガーの皆さんが正しく対処出来るように〈猫オス〉シリーズの記事を修正しました（2006/12/29）
- 11/21のメンテでヘッダ・デザインが変更されました。〈猫オス〉でカスタマイズしている方はセレクタ名を#header.sbHeaderに変えて下さい（2007/11/23）
＊
original skins 1.2 / 2.2 / 3.2 / 4.0 / sknynx / 043
2006-09-16 00:47
コメント(31)
トラックバック(4)
sknysさん こんばんはっ！＾＾
丁寧に紹介いただいて、ちょっと恥ずかしくもありますが。（＾＾；）
さてさて、sknysさん
この記事は、ソネ風呂css攻略blogに認定です！＾＾
記事読んでたら、kovaioもリニューアルしたくなっちゃいましたもん。そのときは、参考にさせてもらいながら、サイドメニューもがっちりいじってみたいと思います。
こちらもTBさせていただきました。
by kovaio (2006-09-16 03:40)
kovaioさん、コメント２ありがとう。
ヘッダに画像を入れている人も、リンク文字までは変更出来ていない。
何とかkovaioさんの「ヘッダ攻略」の書式を見て欲しい
‥‥という思いで紹介しました。
「ソネ風呂css攻略blogに認定」してもらって赤面の至りです＾＾;
ちょっと調子に乗り過ぎたかな？
「サイドメニュー攻略」も愉しみにしています（TBは大歓迎！）。
by sknys (2006-09-16 20:10)
すごいね～！いろいろ勉強されてるね～！（＾＾
私も改造しようしようしようと思いつつも面倒臭くなってまだ・・・
やるときは一気にやっちゃうんだけど気分が乗らないと何も出来ない（＾＾；
今の私のサイドバーは、スキンを改造しているのではなく
別サーバーに設置したものをJavaScriputで呼び出してるだけなんですよ～
ソネブロのサイドバーって文字制限あるからその範囲内でやるのって
けっこう制限されちゃうんですよね（＾＾；
by あお (2006-09-19 01:27)
なんか丸一日つぶれてしまいそうで、尻込みしてしまいます(やってみれば、それほどでもないのかな?)
とりあえず、完全臓器移植はあきらめて、実益優先、Google AdSenseを移植してみました(笑)
by モバサム41 (2006-09-19 19:32)
ao*さん、コメントありがとう。
泥縄式に始めたら、こんなスキンになってしまいました。
CSSの構造はシンプルなので、ルールを覚えちゃえば、
記事中にHTMLを埋め込むよりも楽チンです（JavaScriptの知識はゼロ！）。
書式は可能な限り簡略化していますが、もう限界ですね。
ソネ風呂が字数制限を緩めてくれるか、
カスタムペイン数を増やしてくれると嬉しいけれど＾＾;
by sknys (2006-09-19 22:37)
モバサムさん、コメントありがとう。
元来インターネットは「フリーな世界」（Mundo Livre）
‥‥お金が絡むとロクなことはないと思っているので、
アフィリエイトの導入も保留しています。
Google AdSenseもジョークとしては面白いけれど、
「実益優先」以前にblogの美的外観を損なっているような‥‥。
一銭にもならないカスタマイズだからこそ、愉しいのでは？
by sknys (2006-09-20 20:34)
お久しぶりです。。。すっかり秋になっちゃいましたね。。。
ワタシがいろいろ教えていただいたときは夏ｗｗｗ
こちらこそリクエストに答えていただいてどうもありがとうございました○┓ﾍﾟｺ
by maya (2006-09-25 21:20)
mayaさん、コメントありがとう。
あれから気になってNecoYanagiさんに相談したら、
スクロールバーの色を変える書式を〈ブログタイトルの微調整～〉で
紹介してくれたよ。
でも、mayaさんのリクエストとは違うよね？
カスタムペインの字数制限が2000字以内に緩和されたので、
字数オーヴァーで悩む必要は余りないかも。
朝晩冷えて来たので、風邪引かないよう気をつけてね。
by sknys (2006-09-25 23:48)
えーえーえー
２０００字になったの？知らなかった。。。（ﾉ∀｀*）ﾍﾟﾁｮﾝ
お知らせしてる？
sknysさんも風邪引かないでくださいね(^-^*)
by maya (2006-09-26 00:31)
コメント欄 nice!欄 TB欄 念願の色変えしちゃいましたよ(*^-ﾟ)vｨｪｨ♪
カスタムペイントに文字が入ったので。。。いやっほーｗｗｗ
でもでも・・・しばらくココでｃｓｓばらさないでくださいね(^-^;
by maya (2006-09-26 16:12)
カスタムペインの字数制限緩和について公式アナウンスはされていません。
「ブログ教室」の開設に伴う仕様変更だと思われます。
カスタマイズで来て良かったですね＾＾
先日mana☆さんが遊びに来ました。
mayaさんみたいに、背景に画像を入れたいんだって♪
もしかして、お友だちかな？
by sknys (2006-09-26 21:16)
ブログに遊びに来てくれるて、お友達ではないです。。。
ワタシは十分大人なのでｗｗｗ小学生のお友達はいないかな(*￣m￣)ﾌﾟｯ
リヴリーはリヴのカテゴリーだけ見てる方が多いからかな。。。
by maya (2006-09-26 21:39)
失礼しました！‥‥ひょっとしてmaya＆mana☆姉妹かと思っちゃった＾＾
mayaさんが「十分大人」で良かったなぁ。
小５の女の子に、どう対応すべきか迷っていました。ヘルプありがとう。
リヴリー島にハナアルキ（鼻行類）が棲息しているんですね。
他にどんな生物が暮らしているの？
ヴァーチャル・ペット、それとも自分の「分身」に近いのかな？
by sknys (2006-09-26 23:49)
sknysさーん メール送りたいんですけど。。。
えーとどうすれば。。。？
by maya (2006-09-27 13:45)
メールアドレスは非公開にしているのですが、どうしてもと知りたい！
‥‥と言うのなら教えますよ。
mayaさんのところへ、後でコメントしに行きます。
使用しているブラウザがIE5.5以上なら、Necoさんの書式で
ブラウザのサイドバーの色も変わるそうです。
ピンク色に変わった？
by sknys (2006-09-27 23:36)
＞Necoさんの書式で
＞ブラウザのサイドバーの色も変わるそうです。
ここがちょっとよくわからないんですけど・・・
Necoさんの書式ってどこの記事？
ブラウザのサイドバーってどこを指してます？
すみませんわからなくて。。。
そそーメールしますねしばしお待ちください('-'*)ﾖﾛｼｸ♪
by maya (2006-09-28 20:21)
mayaさんも開いたことがある「ブログタイトルの微調整～」という
記事のコメント欄です。
サイドバーのリンクから飛んでね。
前にも書いたけれど、IE5.5以上のブラウザでないと反映されません。
秘密のコメント、削除してくれた？
‥‥主にApple関連やSo-net用のメルアドなので、毎日は見てないよ。
レスが数日遅れるかも＾＾;
by sknys (2006-09-28 23:49)
こんばんわ～「ブログタイトルの微調整～」行ってきましたｗｗ
でね。。。なぜだか反応しないんですよ。。。
IE５．５以上なんですけどね？で取っちゃいましたがやっぱりピンクに変えたいなぁー
そそそー秘密コメント消しておきましたよ週末にメール送れたらいいんだけど。。。
待っててくださいね(^-^*)
by maya (2006-09-29 20:03)
ウチはMac OS X＋Firefox環境なので検証出来ないの＾＾;
取り敢えず、下の書式で試してみてね。
body{scrollbar-base-color:#ff99cc}
それでも駄目なら、お助けNecoさまに訊いてみましょう。
sknys経由で来たと言えば、親切に教えてくれるよ
「秘密コメント」の消去ありがとう。
スパイ大作戦の指令みたいに、読み終ったら自動的に消滅すると
便利なんですが＾＾
by sknys (2006-09-29 22:26)
body{scrollbar-base-color:#ff9 9cc} でもダメでしたil||li ＿|￣|● il||li
by maya (2006-09-30 18:41)
{#ff9 9cc}の半角スペースを消してみた？‥‥これが原因で
オリジナル・スキンが表示されなかったことがあったんだ。
その時のトラブルはNecoYanagiさんが解決！
‥‥Win＋IEに関する件はNecoさまに訊いた方が早いよ＾＾;
1. mayaさんを真似て、コメント欄の背景色を変えてみた
2. マリオさんの書式でnice! 欄を消すことに成功！
3. TANさんのJavaScriptでゲスト・アイコンを変更
4. カスタムペインを増やして、黒猫と火狐のバナーを貼りました＾＾
by sknys (2006-10-01 12:44)
はじめまして、お邪魔致します！
kovaioさんのところから飛んで参りましたm(_ _)m(〃∇〃)ゞ
やってみたかったことが沢山で、感動してしまいました(≧∇≦)
いろいろと参考にさせていただきました！
ありがとうございました！！(*^-^*)
by shikayu (2006-10-06 10:55)
shikayuさん、初コメントありがとう。
kovaioさんのエヴァ・スキンはカッコ良いですね。
基礎知識に欠けるので、見様見真似でカスタマイズ
‥‥〈猫オス〉は「小物」で勝負かな？
こんなに喜んでもらえるなんて、感激！
mayaさんのリクエストの名残りで、一部ピンク化しています＾＾
下は小５女子から、上は高校生の母親まで
‥‥女性カスタマイザーの年齢層は結構広いですよ。
by sknys (2006-10-06 21:03)
sknysさん こんばんはっ！＾＾
カレンダー弄りましたので、またまたTBさせていただきました。
よろしくお願いいたします。＾＾
↑エヴァスキンお褒めの言葉ありがとうございます。＾＾
次の祭りへのプレッシャーがぁぁぁ。（＾＾；）
by kovaio (2006-11-17 22:37)
kovaioさん、カレンダーも攻略したの？
更新日アイコンは柄もの（猫の顔とか）にすると、
日付けが見難くなってしまう。
シンプルなシルエットにした方が映えますね。
年月を太字（bold）にして、月・火・水‥‥の色を変えましたが、少々不満
‥‥土・日や祝日、今日の日付けの色だけ変えられると良いのに。
次は「009-1祭り」かな＾＾
by sknys (2006-11-18 12:52)
（/TДT)/ S.O.S.
まずｺｺの記事を理解できるようになるための基礎知識を習得するにはﾄﾞｳすれば？A^ω^;)
またmayaﾁｬﾝを見習えとか云われちゃうんかなぁ(ﾉω･､)
正論て逃げ場がないからキライ（-""-；)
m(u_u)m参考文献希望。
by おきざりスゥ。 (2007-02-15 11:28)
おきざりスゥ。さん、コメントありがとう。
HTMLやCSSの「基礎知識を習得」していません＾＾;
‥‥泥縄式のスキン・カスタマイズなんですよ。
カスタムスキン＞カスタムペイン＞記事内‥‥というように、
CSSは下位の指定が優先されるの。
〈猫オス４〉の記事内にクッキー・スキンのCSSを入れているわけです＾＾
1. 下書き専用の新規記事を１つ作って保存し、その記事内にCSSを入れる
（<style>〜</style>で囲むのを忘れないように）
2. 上手く変更出来たら、そのCSSをコピーしてカスタムペインに貼る
3. 暫く様子を見て、これで良ければカスタムスキンに入れ（替え）る
──この方法がベストだと思います。
「HTML & CSS」というタイトルの解説本は、どれも似たり寄ったり。
『詳解 HTML & CSS & JavaScript辞典』（秀和システム 2005）や
『超図解 HTML & CSS辞典』（エクスメディア 2006）を
図書館で借りて参考にしました。
by sknys (2007-02-15 22:59)
(:_;)/ﾊｲ、せんせい質問です。
今スゥ。の表示しているスキンの<記事全体>の枠線についてです。
ＣＳＳを見ると/* Articles */の中は
border-left:1px solid #003366;
border-right:1px solid #003366;
border-bottom:1px solid #003366;
overflow:hidden;
↑となっているのに実際のブログでは左側の枠線が見えません。
これにはドノような理由と解決策が考えられますか？
また①公式ｽｷﾝからの改変と
②まずｶｽﾀﾑﾍﾟｲﾝか記事内に入れてみる、が実行できません。
どうすればイイでしょう？
by おきざりスゥ。 (2007-02-23 18:02)
カスタマイズ完了したんじゃなかったの？‥‥貪欲ですねぇ〜〜＾＾
３カラムはwidth:390pxに指定されているのに、
スキンの記事全体の横幅が558pxになっているからではないでしょうか。
.articles{width:558px}の数値を390px以下にすれば、
左の枠線が表示されるはずです。
デフォルトの３カラムはメイン記事欄が狭くなっちゃう。
それで皆さん「ワイド化」しているわけです
（詳しくはkovaioさんの記事を参照して下さい）。
ワイド化するとバナー部分も横長にしないとレイアウト的に収まりが悪い。
３カラム・ワイドに拡張リフォーム（大改造）しますか？
「実行」出来ないって、どういう意味なのかな？
公式スキンのCSSを丸コピして、
カスタムスキンのCSSと全置換するだけなんですが。
カスタムペインの中にJavaScriptを入れられたのに、
何でCSSが入れられないの？
表示中のカスタムペインの中にCSS（下の書式）を入れて保存する。
<style>
.articles{width:390px}
</style>
う〜〜〜ん、狭い＾＾;
by sknys (2007-02-23 22:50)
>何でCSSが入れられないの？
かたばみ荘の掲示板でも同じこと書いてたんですが
“公式スキンデザインの中からカスタマイズしたいサンプル・スキンを選”ぶの動作が分からなかったんですね。
やはり初歩的かつ根本的な勘違いをしていました。
<ソネ風呂の公式スキンをカスタムスキン化する>はスゥ。にも出来ることが解りました。
ほんと物分りの悪い生徒でゴメンナサイ。
ただ枠線は…
①表示中のカスタムペインの中にCSS（下の書式）を入れて保存する。
<style>
.articles{width:390p x}
</style>
②使用中のスキンの.articles{width:558p x}の数値を390pxに直接編集する
①②両方試しましｔが表示されませんでした…
不思議なのが枠線部分は５枚おなじに拵えてあるにも係わらず１枚だけ違う表示になってしまっているところです。
その部分は文字列も全く一緒なのに…
どうしてかしら？
by おきざりスゥ。 (2007-02-24 12:19)
全く同じCSSで一方に表示されて、
他方に表示されないというのは考え難いので、どこかの設定が違うわけです。
２カラムに戻して左の枠が正常に表示されるのならば、
３カラム化したことで生じた不具合でしょう。
メイン記事ではなくサイド欄に枠を付ける方法もありますよ＾＾
左サイドの場合は、こんな感じ↓
#side-a{border:solid 1px #336699; background:#f0f8ff; padding:10px}
枠線だらけになっちゃうと、堅苦しくなりますが、
トッップバナー、プロフィール画像、写真 etc.‥‥に付けると
額装したタブローのように引き締まります＾＾
形状もデフォルトの実線（solid）の他、破線（dashed）、
点線（dotted）、２重枠（double）など、色々あるので試して下さい。
PS. 枠線で囲まずに背景色だけ指定するとフェミニンな雰囲気になるよ＾＾
by sknys (2007-02-24 14:10)