色々調べてわからなかったので質問します。
ライブドアブログでサイドバーの幅を変更したいのですがどこを
いじればいいのか分かりません
具体的にはサイドバーの幅を大きくし画面に背景などいらない感じに
したいのです。
使用デザインはブログメディア(2ch,コバルトブルー,3カラム)を使用しています。
人さまのサイトなのですがこのブログ↓のサイドバーの幅にしたいです
http://blog.livedoor.jp/togurotogenkai/
この人はメイン(真ん中)の大きさも変更してるみたい…?
下の部分の数値のどこをどういじればいいのでしょうか?
/* =============================================== */
/** 02. Layout - レイアウト(全体の枠組み) */
/* ----------------------------------------------- */
body {
margin: 0;
padding: 0;
background-color: #fff;
}
#container {
width: 996px;
margin: 0 auto;
}
* html #container {
position: relative;
top: -1px;
}
*:first-child+html #container {
position: relative;
top: -1px;
}
#content {
background-color: #fff;
padding-top: 6px;
padding-bottom: 6px;
}
#main,
#sub,
#extra {
overflow: hidden;
}
/* 3col */
.message-board-outer {
margin: 0 215px;
background: url.message-board-outer-2 {
padding: 10px;
background: url
}
#main {
float: left;
display: inline;
width: 100%;
}
#main .column-inner {
margin: 0 215px;
padding-top: 2px;
}
#sub {
float: left;
display: inline;
width: 206px;
margin-left: -100%;
background: url
#extra .column-inner,
#sub .column-inner {
background: url}
#extra .column-inner-2,
#sub .column-inner-2 {
padding: 7px 6px;
background: url
#extra {
float: left;
display: inline;
width: 206px;
margin-left: -206px;
background: url
.calendarheadbody,
.sidetitlebody {
margin-bottom: 10px;
background: url
;
color: #fff;
}
.calendarheadbody .calendarhead,
.sidetitle {
padding: 5px 0 7px 15px;
text-align: left;
background: url
font-weight: bold;
}
.side {
margin: 0 0 30px 10px;
text-align: left;
}
/* ----------------------------------------------- */
/** clearfix */
#container:after,
#content:after,
ul.article-navigator:after,
ul.archives-navigator:after,
.article-body:after,
.article-body .article-body-more:after,
#trackback-form ul:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
/** hasLayout */
.blog-title-outer,
.archives-title,
.article-body,
.article-footer,
.article-title,
.pager,
ul,
.index-navigator-outer {
height: 1%;
}
/** peek-a-boo bug */
#trackback-form,
#trackbacks-list,
#comments-list,
#comment-form {
height: 1%;
作るのは乙女ゲーとかワンちゃんのブログです
調べてもかなり難しかったのでどうかよろしくお願いいたします(>_<)!
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
例示ブログはサイドバーは既定のものであり、変更を加えていない。
例示ブログのレイアウトに関する部分は
div#container { /* ブログ全体は無指定 */
}
div#content { /* 三コラムの部分 */
width: 1060px;
margin: 0 auto;
padding-top: 6px;
padding-bottom: 6px;
}
で全体幅を拡げただけのこと。
リキッドスタイル(画面幅に応じて表示)という方法はあるが、閲覧者が小さめの画面の時、記事中の画像サイズにより、下にヨコ・スクロールバーが出現する可能性があること。(重要)
#container や #content の幅を 100% にすることは短絡すぎ。それらには右端のスクロールバーの幅は除外されるから。97 ~ 98% とするのがよいだろう。
サイドバーの幅についてはこんな例から類推するとよいだろう。
デフォルトでは #sub と #extra の幅 206px と #main .column-inner の余白 215px との「差」 9px が各コラムの間隔となっている。
ここでは左サイドバーを 180px 幅に縮め、右サイドバーは 300px 幅の画像が収まるように 310px 幅に拡げるとする。
しかし 310px の外側に枠線が付くので、 #main .column-inner の右余白は 310 + 6 + 9 = 325 でなければならない。
#main .column-inner {
margin: 0 325px 0 189px;
padding-top: 2px;
}
#extra {
float: left;
display: inline;
width: 310px;
margin-left: -316px; /* 枠線(シャドウ)幅を加算 */
box-shadow: rgba(60, 36, 12, 0.5) 0px 0px 3px; /* シャドウ付き枠線 */
border-radius: 15px;
}
#sub {
float: left;
display: inline;
width: 180px;
margin-left: -100%;
box-shadow: rgba(60, 36, 12, 0.5) 0px 0px 3px; /* シャドウ付き枠線 */
border-radius: 15px;
}
メッセージボードを使っているなら
.message-board-outer {
margin: 0 325px 0 189px;
background: #ffe9a8;
border-top: 2px solid #e4c679;
border-left: 2px solid #e4c679;
}
デフォルトではサイドバーの枠線は「画像」を用いているので、その辺の対処は必要。
自分でサイドバー・サイズに応じたものに作り変える手はあるが。
「角丸」は画像を使うしか手段がなかった時代のテンプレートだから。IE が遅れていたから。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ライブドアブログのサイドバー...
-
FC2のテンプレで質問です。
-
HEAD・HTMLの行間改行が上手く...
-
Excel2007のデータ追跡機...
-
goo blogで下書きを保存して、...
-
ドリームウィーバーでの文字の...
-
Hotmailでテンプレートできます...
-
FC2ブログについて質問があるん...
-
テンプレート方法
-
Movable typeにてスタイルシー...
-
アメブロの更新通知メールで迷...
-
赤ちゃん誕生 お知らせポスト...
-
FC2ブログのプラグイン追加で、...
-
EXCEL2007のヘッダー・フ...
-
ブログの文字を大きくしたい
-
goo ブログの下書き保存方法
-
ソースの貼り付け方法
-
gooブログの文字サイズ
-
ocnテンプレートをgooで...
-
Powerpointの表のスタイルで好...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
wordpress カスタムフィールド...
-
ライブドアブログにおいて記事...
-
ブログのデザインがずれる原因
-
WordPressのヘッダー上部の余白
-
タグ
-
ブログの背景色について
-
CSS疑似フレーム内の文字色の指...
-
FC2ブログで横幅を広げタイトル...
-
FC2ブログ タイトルの文字を...
-
アメーバのブログ 画像の貼り付け
-
記事の見出しタイトル
-
FC2ブログ プロフィールイラス...
-
MovableTypeのサブカテゴリ字下...
-
アンドロイドで文字が左に偏る。
-
ブログ記事内に文章を左右2列に...
-
ロリポブログのcss:センターに...
-
ブログのメイン記事の幅を広げ...
-
MovableTypeでCSSにコメントを...
-
fc2ブログで記事とサイドバーに...
-
FC2ブログの右サイドバーが落ちた
おすすめ情報