オリジナルスキンを作ろう！【実践編】

＝ お知らせ ＝
この内容は一部下記に移転しました。（2008.08.11）
オリジナルデザイン講座 for So-net blog

【基礎編】【準備編】から続いています。

カスタムスキン「スタンダード２」のスキン作成を選んでください。
では、いよいよ実践編です！

注）ひとつの項目が終わるごとに、保存して確認してくださいね！

＜実践＞

（１）両端の色を設定する
bodyの背景色を変更してみましょう。両端の色が変わります。

body {
background:#F5DEB3;
}

（２）中央の色を設定する
containerの背景色を変更してみましょう。タイトル部以外の本文およびサイドバーの色が変わります。

#container {
width :770px;
margin:0 auto;
background:#FFF8DC;
border-left:1px solid #999999;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
line-height:1.4;
text-align:left;
color:#333333;
}

（３）最上部のリンク部分の色を設定する
headerの背景色を変更してみましょう。最上部のリンク部分の色が変わります。

#header {
height:15px;
padding:4px 10px;
background:#FFF8DC;
font-size:x-small;
color:#888888
}

（３）タイトル部の色を変え、画像を貼り付ける
bannerの背景を変更してみましょう。タイトル部の色が変わり、画像が表示されます。

#banner {
height:100px;
padding:0 20px;
background:#800000 url(AAA.jpg) no-repeat;
clear:both;
}

あら。ブログ名の文字と写真が重なっているし、写真の下が表示されていませんね。
では、写真を右端に表示し、画像を全部出しましょう。

その前に、画像サイズはわかりますか？
もしわからなかったら、ブラウザで画像のみを表示してみてください。
HPのタイトルが表示される部分に「○×□ピクセル」と表示されると思います。○が幅（width）で□が高さ（height）です。

私が用意した画像は225×150ピクセルなので次のように変更します。

#banner {
height:150px;
padding:0 20px;
background:#800000 url(AAA.jpg) no-repeat right;
clear:both;
}

注）「AAA.jpg」はファイル名です。JPGと書かれていますが、GIFファイルもOKです。
　　画像を保存したときのファイル名をここに当てはめてください。

（５）ブログ名の文字色を変更し、位置を調整する
タイトル部の背景色を変更したことによりブログ名やブログの説明文が見えにくくなったので、見やすい色に変更します。

#banner h1 a{
color:#FFFFFF;
}

#lead{
margin:0;
color:#C0C0C0;
}

また、ブログ名の文字位置が高さ方向中央に来るよう調整します。
サンプルではpadding-topを20→50pxに変更しますが、これは「だいたい」の数値です。タイトル部の高さを150pxに設定していますから、半分は75pxの位置となりますが、その下に説明分もあるので「50pxくらいがちょうどいいかな〜」という目分量といいますか。
なので、画像の大きさなどやバランスを考えて、決定してくださいね。

#banner h1{
margin:0;
padding:20px 0 5px 0;　ー（※）
padding-top:50px;
padding-bottom:5px;
padding-left:0px;
padding-right:0px;
font-size:x-large;
}

※ padding:○ △ □ ☆;
○ーtop　△ーright　□ーbottom　☆ーleft
この書き方だと混乱するので、敢えて個別設定方法に書き換えました。

（６）本文記事の背景色を変える
articlesの背景色を変更してみましょう。記事を表示している部分の背景色が変わります。

本文記事の背景色は白がお勧めです。
断然見やすいですし、どんな画像とも相性がいいと思います。

.articles {
width:498px;
padding: 12px 20px;
margin-bottom:10px;
border:1px solid #cccccc;
background:#FFFFFF;
overflow:hidden;
}

ちなみに、本文記事の文字色は「黒」でないほうがいいと思います。
黒はハッキリしすぎていて目を疲れさせます。ですから、読みやすくするために濃いめのグレーをお勧めします。

サンプルでは、カスタムスキン「スタンダード２」の
　　　　　　・・・（#333333）
をそのまま引き継いでいます。

（７）サイドバーのタイトル部分の背景色を変える
sidebar-titleの背景色を変更し、タイトル部分の背景色を変えます。
個人的には変えなくてもいいかな、と思った箇所ですが、勉強のために。

.sidebar-title {
margin:0;
padding:3px 5px;
margin-bottom:5px;
background:#F5DEB3;
font-size:x-small;
}

（８）リンク時の文字色を変える
リンクが貼られている文字の色を変更します。
元のカスタムスキンのCSSには全体、本文記事、サイドバー等数カ所に書かれていますが、すべて同じ色、同じ動きに統一したほうが、来訪者が「あ、ここ、リンクだな」ってわかりやすいです。

変更する前に、リンクに関する記述を簡単に説明します。
[a]とついているのは、リンクに関する定義を表します。その定義は次の4つがあり、意味はそれぞれ以下の通りです。

a:link　・・・まだ参照されてないリンク
a:visited　・・・すでに参照されたリンク
a:active　・・・マウスボタンが押されアクティブになっているとき
a:hover　・・・マウスカーソルがリンクの文字に重なっているとき

これらに主に設定されるのは、次のスタイルです。

color：テキスト（文字の色）
text-decoration：文字の装飾
　→ none（装飾なし）／underline（下線）／line-through（打ち消し線）

サンプルでは、すべてのリンク文字を統一し、マウスカーソルがリンク文字に重なっている（hover）時のみ下線を引く設定にします。（全3箇所）

/* 共通 */
a:link { text-decoration:none; color:#800000; }
a:visited { text-decoration:none; color:#800000; }
a:active { text-decoration:none; color:#800000; }
a:hover { text-decoration:underline; color:#800000; }

/* 本文記事内 */
.articles-body a:link { color:#800000; }
.articles-body a:visited { color:#800000; }
.articles-body a:active { color:#800000; }
.articles-body a:hover { color:#800000; }

/* サイドバータイトル */
.sidebar-title a:link { color:#800000; }
.sidebar-title a:visited { color:#800000; }
.sidebar-title a:active { color:#800000; }
.sidebar-title a:hover { color:#800000; }

但し、ここはサンプルでは変えません。（デザイン的な問題で）

/* RSS登録 */
#rssRegist a:link { text-decoration:none; color:#fff; }
#rssRegist a:visited { text-decoration:none; color:#fff; }
#rssRegist a:active { text-decoration:none; color:#fff; }
#rssRegist a:hover { text-decoration:underline; color:#fff;}

ん〜、少し全体的に赤くなりすぎたかな？

（９）カレンダーの色を設定する
calendarを変更し、更新日の背景色を変えます。

#calendar td.link {
background:#F5DEB3;
font-weight:bold;
}

以上です。
思った通りに出来たでしょうか？

私の出来映えは・・・まぁまぁかな？完成品はこちら。

ちなみにサンプルで使用した色は、
　　　　　　・・・maroon（#800000）
　　　　　　・・・cornsilk（#FFF8DC）
　　　　　　・・・wheat（#F5DEB3）
　white（#FFFFFF）、グレー（数色）
です。

尚、今回紹介したサンプルでは「２ペイン右」および「３ペイン」の確認はしていませんので未対応とさせていただきます。

次回は、デザイン的な装飾などを加える応用編といきましょう！
例えば、こんな感じ？！

お楽しみに！

【目次】へ

コメント 19

わかりやすすぎです！！
こんな図解入り、、、しかもＢＥＦＯＲ＆ＡＦＴＥＲ付ですよ。
売れますよ。。絶対。。

このへんがいちばんわかりづらくて、手抜きしちゃうところですよね。
私も、そうですもん！！
そして次回予告のスキン可愛いです。
このタータンチェックなんて、画像提供されたらどうでしょう？？
by kanamixx (2007-02-10 01:59) 

すごいですね。熟知してる人ならではの説明です。
私には難しいですけど、時間をかけて頑張ります。
先生よろしくお願い致します。
スキン作りの際には、通常の記事更新は暫く封印して（笑）、徹底的にスキンをやらないとダメだろうな、私は。(^∇^)ｱﾊﾊﾊﾊ!
NEWスキン、とても可愛らしいですね。フランビー君の画像もカワイイです。
by yukarin (2007-02-10 02:37) 

＊ kanamixxさん ＊

ナイス＆コメントありがとうございます！
寝る前に更新したら、夜更かし隊のお二人が早くもコメントを入れてくださってる！（笑）

これ、わかりやすいですかねぇ？私、お役に立てそうでしょうか？
え？売れますか？・・・それは言い過ぎでしょう！（爆）

タータンチェック、誰か使ってくれますかねぇ？
だったら喜んで提供しちゃうんですけど。
うちの布団の柄が元なんですけど・・・いいですか？（バラしちゃった！）
by かほりん (2007-02-10 08:23) 

＊ yukarinさん ＊

ナイス＆コメントありがとうございます！
夜更かし隊2号さん、おはようございます。（笑）
うんうん、もしスキンを変更するときは、徹底的にそれに時間かけたほうがいいですよ！だから時間のあるときにゆっくりと〜がいいと思います。
プロゴルファーのご主人様にもたまには練習を休んでもらって、一緒にやるとか。(^^)b

サンプルのスキン、テキトーにデザインしたわりに私も気に入っています。
フランビーの画像もかわいいでしょ？これ、誰も言ってくれなくてさみしかったの。(；＿；) アリガトー♪
ドッピーちゃんの画像は、イイのありました？楽しみにしてますね！
by かほりん (2007-02-10 08:28) 

呪文のようです( ￣w￣-)
実は結構前にHP作り興味があって挑戦した事があったんですけど
しっかり『挫折』いたしました〜d(○-Å- とほほ
今ではソフトも買い込んだ本も化石に・・・
う〜〜〜〜〜んまた挑戦してみようかな・・・・
サンプルだんなさんのふとんだったんですか！？
もの凄くかわいいですよ〜（ふとんじゃないよ）
とんぼ玉にトイカメラにスキン編集・・・・
今年は忙しくなりそうですε＝ε＝(*｀д´)ﾉ
by けろこ (2007-02-10 08:54) 

＊ けろこさん ＊

コメントありがとうございます♪
HP、私は未だに「手書き派」です！
ソフトを使うと、逆に思い通りにならなくてイヤなんですよ〜。
本もうちに大量にありますが、めまぐるしく進歩してしまい、その本もだいぶ役立たずに。がびーんって感じです。(^^;;

布団の写真、見ます？（笑）
by かほりん (2007-02-10 09:03) 

本当、すごくわかりやすくてとてもいいです（￣ｖ￣ｄ）
でも私の頭がついていけてないですね(笑）
それでも何度も何度も読んで頑張りますね。
こんなに色々な設定ができるようになっていたのですね～
今更ながら知ってしまいました。
かほりんさんのブログ、このスキンに変更するんでしょうか？
可愛いですよね♪
また次回を楽しみにしてます
by モコ (2007-02-10 21:51) 

かほりんさんってばほんとにパソコン教室の先生ですね！
わかりやすくて、とても参考になりますよ。
スキンの色をもう少しやさしい色合いに変えようかと思ったのですが、くらべたら今の色が元気印のクッキーに似合ってる感じなのでやめました。へへ…。
でも今回の実践編を参考にタイトル文字の位置を変えることができましたよ。ありがとー！
チェックかわいい～♪お布団の柄がもとってことはオリジナルなんですか？次も速く見たーい。
そしてフセ・フランビーほんとにかわいいですねー。思わずグリグリしたくなっちゃう♪このかわいいスキンを使う予定はないんですか？
by バウムクーヘン＠ (2007-02-10 23:02) 

すっごい！！すっごい〜っ
これ、判りやすすぎでしょう！
うん、うん、ホントに私にも出来そう〜
今はさらっとやり方だけ読ませてもらってますが
頑張って作ってみたいと思います〜
もぉ〜さすがかほりんさん
お礼にyukiinuから熱いちゅー♥
・・・あ、ちょっと、どうした？キャ〜大変！！かほりんさんが〜っ
by yukiinu (2007-02-11 00:44) 

＊ モコさん ＊

ナイス＆コメントありがとうございます♪
小難しそうに書いてますけど、赤文字のところだけ頑張れば変更出来ますよ！
私は、実は一番難しいのは色決めじゃないかと思ってます。同じピンクでも、いろんな色がありますからね〜。
ポイントは「薄いと思った色も広範囲になると結構濃いぞ」というところでしょうか。(^^)b

サンプルはあくまでもサンプルで、スキンは現状のままで行きますよ。
サンプルで良かったら、誰か使ってくれないかな〜って思ってます。(^^)
by かほりん (2007-02-11 11:29) 

＊ バウムクーヘン＠さん ＊

ナイス＆コメントありがとうございます！
パソコン教室の先生ですか！こういう楽しい変更だったら、どんどん教えちゃいますよ！(^^)b
バウムクーヘン＠さんのスキン、ほんとにかわいいと思いますよ〜♪
もしバウムクーヘン＠さんがあの色合いじゃなかったら、私もサンプルは絶対にオレンジにしてたと思いますもん。
クッキーちゃんにピッタリだから、そのままがいいと思うゎ♪
早速実践編がお役に立てたの？うれし〜♪

チェック柄はオリジナルですよ。このサンプルのためだけに作りました。布団を参考に！（笑）
今まで背景画像ってストライプくらいしか作ったことなかったので、ほぼ初挑戦！デス。(^^)v
このサンプルスキンは使う予定はないです。
実はこのブログってHPの一部になっていて、サンプルのスキンにしちゃうとものすご〜く合わないんですよ。(-_-;;

フランビーの写真、かわいいでしょ♪
待ってたの、そのこ・と・ば！（笑）
by かほりん (2007-02-11 11:39) 

＊ yukiinuさん ＊

ナイス＆コメントありがとうございます♪
わかりやすいって言ってもらえた♪v(^^)v
あまり深く考えずにとにかくやってみるっていうのが一番の近道かもです。
失敗したら削除してまたイチからやればいいだけだし〜♪
もし良かったら時間のあるときにでもトライしてみてくださいね！

お礼は・・・えっと・・・ユッキーちゃんならともかく・・・ハイ、遠慮させていただきます。（キッパリ）
by かほりん (2007-02-11 11:43) 

かほりんさん。こんばんは。
とっても親切な説明ですね〜。
ロビンのケガにより完成するには、かなりの時間がかかり
そうです。
一度読んだだけじゃ理解できない私の頭は、何度も熟読して
みますね。質問するかもしれませんので覚悟していてね。
フランビーくんかわいい〜。これなら絶対購読者倍増ですね☆
by robinぱぱ (2007-02-11 22:48) 

＊ robinぱぱさん ＊

ナイス＆コメントありがとうございます！
先ほど記事を読んでビックリしましたよ〜。
今はロビンちゃん優先ですから、ね！
質問おっけ〜ですよ。但し、私がわかることでしたら。(^^)b
by かほりん (2007-02-12 00:10) 

＊ シロコメさん ＊

ナイスありがとうございます！
by かほりん (2008-04-25 18:05) 

＊ mitukiさん ＊

ナイスありがとうございます！
by かほりん (2008-04-25 18:06) 

＊ はりゅ？さん ＊

ナイスありがとうございます！
by かほりん (2008-04-25 18:06) 

＊ 瀬都さん ＊

ナイスありがとうございます♪
by かほりん (2009-10-26 09:31) 

＊ YAOJIMAさん ＊

ナイスありがとうございます！
by かほりん (2009-12-20 16:27)