naotom weblog -7ページ目

いろいろなブログデザインを見てみると
すごくこったモノがたくさんありますが
反面こりすぎて見づらいものもたくさんあるように思います。
自分本位ではなく、見る人の立場に立ったデザインを考えなくては…
素人の私には、解っていてもそれが一番難しいのですが

そのことを踏まえて、記事を読みやすくするために、
スタイルシートを使って、記事のスペースを広げてみます。

具体的には次の図のイメージです。

との幅を広げると、記事の部分の窮屈な感じがなくなると思われます。
カラム（領域）のスタイルシートを変更するだけで、簡単に変更できます。

カラムについては前回の
『アメブロカスタマイズの道05～スタイルシートの編集開始です 』
をご覧いただくと、ちょっとは解るかもしれません。

ちなみに、現在選択しているブログスキンは、
●ブログデザイン：【カスタム可能】ブルー
●カラム数：3カラム・左右メニュー
※詳しくは、『アメブロカスタムしてます～2回目 』を見てください。

まずカラムのセレクタはどうなっているかを確認します。

上の図から、

の幅を変更する	→	#frame #wrap の横幅の値を変更する
の幅を変更する	→	#main の横幅の値を変更する

ということになります。

では、早速作業に取り掛かる為に
「CSSの編集」画面にします。（前回参照 ）

次に、「検索」コマンドで、「#ｆｒａｍｅ」セレクタを検索します。

※「検索」コマンドは、ブラウザによって実行の仕方が変わりますが、
基本は［Ctrl］キーを押しながら［F］キーを押してください。

検索すると、スタイルシートの下の方で見つかると思います。
そこからさらに下の方に、

#frame{
width:760px

と書かれている部分が発見できると思います。つまり、

「#frame」セレクタは、width（横幅）は760px（ピクセル）です。

という意味になりますので、この数値を変えてやればよいことになります。
今回は、今のブログデザインで多い「800px」に変更します。

同時に、
・「#wrap」は「#frame」と同じ横幅
・「#main」は「#frame」が増えた横幅分を追加変更します。

#frame{
width:800px;
margin-left:auto;
margin-right:auto;
}
#wrap{
width:100%;
}
#main{
width:440px;
float:left;
padding-left:10px;
}

←width:760px;

←※このままにしておきます

←width:400px;

※「width:100%」とは、「横幅は領域内の最大値」という意味になります。
今回の場合、「#frame」の中に「#wrap」があるので、
「width:100%」=「width:800px」という事になります。

では、「表示を確認」してみます。

全体的に少し幅が広がって、
その分記事のカラムも広がっている事がわかるでしょう。

確認できれば、「保存」してください。

次回は「ヘッダーを変更したい」と思っています

naotom weblog