カスタムスキンやってみる？ [カスタムスキン]
最近はちょっとお出かけモードはお休みなのでブログネタが。。。（車ネタも。。。）
代わりにスキン編集の記事をUPしてみました (^o^)
前記事はこちら。
以前、カスタムバナーを作ってみた方はほぼ使えない状態になってると思うのですが、今の設定ではスキンの中身を直接書き換えてスキンに反映されるようになっています。
管理ページに入ると右上にQ&Aがあるので簡単な設定編集方法（タイトル画像挿入など）はそちらを見て頂くとして、（探すのが面倒な方はこちらをどうぞ）こっちはスキンの中身の編集方法を書きたいと思います。
すでに現在使用しているスキンは分かっていると思うので①→②→③の順でクリックしていくとスキンの編集画面に入れます。私の場合はベーシックのイエローがベースとなっています。
編集していくと途中で訳が分からなくなったりするのでバックアップ用に同じスキンを用意しておいても良いですね。
スキンの編集画面に入って右クリックで全て選択→コピーでWindowsのアクセサリにあるメモ帳なんかにコピーしておくのもよくやる方法です。
で、編集画面に入ったら変更したいところを変えて行きます。
（前にカスタムバナー作った方は同じ文章を変更すればすぐ終わると思います）
私の場合は主に文章とリンクの色、タイトルの字体を変更しています。
もしくはこれ↓
他の色をクリックするとウインドウ（色を選択）が出るので右下の色のところの文字をコピーして使用しましょう。
それではスキン編集
まずはベース（変更後まで軽く流してください。。。）
@charset "UTF-8";
/*-----Common-----*/
a:link { text-decoration:none; color:#f8bb2a; }
a:visited { text-decoration:none; color:#f8bb2a; }
a:active { text-decoration:none; color:#f8bb2a; }
a:hover { text-decoration:underline; color:#f8bb2a; }
body {
background: #f5f4ed url("/_common/skins/13/images/bg.gif") repeat-y center top;
}
blockquote {
margin:12px;
padding:6px;
border:1px solid #fdec9f;
}
#container {
padding-top:10px;
width:890px;
background: url("/_common/skins/13/images/bg_mwide.gif") repeat-y center top;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#444;
}
/*-----Header-----*/
#header {
height:25px;
color:#f8bb2a;
}
#header p {
margin:0;
padding:3px 12px;
}
#memberMenu{
float:left;
}
#globalMenu{
float:right;
}
.menuDecoration{
margin-left:12px;
padding-left:12px;
background: url("/_common/skins/13/images/arrowR_small.gif") no-repeat left center;
}
#banner {
width:890px;
height:105px;
/* background:url("/_common/skins/13/images/main.jpg") no-repeat center top; */
background: url("/_common/skins/13/images/main_mwide.jpg") no-repeat center top;
clear:both;
}
#banner h1{
margin:0;
padding: 40px 20px 8px 20px;
font-family: Helvetica,Arial,sans-serif;
font-size: 20px;
}
#banner h1 a{
color:#ffffff;
}
#lead{
margin:0;
padding:0 20px;
color:#ffffff;
line-height:1.3;
}
変更後はこちら。（変更箇所を赤字で表示してます）
@charset "UTF-8";
/*-----Common-----*/
a:link { text-decoration:none; color:#483d8b; }
a:visited { text-decoration:none; color:#483d8b; }
a:active { text-decoration:none; color:#483d8b; }
a:hover { text-decoration:underline; color:#0000ff; }
body {
background: #f5f4ed url("/_common/skins/13/images/bg.gif") repeat-y center top;
}
blockquote {
margin:12px;
padding:6px;
border:1px solid #fdec9f;
}
#container {
padding-top:10px;
width:890px;
background: url("/_common/skins/13/images/bg_mwide.gif") repeat-y center top;
margin:0 auto;
line-height:1.4;
text-align:left;
color:#444;
}
/*-----Header-----*/
#header {
height:25px;
color:#f8bb2a;
}
#header p {
margin:0;
padding:3px 12px;
}
#memberMenu{
float:left;
}
#globalMenu{
float:right;
}
.menuDecoration{
margin-left:12px;
padding-left:12px;
background: url("/_common/skins/13/images/arrowR_small.gif") no-repeat left center;
}
#banner {
width:890px;
height:105px;
/* background:url("/_common/skins/13/images/main.jpg") no-repeat center top; */
background: url("/_common/skins/13/images/main_mwide.jpg") no-repeat center top;
clear:both;
}
#banner h1{
margin: 15px 0px 0px 20px;
padding: 0px 0px 0px 0px;
font-size:50px;
font-family:HGP創英角ﾎﾟｯﾌﾟ体,serif;
}
#banner h1 a{
color:#ffffff;
}
#lead{
margin: 0px 0px 0px 20px;
padding: 0px 0px 0px 0px;
font-size:12px;
font-family:Arial,sans-serif;
color:#ffffff;
}
長く書いてますが、変更箇所はこの程度です。
文章をコピーしてメモ帳に貼り付けて左右に2つ並べて見て行くと分かりやすいです (^_^;)
字体はエクセルなどで好きな字体を選んで記入すれば変更できると思います。（全てはできないと思いますが）
私の場合はこれ
これをスキンに反映するとこうなります。
変更前
変更後
こんな感じで変わります。
カスタムスキンやってみましょう～(^o^)
タグ：カスタムスキン
お久しぶりです。以前Mでお世話になったMAKOTO_Iです。覚えていますか？埼玉に転勤されたんですね。磐田から近いじゃないですか（近くもないか）・・・
実はですね今まで乗っていた92年式BMW E36 320ですが売却しちゃいました。燃料ポンプ、エアコン、ウインドーと立て続けに調子悪くなったので買取やさんにもっていったら６万円でした。
BMWやっぱ格好いいですよ。今でも欲しいです（ただ内装が・・）
そんでBMWの代わりを今月、千葉まで行ってきて購入しました。
車種は、ひ・み・つ・・・・
今月末納車なので来たらほうこくします。
ちなみに僕もブログ始めてみました。
難しいですね。
なかなか更新できないのと
「Ten's blog」みたいに格好よく出来ません。
ちなみにアドレスは
「Good choice」
http://blogs.yahoo.co.jp/mac_king55 です。
どうぞご教授のほど宜しくお願いいたします。
by MAKOTO (2008-03-23 22:51)
MAKOTOさん、お久しぶりです (^o^)
もちろん、覚えていますよ～
こちらこそお世話になりました。
E３６、乗ってたんだ～
新しい相棒、なにかな～(￣ー￣)ﾆﾔﾘ
多分、あれかな？
ブログ、褒めて頂きありがとう御座います♪
今後ともよろしくお願い致します。
by Ten (2008-03-23 23:09)
うひょーっ！！
まじめに地道にこつこつとってことですね(^_^)
by Heppe (2008-03-24 22:53)
Heppeさん、こんばんは。
もうちょっと分かりやすくできたらと思うのですが、これぐらいはテキスト編集じゃなくカスタマイズツール用意してくれよ～とSo-netに言いたいですね。。。(^_^;)
by Ten (2008-03-25 00:13)
むずい・・・・汗
ところで通常のスキンの横幅を広くしてトップに写真入れるのはどうしたらいいんだろう？？？？
以前なんとなくやってましたが・・・・偶然うまく言ったというか・・・・汗
メンテの後レイアウトがズタボロになって使ってません・・・涙
by Ｍａｋｏｒｉｎ(^_^)v (2008-03-25 12:57)
Makorin(^_^)ｖさん、こんばんは。
その場合は、多分ワイドスキンと同じサイズにあの辺を増やせばいいのかな？
やり方を検証しろとおっしゃってますね。。。(^_^;)
やってみようかな（できないかも～）
by Ten (2008-03-25 19:34)