【第 5 話】 ソラマメのオリジナル★テンプレートのブログタイトルとブログ説明文の位置を変えてみたい！- スタイルシート編集編 -


★大金をつぎ込んで絶景リゾートのコテージをレンタルしているにもかかわらず、この数日の間、目が覚めるといつもココにいる。

・・・しかし、WindLight が2 /　7 にバージョンアップしたせいで、俺が苦労して発見した画面の最適な設定値がぜぇんぶ、ぶっとんじまったゼ。くそリンデンめッ！撮影できない日々が続いているので、数日前に高画質で撮影できたSS でも載せておくか。




★ってことで、早速デザイン講座を始めてみよう。本日のお題は、「画像領域内にお行儀よく並んでいるブログのタイトル文字や説明文の位置を変更してみる。」です。- by Lovely Wolf -

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


★管理画面 サイドメニュー「ブログの設定」－「テンプレート」の「オリジナル★テンプレートの作成」をおこなう操作画面からは、「左揃え」「中央揃え」「右揃え」の3 種類しか設定できなかったはずだが、「ブログの設定」－「テンプレート」の「カスタマイズ」を選んでから、スタイルシートを設定すれば、1px 単位で上下左右への微調整が可能だ。




★参考までに上部画像領域のHTML ソースを見てみた。問題の「ブログタイトル」「ブログ説明文」は、赤字部分だ！
・・・ソラマメのテンプレートでは画像領域が、バナー（banner）という名前で指定されている。

<div id="banner">～<div> ・・・・・・・・・・画像領域
<h1 class="blogtitle">～</h1>・・・・・・ブログタイトル
<div class="description">～</div>・・・ブログ説明文




★「ブログ説明文」を画像領域の右下角に移動してみる。

スタイルシートの修正部分はココ！

・・・いつものように、赤字部分を追加し、オリジナル★テンプレート作成時に設定されたwidth: 200px とtext-align: left; をコメントアウトする。（/*～*/ で囲む）
・・・これで、「ブログ説明文」がブラウザのサイズに合わせて、右寄せで配置できた。




★「ブログ説明文」の位置を画像領域の下に移動してみる。

・・・赤字部分を追加する。（/*～*/ で囲む）
・・・オリジナル★テンプレートの操作画面では、「ブログタイトル」と「ブログ説明文」の順序を入れ替えることができないが、スタイルシートでそれぞれの領域のmargin-top を修正すれば入れ替えることもあっという間にできたりもするワケ。どうぞ、ご自分でお試しください。




★ついでに、文字の大きさも変更してみる。

・・・赤字部分を追加し、元々ソラマメが固定的に設定していたfont-size： ○○%； をコメントアウトする。（/*～*/ で囲む）



★ブラウザのサイズを引き伸ばすとこんな感じ。



# Tips 5.
「width」と「text-align」

width とtext-align の書き方

width: 100%;・・・・・・・・横幅100%
width: 730px;・・・・・・・・横幅730px

text-align: left;・・・・・・・左寄せ
text-align: center;・・・・中央寄せ
text-align: right;・・・・・・右寄せ

hmmm...どうやら、いろんな指定の仕方があるようだ。

---