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

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

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

では早速実際にスキンの作成をしてみましょう！
・・・と言いたいところですが、まずは準備を。

＜準備＞

■ タイトル部に使う写真
タイトル部に使用したい写真を用意してください。
サイズに制限はありませんが、あまり大きいのはバランスが悪くなるのでお勧めしません。
だいたい高さ150pixel（ピクセル）くらいで、被写体が大きく写っているものがいいでしょう。

被写体が真正面を向いていればどこに配置してもおかしくないですが、もし写真を右端に配置したいなら被写体は左向き、左端に配置したいなら右向きの写真がいいと思います。これは被写体をそっぽ向かせないためです。

サンプルでは、この写真を使って、右端に配置したいと思います。

（225×150pixel）

■ 色
色合いを決めます。
ベースになる色、アクセントになる色、補助的な色、文字色、リンク色等を選んでください。
もちろん好きな色から決めても構わないですが、準備した写真の色から決めるのも一つの手です。写真が馴染みます。
もし色決めに迷ったら、写真の中にある色や写真からイメージされる色を選んでみてください。

参考：カラーサンプル

■ ベースカスタムスキン
ベースとなるカスタムスキンを選んでください。
真っ白や真っ黒のものより、多少色がついてるスキンのほうがわかりやすいです。

サンプルでは、「スタンダード２」のカスタムスキンを使います。

さぁ、次こそ実践編です！

お楽しみに！

【実践編】に続きます。

【目次】へ

コメント 14

えぇ！続くのか〜（お前に言われたくない？）
でもホントかほりんさん笑いのツボ師かと思ってたら
すご技ももってたんですね〜やるな〜(´･ω･lll)
かほりんマークも自作でしょ！
さすがおいらが見込んだかほりんさんだ(　>ω<)9　ﾖｯｼｬ!!!
by けろこ (2007-02-09 17:10) 

＊ けろこさん ＊

コメントありがとうございます！
いや〜、イイツッコミですよ。それ、待ってました♪
絶対「えー！」って言われると思ったんですが、思いの外準備編が長くなってしまったので分割しました。
つ、つぎこそは！つぎこそは実践編ですぞ！・・・たぶん。

かほりんマークは、じ・つ・は。
友人のダンナさん（CGクリエイター）に作ってもらったんですよ。しかも8年も前に。
私の書くかほりんマークは基本的にハダカですが、彼はハダカに出来ずバレリーナみたいな衣装を着せました。でもあれはバレリーナではなく、恐らくウェディングドレス。何故なら、結婚式の余興用に作られたものだから。

というわけで、私はたいしたことできません。(^^;;
by かほりん (2007-02-09 18:54) 

フムフム、昨日の基礎編よりこっちのほうが分かりやすい。
って、基礎がワカンナイんじゃダメじゃーん、ってかほりんさん思ったでしょう、、？（笑）
再度熟読します。プリントアウトしなきゃダメですね、ハイ。
明日が実践編かあ、、、（泣）実践いくまでに死んでしまいそうデス。
ガンバルンバ～。
外注できればいいのに。だれか作ってくれないかなー。（＾＾；；
by yukarin (2007-02-09 19:42) 

うんうん。写真の大きさはあれぐらいですね。
そしてそして続くのね～！
これができればオリジナルスキンができるもんね！
私のことだから、きっと時間がかかりそうだな。
でも頑張らなきゃっ（￣▽￣o）
かほりん先生（＾▽＾）ノ次回もよろしくぅ～
by モコ (2007-02-09 19:57) 

すっ、すごいデス！！
かほりんさん、詳しいんですね！でもって、前記事から、すごく丁寧に書かれていて親切♪　これだけ説明するには、相当熟知していないと説明できないよなぁ～と、一人で感心してました。かほりんさんは、ＷＥＢのプロでショ？　
ワタシも自分なりにカスタマイズしたくなったら、かほりんさんの記事にまたお世話になろっ。（って、今はその気ないのかょっ！って言われそうf^^;） どうもやり始めるまでが長～い性格なワタシデス。。
by free (2007-02-09 20:08) 

かほりんさん。こんばんは。
いよいよですね〜（笑）
ロビンの写真どれがいいか探してみたんだけど、なかなか
いいのがないのよね〜。ロビンはカメラ嫌いだからカメラ
目線のものがなかった〜。
初歩的なことですが、225×150pixelはどうやって作れば
いいの？？おバカな質問でごめんなさいね！！
大丈夫かしら？？落ちこぼれの気持ちがとってもわかるわ〜！！
by robinぱぱ (2007-02-09 20:17) 

被写体は左向き、左端に配置したいなら右向き・・・・
さすが！かほりんさん、やりますね～。
写真の台紙貼りしたことあります？
ウチの写真館で、スタッフにいちばん最初に教えること、それです(笑)

でもきっと・・・・いちばん時間がかかるのは、この写真選びでしょうね！！
by kanamixx (2007-02-10 01:53) 

＊ yukariinさん ＊

ナイス＆コメントありがとうございます！
一応基礎編は作りましたが、そっちが理解できなくても実践編で出来るようにわかりやすく作りました（いや、作ったつもり）。だから大丈夫！
ガンバルンバ〜！（笑）

「誰か作ってくれないかな〜」っていうのは、皆さん思ってるでしょうね。
私がこの練習用に作ったので良ければ、もちろん使ってくださっても構いませんよ！・・・って、私のセンスじゃyukarinさんはお気に召さないかな？(^^;;
by かほりん (2007-02-10 07:56) 

＊ モコさん ＊

ナイス＆コメントありがとうございます！
続きましたよ〜。寝る前にアップしておきました。
皆さんが思い思いのスキンをお披露目したら、訪問も楽しくなるな〜って思いながら作りました！

先生って・・・え、えへっ照れるなぁ。(￣▽￣*) ← 調子に乗っている
by かほりん (2007-02-10 08:01) 

＊ freeさん ＊

ナイス＆コメントありがとうございます！
すっかり愛犬自慢日記みたいなブログになっていましたが、私でもお役に立てそうな場面が出てきました！
といっても、私、Webのプロじゃないですよ〜。アマです、アマ！
ただ趣味でHPを作り始めてから8年経過しているので、経歴だけは長いです。(^^;;

これらの記事はなくならないと思うので、ご自分のペースで試してみてくださいね♪
あ。後でも見やすいようにカテゴリ分けておこうかしら？
by かほりん (2007-02-10 08:07) 

＊ robinぱぱさん ＊

ナイス＆コメントありがとうございます！
いよいよですよ〜！（笑）
写真選びって難しいですよね。
私もサンプルだから「じゃ、これでいいや」みたいな感じで選べましたが、本当にブログで使うとなったら、納得の行く写真じゃないとイヤですもんっ
目線ものがなかったら、外で遠くを見つめてるのとかどうです？物思いにふけってる風なのも、結構イケるんじゃないかと。(^^)b

写真の大きさですが。
robinぱぱさんのブログにお邪魔してちょっと写真を見させてもらいましたが、写真、小さくなってますよね？あれはどうやってやってるんでしょうか？？？
約180Pixelくらいの高さだったので、あれくらいでも大丈夫ですよ。
回答になってなくてゴメンなさい。PC環境が違うと、説明も難しくって。(^^;;
by かほりん (2007-02-10 08:12) 

＊ kanamixxさん ＊

ナイス＆コメントありがとうございます！
写真の台紙貼り？！したことないです。（爆）
もしかして私、写真館で働けるかしら。
というか、最近写真屋さんっていいな〜とか思ってます。
今やデジタル処理なんかも外せないじゃないですか。そういうの、楽しそ〜！って。
でも趣味でやるのと仕事でやるのとじゃぁ違いますよね。安易な考えですいません。(^^;;

写真選び！
今回はサンプルだったのでテキトーでしたが、ブログのタイトルに使おうと思ったら、この間kanamixxさんをお待たせしてしまったように長い時間かけて吟味すると思いますよ、私。
写真選びの次は、色合いかな〜。センスがないのでここで難航してしまいます。
CSSを知っていても、時間がかかる私。アハ。
by かほりん (2007-02-10 08:17) 

わぁ〜い。
こうやって準備から説明があると
yukiinuのようなおバカさんでも判りやすいよね
すごく助かる〜。
実践編も期待だな〜わくわく。
by yukiinu (2007-02-11 00:37) 

＊ yukiinuさん ＊

ナイス＆コメントありがとうございます♪
わかりやすいですか？よかった〜♪
実践編がお役に立てたらうれしいです！
by かほりん (2007-02-11 11:23)