【応用編】本文記事欄の幅を広げる

【基礎編】【準備編】【実践編】から続いています。

【お題】本文記事欄の幅を広げる

【完成形】

【変更】
サンプルで使用したスタンダード２のカスタムスキンに設定されている本文記事欄の幅では、今までのスキンと比べて幅が狭く過去の記事のレイアウトが崩れてしまうとお悩みの方のために、本文記事欄の幅を広げる方法を記します。

サンプルでは、スタンダード１と同じ本文記事欄の幅に設定します。

サンプルの元の幅：498px
スタンダード１の幅：558px

（１）本文記事欄の幅を広げる
articlesのwidthを、広げたい幅に設定します。
サンプルでは元の幅から60pxほど広げ、558pxにします。

.articles {
width:558px;
padding: 12px 20px;
margin-bottom:10px;
border:1px solid #cccccc;
background:#FFFFFF;
overflow:hidden;
}

これで本文記事欄は広がりましたが、その親の幅が広くなっていないため、記事が切れてしまっています。
サンプルでは「靴下写真」という文章の「下写」部分が見えていません。

（２）本文記事全体を乗せている部分（メインカラム全体）の幅を広げる
mainのwidthを（１）で広げた差分だけ広げます。
サンプルでは本文記事欄を60px広げたので、540px→600pxに変更します。

#main {
width:600px;
overflow:hidden;
}

記事はすべて見えているので本文記事の幅の設定はこれでOKですが、サイドバーが消えてしまいました。
でも焦らないでください。下にスクロールすると、ちゃ〜んとありますから。

これは、本文全体の幅（600px）とサイドバーの幅（190px）を足した幅が、中央部の設定している幅（770px）を超えてしまったために起こった現象です。

（３）サイドバーと本文全体を乗せている部分（中央部）の幅を広げる
containerのwidthを（１）で広げた差分だけ広げます。
サンプルでは本文記事欄を60px広げたので、770px→830pxに変更します。

#container {
width:830px;
margin:0 auto;
background:#FFF8DC;
border-left:1px solid #999999;
border-right:1px solid #999999;
border-bottom:1px solid #999999;
line-height:1.4;
text-align:left;
color:#333333;
}

これで完成です。

【注意事項】
上記では最初に本文幅を決定してからその差分ずつ二箇所の幅を広げる方法を取りましたが、もしかするとこれで思い通りのレイアウトにならない場合があるかもしれません。
その場合、個々でwidthの値を微調整してください。

また、本文記事欄の幅に制限はありませんが、So-netブログで提供されているスキンの本文記事の幅にはそれなりに意味があるので、あまり大きすぎない程度に設定してください。
「それなりに意味がある」というのは、デザイン的な面でもそうですが、皆さんが使っているPCの性能（画面の大きさや解像度など）により見え方が違ってくるので、どのような環境でも見やすいよう設定されているということです。

特に３ペインに設定されている方は両端にサイドバーがあるために本文がかなり狭くなっていると思いますが、設定された幅以上に本文記事欄を広げますと横スクロールバーが見えるようになってしまい、訪問してくださった方が使い勝手が悪かったり見栄えが悪かったりするので、そのあたりのことも考えて設定するようにした方がいいと思います。

以上。

【目次】へ

コメント 23

ほ～～！！　前記事くらいからお役立ち情報になってますね。
私も皆さんのブログを見ながら、どうやってるのかなぁって思ってたんです。　そのうち挑戦してみますね！！　ちょっと自分でも楽しみ～♡
by AZUL (2007-03-03 15:53) 

おー！予告していた記事がもう完成したのですね！スゴイ！
私はカスタムスキン1を使用しているのに、まだ以前のスキンよりもほんの少し（ここ重要）狭かったため、記事幅を広げたのですが、記事幅そのものを広げるのが面倒で、記事内のマージン（パディング）を変える方法
にしました。
paddingの指定を20から15に変えました。
「あと少し！」という程度ならこれで対応可能ですよねっ。

↑の「かほりんテキスト」があれば、もう誰も迷わずにスキン作成できますね！！すごいわー。
by yukarin (2007-03-03 16:37) 

わ～すごい!!こんな事ができるんですね。
本文記事欄の幅は、ちょっと狭いかもって思っていたので私も、やってみなくっちゃ。
かほりんさん、またまたありがと～♪
by モコ (2007-03-03 18:41) 

またバージョンアップしてる！！
しかも本とは違って動く映像込みだからなおさら分かりやすいと思うし、ある意味新しいテキストだよ！！
かほりん・・・おぬしなかなかやるね〜ｄ(´･ω-*)
これからの時代のハウツー本だよこれって！！
by けろこ (2007-03-03 21:05) 

＊ AZULさん ＊

コメントありがとうございます♪
お。AZULさんも興味を示したっぽい♪(^^)
まとまった時間があるときに集中してやるのがお勧めですよ〜♪
私も楽しみにしてますね！
by かほりん (2007-03-04 10:14) 

＊ yukarinさん ＊

ナイス＆コメントありがとうございます！
ほんの少しだったら、paddingで対応するのが賢い方法ですね。スゴイな、yukarinさん。ちゃんと理解してらっしゃる！
これなら何ヶ所もいじる必要ないですしね。(^^)b

もしかして、応用編はまだまだ続くかもしれません。
by かほりん (2007-03-04 10:19) 

＊ モコさん ＊

ナイス＆コメントありがとうございます！
モコさんも本文のところ広げたいと思ってらしたのね〜。
だったらこれを早めに記事にして良かったです。(^^)v
是非試してみてくださいね！
by かほりん (2007-03-04 10:21) 

＊ けろこさん ＊

コメントありがとうございます！
お褒めにあずかり、光栄です！エヘン！v(^^)v
調子に乗って、まだまだ続くかも？！本来の目的（フランビー日記）が疎かにならない程度に・・・ね♪
by かほりん (2007-03-04 10:27) 

かほりん先生！！はじめまして☆
カスタムスキンで検索して辿り着きました。
スキン作成の日記、全部読ませて頂いたのですが
すごくわかりやしいです(・∀・｡)(-∀-｡)ｳﾝ

ライバルが「ブログ教室」なのがわかります（笑）
ＣＳＳ初心者なので助かります♪

１つ質問させて頂いてもいいでしょうか？
サイドバーをかほりんサンのブログの様に
丸い感じに囲みたいのですができますか？
もしよければ教えて頂けたら嬉しいです。よろしくお願いします
by もふすけ (2007-03-04 12:03) 

＊ もふすけさん ＊

はじめまして♪ナイス＆コメントありがとうございます！
なるほど。ソネブロ内で検索するとここがヒットするわけですね〜。
細々とやってるつもりが、実はそうではなかったのかもしれません。
実はスキン編集の記事の閲覧数が他と比べてものすごく多いんですよ。(^^;;
でもわかりやすいって言っていただけて、とっても嬉しいです♪

早速ですがご質問に簡単に答えさせていただきます。
サイドバーの丸みは背景画像でつけています。つまり、CSSでどうにかなるものではないのです。ザンネン・・・。
もふすけさんのブログをちょこっと拝見させていただきましたが、ほんわかしたとてもかわいらしい雰囲気なので、手書きラインみたいな線を作成したら似合いそうだな〜って思いました。
どのような背景画像かは、サイドバーの丸みのある線の上辺りでポップアップメニューを出し「背景画像を表示」を選択すれば確認することが出来ますよ（ブラウザによってメニューの名称が違うかもしれませんが）。
機会があれば、この件についても記事に出来たらなぁと思います。

もふすけさんに教えていただいたので「カスタムスキン」で検索してみたら、「ブログ教室」以外にもライバルがたくさんいました。あちゃ〜。（笑）
by かほりん (2007-03-04 21:24) 

かほりんさん。こんばんは。
今、帰ってきました〜。
とても解りやすく解説してくれてありがとう〜♪
もう本当にかゆい所に手が届く感じだわ！！感謝感謝です〜。
早速、時間見つけてやってみますね。
かほりんさんのブログ教室最高☆
by robinぱぱ (2007-03-04 22:06) 

＊ robinぱぱさん ＊

ナイス＆コメントありがとうございます！
おかえりなさ〜い。(^^)
かゆいところに手が届く？じゃぁ「孫の手ブログ」に名前を変更しようかしら。そう言えば最近、孫の手って見かけないですね。（笑）
是非試してみてくださいね♪
by かほりん (2007-03-04 23:29) 

かほりんさん、おはよ〜＾。＾
すごく判りやすかったです。
さすが　かほりんさん！
といいつつ、相変わらずまだ手つかずのスキン放置。
いつユッキーの画像が入れられるんだろうか…
by yukiinu (2007-03-05 08:00) 

＊ yukiinuさん ＊

ナイス＆コメントありがとうございます！
スキン編集は時間があるときにまとめてやったほうがいいですよ〜。
そのときが来るまで、今はイメージ膨らませておけば？(^^)b
応用編もお役に立てたら嬉しいデス！
by かほりん (2007-03-05 09:35) 

＊ 福を生む心さん ＊

ナイスありがとうございます！
by かほりん (2008-04-25 18:02) 

＊ 瀬都さん ＊

ナイスありがとうございます♪
by かほりん (2009-10-26 09:32) 

＊ 希望の星さん ＊

ナイスありがとうございます！
by かほりん (2009-10-26 09:32) 

検索してたどりつきました。

とてもわかりやすい説明で、
何とか思っていた事が出来そうです。

ありがとうございました。
by てつろう (2010-05-23 14:38) 

＊ てつろうさん ＊

ナイス＆コメントありがとうございます♪
お役に立てそうで良かったです！(^^)
別サイトとして立ち上げた「オリジナルデザイン講座」には
これ以外にも小技が書かれていますので、
時間があるときに是非そちらもご覧下さいまし♪

「オリジナルデザイン講座」
http://original-design.blog.so-net.ne.jp/
by かほりん (2010-05-23 21:38) 

　かほりんさん、はじめまして。
早速、実践でサイドバーの拡張をしてみました。

どうしても真ん中の縦線が消えませんでしたが、
一応の形には、なりました。

有難う御座いました。
by ドンまる。 (2015-01-23 23:07) 

＊ ドンまる。さん ＊

ナイス＆コメントありがとうございます！
真ん中の縦線というのが気になりますが、
とりあえず形になったみたいで良かったです。
これからも、試行錯誤して楽しんでいじってみてくださいね！
by かほりん (2015-01-23 23:55) 

　かほりんさん、早速のご返信、感謝致します♪

返事が遅れまして、申し訳ないです。m(__)m

ちなみに、私のブログになります。↓

http://donmaru.blog.so-net.ne.jp/

本当に有難う御座いました！
by ドンまる。 (2015-02-03 20:34) 

＊ ドンまる。さん ＊

サイドバーの縦線のことですよね？
確かに縦線が付いてますねぇ。
でもこれ、本文記事欄の右側の線なので、
本文記事の幅をもう少し小さくすればいいだけのような気がします。
またお時間のあるときにやってみてくださいね！(^^)
by かほりん (2015-02-03 23:37)