オクターブの共鳴音

アクセスカウンタ

zoom RSS 横幅の広げ方:サイドバー表示にすると狭いと感じる方へ

<<   作成日時 : 2005/03/26 11:53   >>

トラックバック 18 / コメント 37

新機能追加で記事ページにもサイドバーが表示できるようになったのは
嬉しいんですけど、ちょぉ〜っと画面がごちゃごちゃしすぎかな?
と、思いまして横幅を広げてみました。

自分もやってみたいという方は、以下をご覧になってやってみて下さいね。
CSS編集画面で行います。

/*----------------------------------------------*/
/*            共通スタイル */
/*      (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/
body{
}

/* コンテナ(広告・フッタを除くメイン領域) */
#container{width:780px;
}

/* カウンタ領域 */
#counter{
}

上記の赤字の部分を書き足します。(半角です)
これが、横幅の指定になるのですが、元が700pxだったので私は780pxにしました。
これは、勿論自分の好きなように1px単位で指定できます。
%指定もできるのですが、そうすると画面の大きさの何%という表示になりますので、
ご覧になる方の画面の大きさによって変わってきますので、レイアウトが崩れたりもします。
なので、大きさで指定したほうが、いいのかな、と。

/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*---------------- タイトル(大) ----------------*/
#banner{
/* 包含要素を相対位置指定できるようにします */
background-position:center;
}

/* タイトル領域内のアンカー */
#banner a{
}

/* タイトルテキスト */
#banner h1{
/* タイトル領域内での位置を指定します */
position:absolute;
left:40px;

}

最初の設定で横幅を変えると、トップページ上部のbannerの写真がサイドによってしまうものがあります。
(プレーンなものや、テクスチャは横幅にあわせて広がってくれます)
そのままでもいい方は、次の設定はしなくてもOKです。
私は、ちょっと気になったので、bannerをcenterに指定しました。
(leftやrightにも、指定できます)
そうすると、タイトルもずれてしまうので、タイトルテキストも「左から40px」の位置に指定しました。
(ここも1px単位で指定できます)
(上記赤字参照)

/*------------------ 新着記事 ------------------*/
#contents{width:560px;
}

/* 見出し */
#contents #postlist h2{
}

/* 一覧ヘッダセル */
#contents #postlist th{
}

さて、このままだとトップページの新着記事の部分が前のままなので、ここも幅を変えます。
上記赤字の部分を、書き足します。
これは私が記事全体の幅を780pxにして、サイドバーが160pxなので、560pxにしました。

780−160−560=60pxがマージン分のようです。

570pxにしたらサイドバーが落ちてしまったので560pxにしましたが、
560〜570pxの間は試していないので、ディテールにこだわりたい方は(笑)1px単位で試して
みてくださいね。

/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/

/*---------------- タイトル(小) ----------------*/
#subbanner{
/* 包含要素を相対位置指定できるようにします */
background-position:center;
}


/* タイトル領域内のアンカー */
#subbanner a{
}

/* タイトルテキスト */
#subbanner h1{
/* タイトル領域内での位置を指定します */
position:absolute;
top:4px;
left:40px;

}

と、いうわけで記事ページのbannerもcenterに指定し、タイトルテキストのタイトルを
「トップから4px、左から40px」の位置に指定しました。
これも、お好みでど〜ぞ。

/* ログインアンカー */
#subbanner #login{
/* タイトル領域内での位置を指定します */
}

/*-- ブログ(記事+トラックバック+コメント) --*/
#blog{width:560px;
}

/* ナビゲーション */
#blog .navi{
}

一つ上の設定画面を下にスクロールすると上記の画面が出てきます。
赤字部分を書き足すと、記事ページの記事部分の幅が広がります。
私は、トップページの新着記事の幅と同じ560pxにしました。

そして、コメント欄の幅も広げたかったので・・・・・
/* フォーム フィールド */
#blog input.txt,
#blog textarea{
}
/* コメント欄の幅調整 */
#comment TABLE .cont {
WIDTH: 75%
}
#comment TABLE .sub {
WIDTH: 25%
}

ず〜っと下のほうにスクロールし、トラックバック、コメント領域を設定する画面の一番下にあるフォームフィールドの下の部分に、上記赤字の部分を書き足しました。

以上が、私がCSS画面で編集した部分です。
いじっているうちに、めちゃくちゃになってしまったら、初期設定に戻す機能が付いてますので、
それで、一度リセットして、やり直してみてくださいね。

※その後、全体の横幅を800px、Topの新着記事の幅と記事ページの記事の幅を580pxに変更しました。(2005.04.10)

※3カラム(左右)に変更したい方は、記事部分の幅を広げるために書き足した
  width:560px;を、また削除してくださいね。
 そうしないと、左右に振り分け3カラムに設定してもなりません。
 横幅から全て設定しなおせば別ですが、記事の幅指定だけ解除するのが
 一番簡単だと思います^^。(2006.07.19)

※またまたその後、全体の横幅を820px、記事ページの記事の幅を600pxに変更しました。(2008.04.22)



テーマ

関連テーマ 一覧


月別リンク

トラックバック(18件)

タイトル (本文) ブログ名/日時
なんかブログがゴチャゴチャしている
横幅の広げ方:サイドバー表示にすると狭いと感じる方へという記事がオクターブの共鳴音さんのところで載っていたので(私がどうやるんですかと聞いたから載せて下さったのですが)、やってみました。 すると・・・ ...続きを見る
雨ニモマケズ 風ニモマケズ@WebryB...
2005/03/26 15:37
WebryBlog>ページの横幅を広げる
一行詩や短歌の行末が 折り返されて、意想外の、2行になってしまう場合が あって、対応をどうしようかというところでしたが、 他のWebryBlogでも、ページの横幅の広いところがあって、 どうやるのか、調べてみようと思っていたところ、 ...続きを見る
きのふはけふのものがたり@WebryBl...
2005/03/27 05:01
横幅を広げて、記事ページにもサイードバーを表示させてみました
ウェブリブログでも記事ページにサイドバー表示ができるようになって、すぐに試してみました。が、サイドバーの分だけ本文の横幅が狭くなってしまうため、断念。私のブログは写真を載せているページが多いこともあり、横幅が狭くなると窮屈な感じになってしまうので。 ...続きを見る
すくすく日記@WebryBlog
2005/05/07 22:59
ページの横幅を広げてみました。
PCが苦手でちんぷんかんぷんなまま行き当たりバッタリにBLOGを始め 今日に至っているママチ。 いろいろなBLOGを覗かせてもらっていたら「横幅の広げ方:サイドバー表示にすると狭いと感じる方へ」というタイトルを偶然発見。 それってまさに私のことでは? 前から そう感じていたので ありがたくそのまま真似させていただくことに…。 ありがとうございますー。 ...続きを見る
mamachi days@WebryBl...
2005/05/12 14:21
機能強化 その後
ウェブリブログの新機能をさらにいろいろ使ってみた結果、前回記事の一部を訂正したいと思います。 ...続きを見る
カスミソウ ささやかながら 思うこと
2005/06/05 00:30
ちょこっとカスタマ
「横幅の広げ方:サイドバー表示にすると狭いと感じる方へ」について こちらの記事を参考にして、記事スペースの幅を広げました♪ ...続きを見る
らんちき日記
2005/06/10 14:56
ウェブリブログその2
見にくいとかいろいろ周りから言われて。。・゚・(ノД`)・゚・。 素人ながら、適当にいじってみましたがどないでしょうか? ...続きを見る
家政夫のすゝめ?
2005/09/22 00:12
ページの横幅を広げてみました
ちょっと狭いのよ、横幅が。初期設定では。 ...続きを見る
cafe とちおとめ
2005/10/08 22:01
横幅拡張工事について
先般おしらせしました「横幅拡張工事」なのですが、とりあえず現在の状態で落ち着きましたので再度報告させていただきます。 ...続きを見る
徒然冩眞館
2006/02/15 16:44
CSS編集に挑戦! その@ ページの横幅を広げてみる
【CSS編集】  私も『CSS編集』に挑戦してみました。 ...続きを見る
ぷるぷるのにっき
2006/02/20 02:20
CSSデザイン変更にあたって
こちらで使っているウェブリブログは、デザインテンプレートが豊富なので有名なわけですが、自分でCSSを編集して細かなカスタマイズをすることができます。今回大幅に変更するにあたってCSSを一から勉強するハメになったわけですが、参考にさせて頂いたサイト様を以下に。 ウェブリブログでこれから編集をされる方は、どうぞ参考になさってください。 解説もわかりやすいし、そのままコピペさせて頂くこともできます。 ...続きを見る
おはぎのツボ
2006/03/02 06:17
ブログのレイアウト?少し変更してみましたがわかりますか?
前から非常に気になっていました。何とかならないのかなー・・・と。 そう私のブログの表示レイアウトです。 ...続きを見る
環境を意識した日々
2006/03/02 18:10
「(3/1) 機能強化が完了しました(音声ブログがスタートしました)」について
「(3/1) 機能強化が完了しました(音声ブログがスタートしました)」について ...続きを見る
Happy?
2006/03/02 21:22
ページの横幅を広げてみましたが・・・
発端は、サイドバーのフリースペースの狭さを感じたことだった。 ...続きを見る
兼業主夫(?)の独り言
2006/07/10 01:13
いまさらCSS編集をしてみた
ウェブリブログの デザインを3カラムにして以来 本文の幅が狭くなり窮屈になってしまっていたけど 色々な記事を参考にして 本文の幅を広げることに。 ...続きを見る
くつろぐのグルメ日記
2007/10/06 16:19
CSS加工
自分のストレス解消の一つである写真の撮影とblogへのUP ...続きを見る
ケータイからblog
2008/02/03 21:27
CSS編集・「できた!」
     初心者でわからない事だらけですが、『CSS編集』に挑戦してみました。      何ごともチャレンジ〜!            ◆やってみたかったこと           ・テンプレートの横幅を広げたい…ウェブリブログのテンプレートって、狭いですよね。           ・サイドバーの幅も広げたい…もうちょっとゆとりがあってもいいかな、と思って。 ...続きを見る
Some Day One Day
2009/01/14 22:46
ブログをいじる。1ページ目。
今となってはお亡くなりになったブログ。 http://blog.ncsoft.jp/tim.slog ...続きを見る
FF14ノート(cβ)暫定。
2013/02/27 22:22

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(37件)

内 容 ニックネーム/日時
ありがとうございました。
自分でも研究したいと思います。
ryi
2005/03/26 15:38
あ!ryiさん、はやっ!
もう、やってみたんですね。
私もそんなに詳しくないんですけど、本屋さんで自分が見てわかりやすそうなのを探して、1冊買ってみるのもいいかもしれませんね^^。
オクターブの共鳴音
2005/03/26 15:57
たいへん役に立ちました。
ながい一行詩や短歌が折り返されて、
2行になってしまって、対応を考えていたところでした。
ありがとうございました。
LARA
2005/03/27 04:18
LARAさん、はじめまして、こんにちは。
そのままサイドバーを表示すると、ちょっと狭かったです
よね。お役に立ててよかったです。
オクターブの共鳴音
2005/03/27 08:16
自分ではできないと思っていたんですが、説明が分かりやすく、
おかげさまで私にもできました。
ありがとうございました。
ぶーけ
2005/06/03 13:40
ぶーけさん、はじめまして、こんにちは。
お役に立ててよかったです^^。
オクターブの共鳴音
2005/06/03 17:47
はじめまして、こんにちは。
コチラの記事を参考にさせていただきました!
画像を載せるとかなり狭く感じていたのですが、これで幅が広がりました。
ありがとうございました!
べす
2005/06/08 15:33
べすさん、はじめまして、こんにちは。
画像を載せると、前のままでは本当に厳しかったですよね。
お役に立ててよかったです。
オクターブの共鳴音
2005/06/08 17:00
はじめまして(^^)/
べすさんの所からコチラの記事を参考にさせていただきました。私も記事ページにサイドバーを表示すると「狭っ!!」って思っていたので表示してませんでした。でも!やってみましたよ〜(^0^)Vこんな事ができるなんて凄い!!パソコン初心者の私に強い見方が出来たって感じです!今後もいろいろ教えて欲しいです!!!(^−^)♪
ありがとうございました♪
ゆゆみ
2005/06/10 22:40
はじめまして、ゆゆみさん、こんにちは。
コメントありがとうございます。
皆さん、「狭っ!」って思っているだろうな(笑)と、記事にしたのですが、お役に立ててよかったです^^。
オクターブの共鳴音
2005/06/10 23:14
横幅のひろげ方、めっちゃ参考になりました〜
あるがとうございます。そのまま設定パクッてしまいましたが御了承願います^^;
ever
2005/09/21 23:58
everさん、はじめまして、こんにちは。
いえいえ、皆さんに見たままで使えるようにUPしているので、そのままコピペで全くかまわないんですよ。
お役に立てて、良かったです。
オクターブの共鳴音
2005/09/22 20:45
こんにちは!
わたしもちょっと狭いなぁと思っていたところです。
わかりやすくて、とっても参考になりました。
ウェブリブログ事務局のQ&Aに、こんな親切な解説があったらいいのになぁ。もう。

またいろいろ教えてください。どうもありがとうございます。
三冬
2005/10/05 14:51
三冬さん、はじめまして、こんにちは。
私も、事務局がやってくれないので、同じように思ってる人が多いだろうなぁと思い、UPしました。
お役に立てて、良かったです〜。
オクターブの共鳴音
2005/10/05 22:59
初めまして。
此方の記事のCSS編集スゴク為になりました!!。
以前から横幅を拡げたくて悩んでいましたが
一挙に解決しました。
本当に有難うございます。

また色々教えて頂けると
大変嬉しく思います^^。
ブレード
2005/11/07 19:53
はじめまして、ブレードさん、こんにちは。
お役にたてて、良かったです〜^^。
オクターブの共鳴音
2005/11/07 21:28
はじめまして。やっと探していたものに出会えた思いです。
感謝、感謝です。
ずっと思っていました。「ウェブリって狭いなー」
今日、解決しました。成功しましたのでご報告。
後日、TBさせていただくかもしれません。ブログ仲間にも教えてあげたいと思います。助かりました。
ちなみに3月1日から機能変更がありました。こちらのブログは右上の「ログイン」がありますね。これもきっと改良されているのでしょうか?びっくりです。
私は一番上のフレンドリストとかは是非消したいと思っています。今回の機能強化、どう感じていますか?
またお邪魔します。
環境を意識した日々
2006/03/01 18:07
追伸。
今、見ましたら「ログイン」は通常でした。何かよい方法があればよろしくお願いします。
環境を意識した日々
2006/03/01 18:12
はじめまして、環境を意識した日々さん、こんにちは^^。
お役に立てて、良かったです。
今日の機能変更は、mixiを意識したのかな、とは思いますが、私は使わない可能性大です。音声UPは早速試してみましたけれど(笑)事務局の今回の機能変更に関しての記事に、やはり一番上の不必要なリンクは消したい、とコメントしてる方がもういらっしゃいますね。あと、ログインも自ページから即いけないのが面倒という意見も。うーん、事務局さんどうするでしょう?皆で、意思表示すれば考えてくれるかもしれませんね。※私は音声再生のことに関して、もう事務局の記事にコメントをしてきました。
オクターブの共鳴音
2006/03/01 21:53
幅を拡げる方法さっそく実践してみました。
今までの同じように狭くて不満があったのですが、解決です。htmlはかけるけど、cssは全然ダメなので、親切な解説がすごく役に立ちました。これを機会にcssも勉強してみようと思います。
ありがとうございました。
よしなしごと
2006/04/02 13:18
はじめまして、よしなしごとさん、こんにちは^^。
私も、それほど詳しいわけではないんですが、だからこそわからない人の気持ちがわかりますので、この記事をUPしてみました。お役にたてて、良かったです。
オクターブの共鳴音
2006/04/02 16:37
はじめまして
「痒いところに手が届く」とはまさにこの事です。
まだCSS編集内容を熟知した訳ではないですが、これから頑張ってみようと思います。
enishi
2007/05/31 23:25
はじめまして、enishiさん、こんにちは^^。
私も、最初わからなかったので、わからない人が持つ疑問を考えながらこの記事をUPしてみました。
是非是非、やってみてくださいね。
オクターブの共鳴音
2007/06/01 07:01
初めまして
このページで幅を広げる方法を見つけることができました
トラックバックさせていただきました
当blogへコメントを先にいただいてしまいまして・・・
ありがとうございました
コメントが遅れてしまってお恥ずかしい
まる
2008/02/03 21:51
あら〜、まるさん、コメントいただいて、すいません。
TBだけCMTだけ、何もなし、と色々いらっしゃるのでTBのときは、記事に伺ってCMTするようにしていたもんですから、かえって気を使わせてしまったようで、ごめんなさい。迫力のある写真は、大きく載せたいですよね^^。
オクターブの共鳴音
2008/02/03 22:07
こんばんは。当方のブログにコメントをいただきましてありがとうございます。(TB、初めてだったのでドキドキでした…。)
こちらのページは「お気に入り」に登録、さらにプリントアウトさせていただき、活用しております。みなさん書いてらっしゃるように、本当に丁寧でわかりやすい記事です。ありがとうございました。
らいあ
2009/01/15 21:26
あ、こちらにまでコメントいただいて、ありがとうございます。
TB、CMTだけ、何もなしと、それぞれOKなんですけど、webryblogの方だけTBいただいた場合CMTをしてるもんで(一番初めのblo仲間という意識があるもんで^^)、かえってすいませんでした。
blogを通した日々を楽しみましょう〜。
オクターブの共鳴音
2009/01/15 22:30
初めまして〜^^
まさにサイドバー表示にすると狭いと感じて非表示にしていたのですが、この記事のおかげで横幅拡張することができました。
これを機会にCSSの勉強をしてみようと思います。

また、よろしければこちらの記事にリンクさせて頂きたいのですが、いかがでしょうか?
当ブログはジャンルが違うので確認してからと思いまして^^;
ヒカミ
2009/02/24 18:46
はじめまして、ヒカミさん、こんにちは。
お役に立てて、良かったです。
ジャンル違いでも、リンクは全然OKですよ〜。昔ながらの丁寧なリンク確認いただきまして、恐縮でございます〜^^。
オクターブの共鳴音
2009/02/24 21:39
はじめまして。
ウェブリブログ助け合いの場からとんできました。
幅の広げかたが分からなかったので助かりました。
この記事の内容通り編集してイメージ通りにできました♪
ほんと、ありがとうございました。
太芽
URL
2009/03/05 23:06
はじめまして、太芽さん、こんにちは。
そういえば、どなたかが助け合いの場にここのリンクを張って下さったんですよね。
お役に立てて、良かったです^^。
オクターブの共鳴音
2009/03/06 07:07
はじめまして!こんばんは。
常々、ブログの幅がせまいのどうにかならないかな〜?と思っていたので検索したらこちらのブログにたどり着きました。
わかりやすく記事になっていてとても助かりました!
どうもありがとうございました。
nekomanma
URL
2009/06/26 00:15
はじめまして、nekomanmaさん、こんにちは。
お役に立てて、良かったです〜^^。
オクターブの共鳴音
2009/06/26 07:46
はじめまして!
同じウェブリブログでブログを書いている、初期型ブラックランダーと申します。
今回初めてのCSS編集に挑戦するにあたり、こちらの記事を参考にさせた頂きました。おかげさまで横幅が広がって以前より記事がみやすくなりました!
この場をお借りして御礼申し上げます。ありがとうございました!(^^)
初期型ブラックランダー
2009/11/12 21:36
はじめまして、初期型ブラックランダーさん、こんにちは。
大分前にUPした記事なんですけど、お役にたててよかったです^^。
オクターブの共鳴音
2009/11/12 21:55
いきなりですが、ありがとうございます
以前より、ブログの幅を広げたいと思いつつも、CSS編集などという難易度の高い技を使えるわけもなく、あきらめかけていたところ、ヘルプ検索より貴サイト様の記事に巡り合うことが出来ました。
おかげさまで、自分のイメージ通りの幅に変更することが出来ました。
本当に感謝、感謝です
編集長X
2012/05/24 15:21
はじめまして、編集長Xさん、こんにちは。
2005年にUPした記事が、今もどなたかの役にたっているのを知って、嬉しいです。コメントありがとうございます。
オクターブの共鳴音
2012/05/24 17:44

コメントする help

ニックネーム
URL(任意)
本 文
横幅の広げ方:サイドバー表示にすると狭いと感じる方へ オクターブの共鳴音/BIGLOBEウェブリブログ
文字サイズ:       閉じる