★ソラマメのオリジナルテンプレートの使い方 -Case.3-

【第 4 話】 ソラマメのオリジナル★テンプレートの横幅をブラウザサイズに合わせて表示させたい！- スタイルシート編集編 -


★お昼休みは、いいともにする？それとも、Wolf のソラマメデザイン講座する？それとも、やっぱLovely Wolf のSEXY SS いっとく？？？

・・・ぜぇんぶ！っていう欲ばりなキミッ！本日は、このSS からでも行きますかっ？- by Lovely Wolf -




★俺は自分の作品を陳列するためにソラマメにもどって来たワケじゃない。・・・しかし、手が勝手に動いちゃうんだよねぇ。・・・相変わらず、俺は何やってんだか。




★とにかく、このモデルさん、なにがスゴイかって？・・・撮るたびに表情が変わるのさ。




★撮影って楽しいですねぇ。・・・とりわけ、美女だと。




★ってか、美女しか撮らないですけど、何か？




★この場所は、彼女のお気に入りのようだ。




★田舎の娘っ子は、いりませんか？・・・こう見えても、彼女はリアルじゃアメリカ空軍高官の美人秘書。セカンドライフのステルス爆撃機が大好物だとか。




★hmmm...元カノによ～く似てるゼ。




# 撮影協力
Face Light： kaguya*
<Web URL> http://kgy.slmame.com/


★さぁて、楽しい前置きはこのくらいにしまして、そろそろ退屈なWolf のデザイン講座でもやりますか？

【ソラマメのオリジナルテンプレートの使い方 関連記事】
# Case 1.<Web URL> http://lovelywolf.slmame.com/e135832.html
# Case 2.<Web URL> http://lovelywolf.slmame.com/e136709.html


★前回までのあらすじ

管理画面　サイドメニューから、「ブログの設定」－「テンプレート」に入り、手順に沿って「オリジナル★テンプレートの作成」を選んでから、オリジナルテンプレート2 カラム（サイドバー右）を使って、テンプレートを生成したあと、ページの上部に大画像を入れたり、記事本体部分がブラウザサイズの横幅にあわせて伸び縮みしてくれるようにするところまでを前回終了した。


★そして、本日のお題はこれっ！
「オリジナルテンプレート2 カラム（サイドバー右）を使ったときに、ソラマメが固定的に記事本体部分の背景色をホワイトにしているので、記事本体部分の背景と画像の周辺の背景色をブラックにしてみる。」

・・・さぁて、うまくできるかなぁ？それでは、ここからスタート。




★いつものようにテキストエディタなどを使ってスタイルシートの以下の部分を修正し、プレビューしてみる。

・・・赤字部分を追加し、元々ソラマメが固定的に設定していたbackground-color: #FFFFFF（ホワイト）をコメントアウトする。（/*～*/ で囲む）
★あれっ！もう出来ちゃった？！




# Tips 3.
記事タイトルバーの色を変えたい場合には、赤字部分を追加し、オリジナル★テンプレート作成時に設定された背景色background-color: #000000（例ではブラック）をコメントアウトする。（/*～*/ で囲む）

記事タイトルの文字の色も変えるためには、オリジナル★テンプレート作成時に設定された文字色color: #ffffff（例ではホワイト）をコメントアウト（/*～*/ で囲む）し、、赤字部分を追加する。



★今度は、上部の大画像の上に高さ 100px のスペースを作り、背景色のブラックを表示してみる。

・・・赤字部分を追加するだけ。
・・・これで構図がまとまってきた。




# Tips 4.
「margin」と「margin-top」のちがい

margin の書き方は、以下のとおり。

margin： 10px 20px 30px 40px； ・・・上側に10px、右側に20px、下側に30px、左側に40px の空間をつくる。
margin： 10px 20px：・・・・・・・・・・・・・上下に10px、左右に20px の空間をつくる。
margin： 10px；･･･・・・・・・・・・・・・・・・上下左右に10px の空間をつくる。
margin-top： 10px；・・・・・・・・・・・・・・上側に10px の空間をつくる。

margin は一括で指定できる。margin-top は、上側だけ。
このほかに、margin-left (左側)、margin-right (右側)、margin-bottom (下側)などがある。

・・・本日はここまで。