スキンカスタマイズ(正規(笑))：NecoYanagiの未確定日記：So-net blog

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

日	月	火	水	木	金	土
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

RSS1.0 | RSS2.0

カスタムスキンの正式発表きたー！｜今年は、注文してみた(笑) ブログトップ

スキンカスタマイズ(正規(笑))　[HTML&CSSの小枝] [編集]

暫定版UPです。
ってことで、So-netから正式なカスタムスキンのご案内を受けて、イロイロ試していますよ。

しかしねー、他のブログサービスのカスタム方法を見たことがないから、あれ(どれ?)だけど、
なーんか、

「素人お断り！」

的な感じを受けるのはNecoだけかなー。

So-netのカスタムスキンについてのトリセツはココからどーぞ♪

まぁ、そんなウダウダはさておき、とりあえず、変更の方法とか載せておきますね。
で、トラブルはイヤなので、まずは「はじめる前に」を読んでください。

※と、多分、随時追加していくかも。
※この前のタイトル画像差し替えは、3コも記事あって、見にくかったし...σ(＾＾)

■はじめる前に
■カスタムのやり方(一読)
■タイトル画像の差し替え
■記事タイトル帯の変更
■サイドバーの項目の変更
■記事下のリンクの表示位置について(2007/02/03更新)
■全体のリンクの色設定変更(2007/02/03更新)
■カレンダー周りの設定変更(2007/02/26更新)
■nice!とコメントとトラバ欄の設定変更(作成中)

■その他、どーでもよいよーな変更(笑)(作成中)
■今、カスタムしていて、その設定を残したい！って方

■はじめる前に
本記事は、「So-net blog」のスキンカスタマイズ機能を利用して、「So-net blog」の各個人のブログを、より個性的に表現できるお手伝い的記事です。
本記事内で使用しているクラスID等は、「So-net blog」より提供されているモノであり、「So-net blog」以外のWebページに該当するものではありません。(偶然、該当しちゃうかも(笑))
また、本記事は可能な限り、NecoYanagiが調査していますが、予期せぬ事象が発生するかもしれません。(しないかも...)
編集時における、コピー&ペーストミスや、サーバーとの接続不良により書いたCSSが消されるのはNecoYanagiの責任ではありませんので、次の「カスタムのやり方」を読んでいただき可能な限り、不慮の事故対策をしてくださいねー。

まぁ、要は、あれだ、「個人の責任」ということで(笑)

で、リンクやトラックバックは記事本文が関係していれば、無問題ですので、コメントにでも書いていってくださいな。

ってトコかな？
(本記事の先頭に戻る)

■カスタムのやり方
まず、ログインして、「設定」を選択してもらい、「スキン」を選択し、カスタムスキンを選択してもらい、スキンから好みのを一つ選択(スキン作成)してください。
※本記事では、プレーンを使用しています。
すると、こんな画面になります。
で、赤丸な箇所がいわゆる「スキンの編集箇所」です。

で、ここで、ちまちま変更するのもよいんですけど、不慮の事故を避けるために、この編集箇所の中身を一旦コピーして、「メモ帳」等のテキストエディタにペースト(貼り付け)して、保存しておきましょう。
で、編集はその「メモ帳」で保存した中身に対して行うと、サーバーとつながっていなくても編集できます(どんな風になるかは確認できませぬがσ(＾＾))
で、変更を確認するには、「スキンの編集箇所」を一旦全部消して、
「メモ帳」の中身をペースト(貼り付け)してから、保存するとよいかもです。
ただ、画像を挿入するときは、「スキンの編集箇所」の方が楽なので、ソッチでした方がよいかと。
※あくまで、参考なので...。
(本記事の先頭に戻る)

■タイトル画像の差し替え
まず、CSS内から以下のような記述を発掘してください。

#banner {
height:140px;
clear:both;
}

で、画像を表示したいなー、というときは、画像をクリックすると

#banner {
height:140px;
clear:both;
background:url(/blog/_images/blog/pekepeke.jpg); /*背景画像*/
}

のようになると思います。
この段階で一旦、保存し、ご自分のブログを見ますとタイトルが変更されてます。

で、ここでのキーワードは、「#banner」です。
この#bannerの後に続くニョロカッコ( { } )の中に設定することが必須となります。
スキンによっては、「#banner」内の表記が異なるかもしれませんが、無問題ですので、ご安心を♪
(本記事の先頭に戻る)

■記事タイトル帯の変更
まず、CSS内から以下のような記述を発掘してください。

.articles-title {
font-size:small;
}

で、画像を表示したいなー、というときは、画像をクリックすると

.articles-title {
font-size:small;
background:url(/blog/_images/blog/pekepeke.jpg); /*背景画像*/
}

のようになると思います。
この段階で一旦、保存し、ご自分の記事タイトルの帯を見ますと記事タイトルの帯が変更されてます。

で、ここでのキーワードは、「.articles-title」です。
この.articles-titleの後に続くニョロカッコ( { } )の中に設定することが必須となります。
スキンによっては、「.articles-title」内の表記が異なるかもしれませんが、無問題ですので、ご安心を♪

で、問題があって、この記事タイトル帯のキーワードは「.articles-title」なのですが、似たようなキーワード「.archive-title」があるのでご注意を♪
(本記事の先頭に戻る)

■サイドバーの項目の変更
まず、CSS内から以下のような記述を発掘してください。

.sidebar-title {
margin:0;
margin-bottom:5px;
font-size:x-small;
}

で、画像を表示したいなー、というときは、画像をクリックすると

.sidebar-title {
margin:0;
margin-bottom:5px;
font-size:x-small;
background:url(/blog/_images/blog/pekepeke.jpg); /*背景画像*/
}

この段階で一旦、保存し、ご自分のサイドバーの項目を見ますとサイドバーの項目が変更されてます。

で、ここでのキーワードは、「.sidebar-title」です。
この.sidebar-titleの後に続くニョロカッコ( { } )の中に設定することが必須となります。
スキンによっては、「.sidebar-title」内の表記が異なるかもしれませんが、無問題ですので、ご安心を♪

で、
画像ではなくて、好みの色で塗りつぶしたいんだけど？
って方は、

.sidebar-title {
margin:0;
margin-bottom:5px;
font-size:x-small;
background-color:#6699cc; /*項目の背景色*/
color:#ffffff; /*項目内の文字の色*/
}

って感じ。
#の後の16進数で好みの色を指定してください。
また、So-netから簡単な色サンプルが掲示されているので、ソチラで確認してみてくださいねー。
So-net 色サンプル

で、好みの色や画像にして、文字色も変えたのだけれど、
「●●さんの記事を～」とかの●●の箇所の色に変化がないやんけー！

って方。

全くもってNecoも同様な意見です、と言いたいけれど、しょうがないのよね。
ってことで、以下の4箇所のリンク箇所も変更したい方は、
ご自分で↓を追記する必要があります。

/*プロフィール欄*/
#profile .sidebar-title a{color:#ffffff;}
/*～さんがコメントした記事*/
#commentedEntry .sidebar-title a{color:#ffffff;}
/*～さんがnice!と思った記事*/
#favoriteEntry .sidebar-title a{color:#ffffff;}
/*～さんの記事をnice!と思った人*/
#favoredMember .sidebar-title a{color:#ffffff;}

って感じ。

なのだけれど、最後の「～さんの記事をnice!と思った人」に関してはCSSの記述が他と異なるのかベースのスキンがずれているのか、反映されない。
試しに簡単なCSSを書いても反映されないので、
現在So-netへ問い合わせ中。
※なんか、スキンカスタマイズの質問に埋もれてそうだけど...。
「受理しました」的なメールも届いていないなにやら...(2007/02/01現在)
受理したメール来た！(2007/02/02現在)
修正したメール来た！
正しくは、#favoredMemberという回答をいただいたので、上の表記内容も変更しました。(2007/02/06)
(本記事の先頭に戻る)

■記事下のリンクの表示位置について
いきなり、CSS内に以下のような記述を追記してみましょう♪

.postDate{
float:right;/*表示位置調整*/
}

これで、記事の投稿日時の表示が右に表示されるかとー♪
で、すでにここでのキーワード「.postDate」が記述されている場合は、rightだと右寄り、leftだと左寄りになります。

で、
nice!とかコメントとかのリンクの色を変更したいんだけど？

って方は↓。

.posted a:link { color:#6699cc; }
.posted a:visited { color:#6699cc; }
.posted a:active { color:#6699cc; }
.posted a:hover { color:#6699cc; }

上の4つを追記、もしくは、すでに記載されている場合は、#以降の16進数で色調整です。
また、So-netから簡単な色サンプルが掲示されているので、ソチラで確認してみてくださいねー。
So-net 色サンプル

nice!とか、コメントとかの表示も右にしたいんだけど？

って方は↓

.posted{
margin-bottom:20px;
padding-bottom:20px;
border-bottom:1px solid #dddddd;
font-size:x-small;
float:right;/*表示位置調整*/
}

この段階で一旦、保存し、ご自分の記事下のリンクの表示位置を見ますと記事下のリンクの表示位置が変更されてます。

で、ここでのキーワードは、「.posted」です。
この.postedの後に続くニョロカッコ( { } )の中に設定することが必須となります。
スキンによっては、「.posted」内の表記が異なるかもしれませんが、無問題ですので、ご安心を♪

(本記事の先頭に戻る)

■全体のリンク色の設定変更
まず、CSSの最初の方に↓な感じで記載されていると思います。

a:link { text-decoration:none; color:#6699cc; } /*まだ見ていない*/
a:visited { text-decoration:none; color:#6699cc; } /*すでに見た*/
a:hover { text-decoration:underline; color:#6699cc; } /*マウスが重なった*/
a:active { text-decoration:none; color:#6699cc; } /*マウスで選択された*/

となっており、リンクの色で見ている人にイロイロな情報を示すことができます。
まぁ、Necoは全部一緒な色の方がよいので、同じ色なんですけどねσ(＾＾)
各行の#以降の16進数で色調整です。
また、So-netから簡単な色サンプルが掲示されているので、ソチラで確認してみてくださいねー。
So-net 色サンプル

で、
この記事の他の箇所で、リンクの文字色とか変更してるのがあるじゃん！

って方。

まずは、この設定をすることで、全体の設定をしちゃって、次に個別にリンクの色を設定していてですね、要は、CSSの設定は、「後勝ち」なんですよ。
この設定は一番最初の設定でCSSの下で設定されると、その設定が有効になるので、特に強調したいとかいう箇所のリンク色だけ変更する、とかいうコトもできるってことで...(説明ベタでスンマセン)。
(本記事の先頭に戻る)

■カレンダー周りの設定変更
・曜日の設定
・日付の設定

・曜日の設定
まず、CSS内から以下のような記述を発掘してください。

#calendar th {
height:20px;
width:20px;
font-weight:normal;
}

で、画像を表示したいなー、というときは、画像をクリックすると

#calendar th {
height:20px;
width:20px;
font-weight:normal;
background:url(/blog/_images/blog/pekepeke.jpg); /*背景画像*/
}

のようになると思います。
ちなみに、画像サイズは、20×20でちょうどとなります。

全部の曜日の欄を同じ色で塗りつぶしたいんだけど？

って方。

#calendar th {
height:20px;
width:20px;
font-weight:normal;
color:#FFFFFF; /*曜日の文字色*/
background-color:#FF0000; /*曜日欄の背景色*/
}

って感じ。

曜日毎に違う色で塗りつぶしたいんだけど？
って方。
例えば、日曜日の場合は以下。

th.sun {
color:#FFFFFF;
background-color:#FF0000;
}

↑の「th.sun」が記載されていない場合は、追記で、書いてある場合は、
#の後の16進数で好みの色を指定してください。
また、So-netから簡単な色サンプルが掲示されているので、ソチラで確認してみてくださいねー。
So-net 色サンプル

で、曜日毎なので、↑を元にドコを変更すればよいかというと、
「th.sun」の「sun」の箇所。
曜日の一覧はSo-netから提供されている「セレクタ一覧」を確認してみてくださいねー♪

・日付の設定
まず、CSS内から以下のような記述を発掘してください。

#calendar td{ /*投稿記事が無い箇所も変更*/
height:20px;
width:20px;
}

で、注意したいのが、↑の箇所はご自分の投稿記事が無い日付の箇所にも設定を変更してしまいます。
で、画像を表示したいなー、というときは、画像をクリックすると

#calendar td{ /*投稿記事が無い箇所も変更*/
height:20px;
width:20px;
background:url(/blog/_images/blog/pekepeke.jpg); /*背景画像*/
}

のようになると思います。
ちなみに、画像サイズは、20×20でちょうどとなります。

同じ色で塗りつぶしたいんだけど？
って方は↓

#calendar td{ /*投稿記事が無い箇所も変更*/
height:20px;
width:20px;
color:#FFFFFF; /*文字色*/
background-color:#FF0000; /*背景色*/
}

って感じ。

投稿記事がある時だけ色変更したいんだけど？

って方は↓。

#calendar td.link {
font-weight:bold;
background:#6699cc; /*背景色*/
}

#calendar td a{
color:#FFFFFF; /*リンクの文字色*/
}

って感じ。
二箇所に渡って変更する箇所があるので、これまた注意が必要ですな♪
(本記事の先頭に戻る)

■nice!とコメントとトラバ欄の設定変更
・nice欄に文章表示
・コメント欄の設定
・トラックバック欄の設定
・nice、コメント欄のアイコンの設定

・nice欄に文章表示
まず、CSS内から「nice」という単語を探して、その下に↓を追記してみてください。

#nice h4 {
background:url(/blog/_images/blog/pekepeke.jpg) no-repeat left center;
/*↑画像*/
padding-left:20px;
color: #ffffff; /*nice! 5とかの文字を白色に*/
text-align:right; /*nice! 5とかの文字を右端に寄せる*/
}

要は、Necoのblogで書いてある「Thanks for your choose!」という文字は画像なんです。
で、通常であれば、「nice 5」とかの文字があるんですけれど、
それは、背景色と同じ色(ココだと白なので、白色)に設定して
右端に寄せちゃって、画像と被らないようにしています。

まー、アレだ。

「苦肉の策」

ってやつ...orz

いままで、niceの個数表示ってあれだなーって思っていて、じゃあ、変わりに
ちょいとした文章を載せた方がよいかなーと、思っている方にとっては朗報♪
個数がキニナル人は、文字色だけ変えておくのもヨイ方法かも。(↓)

#nice h4 {
background:url(/blog/_images/blog/pekepeke.jpg) no-repeat left center;
/*↑画像*/
padding-left:20px;
text-align:right; /*nice! 5とかの文字を右端に寄せる*/
}

・コメント欄の設定
・トラックバック欄の設定
・nice、コメント欄のアイコンの設定
(本記事の先頭に戻る)

■その他、どーでもよいよーな変更(笑)
(本記事の先頭に戻る)

■今、カスタムしていて、その設定を残したい！って方
正規のスキンカスタムでなく、サイドバーにゲリラ的にCSSを書いているけれど、その設定をそのまま残したいって方。
１．そのままカスタムペインに残しておく
２．カスタムペイン内の<style>タグ内の記述を全てコピーして、カスタムスキンの編集箇所の一番最後にペースト(貼り付け)する。
※<style>と</style>は含まないでください＞２

のどっちかでよいかとー。
コピーとかペーストとかこわい人は、１で。
他のブログツール貼り付けたいって人は、２かな？
(本記事の先頭に戻る)

---参考文献---

スタイルシート辞典

作者: アンク
出版社/メーカー: 翔泳社
発売日: 2002/07
メディア: 単行本

2007-01-31 16:50 nice!(21) コメント(15) トラックバック(1)
共通テーマ：パソコン・インターネット

nice! 21

NecoYanagiさん、こんばんは。
ついにカスタマイズ公式サポートされましたね。
とりあえず倍増（5→10）したカスタムペインで、サイド欄を作り直しました。
自動更新されないなど機能制限が生じますが、見た目（デザイン）重視で
‥‥以下、お薦め度を３段階評価（◎○△）してみたよ＾＾;

「カレンダー」はアップル・アイコンで、お洒落に変身！
‥‥過去カレンダーが表示されなくなっちゃうので→△
「カテゴリー」は自由度が広がるので→◎
「最新記事一覧」もリンクを更新するだけなので→○

「最近のコメント」「○○さんがコメントした記事」は
コメント数が多いと手動更新（コピペ）が面倒ですが、
その分長く引用出来たり、ソネ風呂以外の記事にリンクを張れたりするので→△
詳細は２月UP予定の〈猫オス４〉で‥‥＾＾
by sknys (2007-01-31 20:48)

なんか難しそう・・・

んでもって５００記事だねｗ
by jasper (2007-01-31 23:24)

こんばんは。
タイトル画像作成の際にお世話になった者です。
いよいよスタートしたスキンカスタマイズ、NecoYanagiさんの解説を心待ちにしておりました。
続きの記事もとっても楽しみにしております(^^)
職場のほうでlivedoorブログを使っているのですが、あちらでは既成のスキンを自由にいじれるので、一からカスタマイズしなくても部分的にデザインを変えられて便利です。
ソネブロももう少し素人に優しくしてくれたらなぁと思います^_^;
by チヨロギ (2007-02-01 02:02)

う～～ん、なんとなくわかったけど…
もうちょっと様子見～～！！（←意外と小心者）
by じゅんぺい (2007-02-01 05:34)

＞sknysさん　こんばんニャ♪
やっとですねー♪
確かに過去カレンダーが表示されないのは、痛い所ですな。

まぁ、でもsknysさんなら、だいじょぶかな？(笑)

＞jasperさん
う～ん、やはりそーなってしまうよね...。

ぅぉ！ホントだ、500だ(今かよ(笑))

＞チヨロギさん　こんばんワ♪
そっかー他のブログサービスだと、全てのスキンに対して扱えるのか。。。
そうそう、用語説明の下手さ加減といったら...。
せめて、この箇所は、ブログだとこの箇所だよ、とかの説明が欲しかった。。。

＞じゅんぺいさん
うん、もう少し、充実したらの方がよいかも。
そしたら、時間が空いた時に一気にできますしね♪
by NecoYanagi (2007-02-01 17:42)

#favoriteMember .sidebar-title a{color:#ffffff;}
↓
#favoredMember .sidebar-title a{color:#ffffff;}
かもしれません。
確認はしていません。ソースを見たらそう思いました。
でも、So-netに問い合わせたのはnice!です。
So-netのミスでしょう。
by 通りすがりの者 (2007-02-01 21:33)

＞通りすがりの者さん
(!!)
どーやら、そのようよ(笑)
So-netから提供されているセレクタ一覧を鵜呑みにしたばっかりに...orz
指摘の内容はまた、So-netへと問い合わせをしました。

ご指摘ありがとうございましたm(_ _)m

記事中の設定はとりあえずそのままにしておこうと思います。
回答あり次第、編集する予定です。
by NecoYanagi (2007-02-02 13:36)

素人お断り･･･されました（爆）
設定の画面開いて固まってました(>_<)
ちょっと身辺落ち着いたら、Necoさんの説明読んでやってみます。
by barbie (2007-02-02 13:53)

ぼんやりしていたら、いつの間にやらそねっとさん頑張っていたのですね(^^;
時間のあるときによ～～～～～～～～く読んでチャレンジしてみたいと思います^^
by あやこ (2007-02-03 22:27)

＞barbieさん
うんうん、時間のあるときの方がよいですね♪

＞あやこさん
チャレンジしてみてください。
項目ごとにNecoの記事を読んでくれればよいかとー。
by NecoYanagi (2007-02-07 10:32)

Necoさん、こんばんにゃ。
「記事検索」＆「読者になる(RSSに登録)」の表記を英字に変更しました。
iBook 12"で見ると、漢字フォント（bold）が潰れてる！
‥‥もっと早く（カスタマイズ出来ることに）気づくべきでした＾＾;

〈猫オス４〉をTBさせてもらいました（事後承諾？）。
by sknys (2007-02-07 23:25)

初めまして！お陰様で何とか設定ができました。ありがとうございます！
公式説明ではお手上げだったので本当にありがたいです(*´ω`*)
by こるく (2007-02-11 20:23)

＞sknysさん　こんばんニャ♪
おー、記事読ませていただきましたよ。
確かに盲点でした、その方法。
遅れましたが、コッチからもTB貼りました。

＞こるくさん　はじめましテ♪
できましたか。
もう少し、内容を追加していくので、お暇でしたら読んでみてくださいねー♪
by NecoYanagi (2007-02-13 11:13)

どうしてヘッダの文字部分に画像が入らないのかな？
「プレーン」と「スタンダード１」で試してみましたが、
下のNeco式画像分割で綺麗に表示されましたよ。

#header{background:url ("〜") no-repeat 0px 0px; height:25px}
#banner{background:url ("〜") no-repeat 0px -25px; height:151px}

一番最初にヘッダとバナー部分をカスタマイズするとか、
CSSを全消去して真っサラな状態でフル・カスタマイズするとか、
公式スキンのCSSと総入れ替えするとか‥‥。

ソネ風呂の用意したカスタムスキンは変な設定が入っているので、
逆にレイアウトが崩れちゃう＾＾
ベーシック（白）のCSSを丸コピして「プレーン」にペースト（全置換）、
#containerでヘッダとバナーの画像を一括指定しています。

#container{background:url("〜") no-repeat 0px 0px; height:176px}

クッキー・スキンは悪戯ですよ＾＾;
by sknys (2007-02-13 21:23)

＞sknysさん
うん、Necoも試したソレ。

結局、containerにいれて、banner領域拡大しましたよ...。

なにやらですな。
理由はわかるのだけれど、これでは、カスタムスキンの意味が...orz
by NecoYanagi (2007-02-14 10:15)

コメントを書く

トラックバック 1

カスタムスキンの正式発表きたー！｜今年は、注文してみた(笑) ブログトップ

NecoYanagiの未確定日記

使ってないポイントはココへ

RSS更新について

NecoYanagi さん

スキンカスタマイズ更新情報

カレンダー

月別表示

カテゴリー

最新記事一覧

最近トラックバックされた記事

スキンカスタマイズ(正規(笑))　[HTML&CSSの小枝] [編集]

nice! 21

コメント 15

コメントを書く

トラックバック 1

今日の一冊

今日の一本

NecoYanagi さんがコメントした記事

NecoYanagi さんがnice!と思った記事

NecoYanagi さんの記事をnice!と思った人 (全287人)

読んでいるブログ（RSS）

記事検索

NecoYanagiの未確定日記

使ってないポイントはココへ

RSS更新について

NecoYanagi さん

スキンカスタマイズ更新情報

カレンダー

月別表示

カテゴリー

最新記事一覧

最近トラックバックされた記事

スキンカスタマイズ(正規(笑)) [HTML&CSSの小枝] [編集]

nice! 21

コメント 15

コメントを書く

トラックバック 1

今日の一冊

今日の一本

NecoYanagi さんがコメントした記事

NecoYanagi さんがnice!と思った記事

NecoYanagi さんの記事をnice!と思った人 (全287人)

読んでいるブログ（RSS）

記事検索

スキンカスタマイズ(正規(笑))　[HTML&CSSの小枝] [編集]