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

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


★昨日から始まったLovely Wolf のソラマメデザイン講座は、今日で二日目。まだ始まったばかりだというのに、すでにヤル気無しってどういうことやねん？？？

・・・ってか、俺のAvatar はいつまで女とベッドインしてんだよっ！リアルなご主人さまの手伝いぐらいしろっちゅうの！




★内輪のモメごとはこのくらいにして、早速、始めていきたいと思いますが、本日のお題は、「オリジナルテンプレート2 カラム（サイドバー右）を使って、記事本文がブラウザのサイズに合わせて可変式の横幅100% になるようにしてみる。」です。・・・さぁて、うまくできるのかなぁ？ - by Lovely Wolf -


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


★管理画面　サイドメニューから、「ブログの設定」－「テンプレート」に入り、手順に沿って「オリジナル★テンプレートの作成」を選んでから、オリジナルテンプレート2 カラム（サイドバー右）を使って、テンプレートを生成するところまでは終わっているので、本日はここから。




★昨日紹介したとおり、このテンプレートは記事本体とサイドバーの幅をあわせて横750px になっている。まずは、テキストエディタなどを使ってスタイルシートの以下の部分を修正し、プレビューしてみる。

・・・画像サイズを指定するために、赤字部分を追加し、元々ソラマメが固定的に設定していたheight 200px （縦長）や、width 750px （横幅）をコメントアウトする。（/*～*/ で囲む）



★こんな感じでメイン画像の縦長を拡げることができたのだが、じつは横幅はまだ750px のままで切れてしまっている。・・・今日のこの記事を読んだ方、ラッキーですねぇ。




★750px 以上の大画像を完全に表示させるためには、まだやらなければならないことがあったのだ！

・・・ってか、昨日書き忘れてました。・・・orz

・・・スタイルシートの以下の部分で画像以外の領域も拡げてあげる必要がある。赤字部分にご注目！そのあとで、width 750px （横幅）をコメントアウトする。（/*～*/ で囲む）
・・・以上で横幅100% のブログのできあがり。画像の右半分は、ブラウザを拡げれば見えてきます。




★しかしブラウザをある一定の横幅サイズ以下にすると、このテンプレートのカスタマイズではサイドメニューが下に落ちてしまうという問題があることがわかった。実際、こんなに小さくして見る人はいないだろうから、無視できるレベルと思っているが・・・。




★しかし、ブラウザサイズを画面の最大にあわせると、今度は記事本体とサイドメニューの間が間延びしてるようになっているのが気になるゼ。




★しゃあないから、もう少しさわってみる？

・・・ってことで、以下の赤字部分が修正ヶ所。width （横幅）をコメントアウトしてみる。（/*～*/ で囲む）

・・・こっちもいっしょに修正する必要がある。以下の赤字部分が修正ヶ所。width 470px （横幅）をコメントアウト（/*～*/ で囲む）してから、80% に変更してみる。もしかすると、サイドメニューが下に落っこちるのを避けるために、70% くらいにしたほうがいいかも。

★おぉっ、めっちゃ簡単だ！

・・・こんな感じで、記事本文の部分もブラウザの横幅 に合わせて自由にリサイズできるようになった。




# Tips 2.
スタイルシートファイルは非常に長いソース部分からできている。修正するヶ所をいちいち目で追ってたら、ミスも起こしやすい。
そこで、以下の方法をおススメする。


# 1. 自分のデスクトップとかに保存したスタイルシートファイルをテキストエディタやメモ帳で開く。

# 2. Ctr＋Fを押す。

# 3. 検索ウィンドウが開くので、例えば、スタイルシートに記載されている見出し「/* 記事本文 */」をコピペしてから、検索してみると・・・。




# 4. あっという間に、見つけられちゃいます。