★90 秒で変わる！ブログレイアウトの横幅 -Case.2-

【第 142 話】 オリジナル★テンプレートに大きな画像を入れたい！- スタイルシート 改造 編 -


★ブログのカスタマイズは、ちょっとした着くずしから始まる。
それは思っていたより全然簡単だったりする。くずし過ぎたときにはまたヤリ直すだけだ。- by Lovely Wolf -


★いろんな事情で、3 カラムのテンプレートを選ぶことがある。だが、ソラマメのオリジナル★テンプレートの場合、記事に大きな画像を入れたときスクロールバーが出てしまう。オマケに記事がスクロールバーの下に隠れてしまうため、長い記事だと読む気さえもなくなる。

・・・ところが、スクロールバーが出るのにはワケがある。ブログ全体のレイアウトがぶっ壊れるのを防ぐためだ。


★レイアウトも大事だけど、画像も大事という欲のかたまりのようなキミにこっそり直し方を紹介しよう。

・・・えっ！これ、オリジナル★テンプレート3 カラムなのっ？ってリアクションいただければ、正解。
他のブログや、このブログの過去記事でも紹介してるから、いまさらなんだけど、まだまだお悩みの読者はいるようだ。


# 本日の目標の図




★上部メイン画像が大きくなっているのが気になる方は【第 136 話】を、センターカラム（記事部分）の横幅の調べ方は【第 138 話】をどうぞ。


# 【第 136 話】
<WEB URL> http://lovelywolf.slmame.com/e539026.html

# 【第 138 話】
<WEB URL> http://lovelywolf.slmame.com/e541011.html


★まずは、オリジナルテンプレート3カラム(サイドバー左右)をちゃっちゃと作ってください。




★先手、10 秒経過。

・・・本日は、ココだけをさわります。




★後手、20 秒経過。

・・・では、お待たせしました。センターカラムの横幅を変えるには、ズバリ、「container 」、「content 」、「blog 」、「main 」という4 つの<div> 領域の数値を変えます。赤字部分を修正する。


# Tips 1.作業する場所について

ソラマメの画面では作業しません。スタイルシートに保存されている内容を「Ctr」+「A」キーで全選択してから、「Ctr」+」「C」キーでコピー、テキストエディタ上に「Ctr」+「V」キーでペースト。


# Tips 2.修正ヶ所の探し方

「Ctr」+「F」キーを押し検索ウィンドウを出してから、「container 」、「content 」、「blog 」、「main 」の文字を検索するのが簡単。


# Tips 3.作業した記録の取り方

コメントアウト（/* ～*/ ）で囲んだ部分はスタイルシートが無効になる。


# センターカラムの横幅 330 px →700 px に変更する例（実質370 px 増加）


★ここまで、ジャスト90 秒経過。プレビューボタンを押して、出来あがりをチェックしてみる。

・・・最後の「main 」という領域は、自分の好みで調整すればいい。コメントやトラックバックの領域もあるから、必要ならそっちの数値も調整したらいい。


# Tips 4.プレビューの仕方

あらかじめ、テキストエディタで編集した内容を「Ctr」+「A」キーで全選択してから、「Ctr」+」「C」キーでコピーしておく。
さらにソラマメの「スタイルシート」の入力欄上にカーソルをあわせ、一度古い内容を「Ctr」+「A」キーで全選択してから、「Ctr」+「V」キーでペースト。

・・・間違っても、「トップページ」「個別記事」「アーカイブ」には入れないように。ご臨終とあいなります。
画像のプレビューはムリっだけどイメージどおりなら、保存してしまぇ。これで680 px 程度の画像までイケるハズ。