きまぐれAWA's Life

アクセスカウンタ

zoom RSS CSS(スタイル編)第7回 ブログの幅を広げてみよう♪

<<   作成日時 : 2008/02/09 13:29   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 3 / トラックバック 6 / コメント 93

ウェブリブログで左右の2カラムにするとトップや記事ページのメイン部分が
狭くなって圧迫感があります。
今回はブログ全体の幅をCSS編集で広げてみますね。

画像



 ブログの幅を広げてみよう ♪  

 ブログ全体の幅

まずはブログ全体の幅を広げます。
CSS編集にも少し慣れてきた頃ではないかと思うので、
今回から入力前の文は省略します。

入力する場所は 『/* コンテナ(広告・フッタを除くメイン領域) */』
background-color:#FFEEEE; 』の後に次の文字列を入力します。

width:800px;

※ここでは横幅を800pxで設定しますが、お好みで『 width 』の数値を変更してください。
緑の文字列が以前デザインを指定した命令文になります。
『コンテナ領域の背景色』を設定していない場合は
#container{ 』の後に文字列を入力してください。

 A 『 共通スタイル 』   CSS 全体Map 

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

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



 トップページのリストの幅

入力する場所は 『/*------------------ 新着記事 ------------------*/』
#contents{ 』 の後に次の文字列を追加します。

width:580px;

 B 『 トップ、月別、テーマ別ページ 』   CSS 全体Map 

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



 記事ページ本体部分の幅

入力する場所は 『/*-- ブログ(記事+トラックバック+コメント) --*/』
#blog{ 』 の後に次の文字列を追加します。

width:580px;

  C 『 記事ページ 』   CSS 全体Map 

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



 フッター領域の幅

それからコンテナ部分の幅に合わせてブログ下部のフッター領域の幅も同じ数値で指定します。

/*-------------- ページフッタ領域 --------------*/
#footer{
width:800px;
}


※お好みで『 width 』の数値を変更してください。

入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく)
これでブログの幅が広くなりました♪

画像


※この設定でブログ全体の幅が『 800px (ピクセル)』になりました。
デフォルトに合わせて、以前設定したタイトル画像の幅は『 700px 』でした。
ブログの幅に合わせるために『幅 800px 』のタイトル画像に置き換えました。
設定するブログの幅に合ったタイトル画像を使用します。
 参照  CSS(スタイル編) 第1回 タイトル画像を変更する♪


 トラックバック、コメント領域の指定方法例  

トラックバック、コメント領域の指定方法例も記述しておきます。


 トラックバック、コメント領域のパーツ

うちのデフォルトでは該当する文字列が無かったので以下の文字列を新規で入力ました。
入力する場所は下のほうで追加しています。


【 トラックバックとコメント全体の幅 】

/*追加 トラックバックとコメント 全体の幅 */
#blog #trackback table,
#blog #comment table{
width:560px;
}



【 トラックバック、コメント欄の幅 】

/*追加 トラックバックとコメント (内 容) */
#blog #trackback table .cont,
#blog #comment table .cont {
width:75%;
}


/*追加 トラックバックとコメント (ニックネーム/日時) */
#blog #trackback table .sub,
#blog #comment table .sub {
}
}




緑の文字列が以前デザインを指定した命令文になります。
※ /* ← 今回この中の文はうちのメモ書きです→ */ 特に入力する必要はありません。
※ お好みで『 width 』の数値(%)を変更してください。

  C 『 記事ページ 』   CSS 全体Map 

/* フォーム フィールド */
#blog input.txt,
#blog textarea{
}

/*追加 トラックバックとコメント 全体の幅 */
#blog #trackback table,
#blog #comment table{
width:540px;
}


/*追加 トラックバックとコメント (内 容) */
#blog #trackback table .cont,
#blog #comment table .cont {
width:70%;
}


/*追加 トラックバックとコメント (ニックネーム/日時) */
#blog #trackback table .sub,
#blog #comment table .sub {
width:30%;
}



入力(貼り付け)が出来たら、設定ボタンをポチッと押して完了です(ういんく)
これで各パーツの幅も広くなりました♪

画像


 追記
コメント欄の高さを変える記事を書きました。
 参照  第9回 コメントの入力欄の高さを変える♪




今回の設定でブログの全体の幅が広がって圧迫感がなくなりました♪
次回は細かい部分に目を向けてみたいと思います。


|ω・)ノシ See you♪

|彡 サッ




■ ブログをいじっちゃおぅ♪ 〜 ブログのレシピ 〜 ■



テーマ

関連テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 3
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)
ナイス

トラックバック(6件)

タイトル (本文) ブログ名/日時
ブログカスタマイズ
このブログのカスタマイズ履歴を記録しておきます(順不同) ...続きを見る
馬耳湯風(ばじとうふう)
2008/02/19 14:31
記事ページの幅を広げてみた☆
ブログのトップページは3カラムだから別にブログの幅は気にならないんだけど、記事ページは2カラムだからどうしても圧迫感があって、気になっていたんだよねえ{%小悪魔の尻尾webry%} ...続きを見る
Mixture 
2009/02/02 08:46
テーマタブのセル色&セル幅を均等に変更
今回のCSS編集はテーマタブのセル色とセル幅を均等に変更してみたよ{%虹webry%} ...続きを見る
Mixture 
2009/04/13 16:42
CSSの#banner,#subbannerで画像を変えてはいけないデザインテンプレート
CSSの#banner,#subbannerで画像を変えてはいけないデザインテンプレート。 ...続きを見る
天人鳥のいる暮らし
2010/04/18 16:10
CSSの#banner,#subbannerで画像を変えてはいけないデザインテンプレート
CSSの#banner,#subbannerで画像を変えてはいけないデザインテンプレート。 ...続きを見る
天人鳥のいる暮らし
2010/04/18 16:35
「夜空」テンプレートのカスタマイズ(10)…2カラムから3カラムに変更する
2013年7月にブログのデザインを変更しました。以前は右側にサイドバー1列配置だったのですが、記事の左右にサイドバーが1列づつ並ぶ3カラムにしてみました。 ...続きを見る
オペラ対訳プロジェクト広報室
2013/07/21 19:34

トラックバック用URL help


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

タイトル
本 文

コメント(93件)

内 容 ニックネーム/日時
(メ●´_________________`●)ビローン 
ってやっても大丈夫かな?(ひょえ)
(ぺこ)失礼しました。はよ寝て散髪いかなきゃ(あせ)
(* ^ー゚)ノでわでわ〜
癌ばすた〜
2008/02/10 03:57
癌ちゃん、いらっしゃい(わら)

大丈夫よ(*´艸`)クスクス
散髪イッテラー( ̄ー ̄)ノ▽"フリフリ
mairis
2008/02/10 13:26
はじめまして。
記事ページの幅の狭さに悩んでいましたが、このページを
見つけて簡単に修正することができました。
ありがとうございました。
このコメント書いていたら下の絵文字も楽しそう(笑)
これからいろいろとお世話になりたいと思いますので
どうぞよろしくお願いします。
Yashiro
2008/02/18 21:08
Yashiroさん、いらっしゃいませ(ん)

少しでもお役に立てたようでよかったです♪
うちがブログでしてみた事を書きとめてるものなのですが、
ほとんど人の受け売りだったりします(〃ノノ)
また少しずつ記事を増やしていこうと思ってますので、
見守ってやってください(にこ)

絵文字はうちがしてるゲームで使ってるものです。
ポチッと押すとその絵文字が出るようになってます(にや)
なかなか楽しいですよ(*^m^*)

お世話なんてとんでもないですよ(〃ノノ)
こちらこそよろしくです(ぺこ)
mairis
2008/02/18 22:43
はじめまして(にや)
同じくウェブリでブログを書いているものですが、前からコメント欄のニックネーム部分が随分左に寄っているのがとても気になっていました(しょぼ)
が、この記事を読んでいじってみたら悩みも解決(すき)!
コメント部分が広くなってとても満足しています(にや)

とても分かりやすい記事をありがとうございました(ぺこ)
シリーズ物になっているようなので、これからもCSS編集の参考にさせて頂きたいと思います(わら)
ユーリル
2008/02/21 21:46
ユーリルさん、いらっしゃいませ(ん)

オリジナルなブログにしたいなぁってはじめたCSS編集なんですが、
それをうちなりにまとめていってる記事です。
ホント初歩的なことしか書いてませんが、少しでもお役に立てたようで何よりです(にこ)

シリーズものといってもいつまで続くか…(あせ)
でも、しばらくはぼちぼちと増やしていくつもりでいます。
でも、あんまり期待しないでね( ・ノェ・)コッチョーリ

それではまた|ω・)ノ

mairis
2008/02/22 17:57
はじめまして
巾を全体に広げようと思い、挑戦してみました
すると画面一杯に広がるだけで、各カラムの
サイズはそのままという状態です

PXから%に変更とのことで、100%では今まで
どおり、101%以上では画面一杯表示で、各
カラムの大きさは元のままです
たとえば、前の700PXから800PXという感じ
で全体を均等に拡大させるということは出来
ないでしょうか

教えて頂ければ幸いです
パプー
2009/03/28 11:43
パプーさん、いらっしゃいませ(ぺこ)
はじめまして、こんにちは(にこ)

ブログ全体の幅(コンテナ部分)の幅だけ指定すると、他の任意の部位の幅が自動的に追従するようにするって事ですよね。
うちは各部分を「***px」 で指定しているので%指定でどこまで出来るかしたことないんです。
一度幅を決めちゃえば、そうそう変えることもありませんので(気まずい)

出来るかどうか一度試してみたいと思いますので
少しお時間を頂きたいと思います。
結果が出たらまた書き込みします(ん)
mairis
2009/03/28 13:30
>パプーさん

すいません、
思いっきり勘違いをしてしまってたみたいです。
記事中にある%指定についての記述はコメント欄内部に関してのコトになります。
ブログ全体の幅についてはpx指定で行います。

各パーツの幅はブログの幅指定を行った際に、各所適切な値を入れて調整する事になります。

紛らわしい書き方で申し訳ありませんでした。
見直したいと思います。

※コメント欄の%指定についても少し気がついたことがありますので修正をするかもしれません。
mairis
2009/03/30 13:50
はじめまして
フリースペース1〜3の横幅をCSS編集で色々試行錯誤しているのですが(特に3)、ぴくりとも動き?ません(汗)

現在3カラムになってますが、フリースペースを右側だけにして、フリースペースの横幅を420pxに広げて、レイアウトを工夫しながら置いてみたいなと思っています。

何か方法はあるでしょうか?
Lizerd
2009/06/21 23:38
>Lizerdさん
こんばんは。

とりあえず現状についてですが、サイドバーはこのようになっています。
・左側 → utilities2 の中に「freespace」「freespace2」
・右側 → utilities の中に「freespace3」

フリースペース3に対しては

#utilities #freespace3{width:250px;}

このような指定でいけると思います。
左右でごっちゃになってるかもですね。


さて、2カラムにしてサイドバーの横幅の指定をするとのことですね。
サイドバー全体は「utilities」です。

#utilities{width:420px;}

あとは各フリースペースに対してデザインの指定でいけます。
フリースペースであれば下記のようになります。

#utilities #freespace{width:400px;}

他の領域に対しても同じように指定していくと良いかと思います。
上の数値は適当に入れた数値なので余白等も見ながら調整してみてください。
mairis
2009/06/22 00:37
−続き−

あとスタイルシートを拝見したところ気になるところがちょこっと。
数値の指定の際には単位を忘れずに記入してください。
【例】「padding: 0 0 0 4px;」「width:140;」などなどです。

修正してみてください(ん)
mairis
2009/06/22 00:39
早速アドバイスありがとうございました。
おまけに単位入力ミスまで・・・。
padding: 0 0 0 4px;は、単位入力を省略しても行ける感じなので省いてました^^;
140;は、思いっきり気づかなかった・・・汗

フリースペースのサイズ変更で「#utilities」の意味合いがイマイチつかめてなかったため、「#utilities #freespace3{width:250px;}」にはここの記事で何となく気づいていたのですが、「#utilities{width:200px}」と書いていたので右のスペースの幅が広がってなかったのが原因で、アドバイスで気づくことが出来ました^^;

これからレイアウトで頭を悩ましそうですが、嬉しい悲鳴です(@拍手)
本当にありがとうございました。
Lizerd
2009/06/22 01:12
>Lizerdさん
疑問解決でなによりです(にや)
案外ややこしいトコロありますからねぇ(気まずい)
うちも行き詰まって悩むことも多いですY(>_<、)Y
これからカスタマイズ頑張って下さいね〜(にこ)
また何かありましたらいつでもお越し下さい(わぁ)ノ
mairis
2009/06/22 09:41
初めまして。記事に従ってブログの幅を広げたのですが、サイドバーの左側に1p弱の余白ができてしまいました。どのように直せばすっきりするのでしょうか。ド素人です。宜しくご指導お願い致します。
クー
2009/09/26 02:10
クーさん、いらっしゃいませ(にこ)
はじめまして、こんにちは(ぺこ)

新着記事のところですね(ん)
スタイルシートの以下の部分の数値を調整します。
現在横幅が580pxになっていますので、こちらを600pxにするとちょうどパーツがそろう感じになります。

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

記事ページのほうは今の状態でぴったりになってます。
今選択しているテンプレート(夜空)であればこの数値でいけるかと思いますが、もしかするとブラウザ(InternetExplorer等)によってはサイドバーが下に落ちてしまうこともあるので注意してください。
一応IE6とFireFoxでは正常に見えることを確認しております。
IE7やIE8は特に注意が必要かもしれないです(;^_^A アセアセ…

あと、選択したテンプレートによってもサイドバーが落ちてしまうことがあるかもしれません。
サイドバーが落ちてしまうような場合には数値を小さくしてみてください。
mairis
2009/09/26 02:56
ありがとうございました。さっそく試したところうまくいきました。
 このサイトに出会えて本当に助かっています。丁寧なご指導感謝いたします。
 パソコンのスキルが全くないので一からの習得です。これからもよろしくお願い致します。
 追記 画像を今より大きくアップしたいのですが、どのようにしたらよろしいでしょうか。(分野違いに質問ですみません)
クー
2009/09/26 11:45
widthとheightの数値を変更したところ大きくなりました。煩わせてすみませんでした(@こなた)
クー
2009/09/26 11:57
>クーさん
お疲れ様でした〜(にこ)ノ
うまく出来たようで良かったです♪

うちもブログ始めたときは、な〜にもわからなかったんですよ(*^m^*)
やってるうちに少しずつ覚えいくと思いますので無問題です(にや)

また何か疑問が出て来たらいつでもお越しください。

>追記の件
自己解決されたのですね(ん)
お気になさらずに〜です(*^-^)b
mairis
2009/09/26 13:34
今までブログデザインを修正したくてもその方法論がわからず手が出せませんでした。

こちらの記事に出会い、とても詳しく丁寧に説明があったので無事デザイン変更できました。(@わら)
とても感謝しています。

今後も参考にさせていただくことがあると思いますがどうぞよろしくお願いいたします。
温泉マン
URL
2009/11/24 21:16
温泉マンさん、いらっしゃいませ(にこ)

ブログ始めた頃の記事が多いのでお恥ずかしい点も多々あるかとおもいますが、お役に立てたようでよかったです(気まずい))
また何かありましたらお気軽にお寄りください(ん)
ではでは〜(わぁ)ノ
mairis
2009/11/24 22:30
先生、こんばんは
またお邪魔しました。
現在のブログの幅、もう少し広げたらおかしくなりますか?
もし可能ならば数値はどれくらいが妥当なのでしょうか。
また、広げた場合のサイドバーのバランスも併せてご教授いただきたいのですが・・・。
 宜しくお願いします。(@ぺこ)
クー
2009/11/25 22:11
クーさん、いらっしゃいませ(にこ)

先生って…(気まずい))

えーと、ブログの幅についてですが、個人的には900pxくらいまでは広げてもいいかな〜って思ってます。
最近はモニターサイズも大きくなったりワイドになったりしてますので、横幅は広めでもOKでしょうか。
ただ横幅を広くしすぎると、画面小さいPCで見た時に横にもスクロールしないといけなくなるので注意が必要です。

さて横幅を900pxにする場合ですが、現在の800pxにするために指定した数値にそれぞれプラス100をしていけばOKです。
あとは設定後にバランス見ながら数値の修正をしてもらえば大丈夫かな。

サイドバーについては現状より大きなものをいれないのであれば、そのままのサイズで良いと思います。
もし変更したいときはまたご連絡ください(にこ)
mairis
2009/11/26 11:23
ありがとうございました。(@ぺこ)
早速変更してみました。
見た目どうですか? 
画像をダイナミックにしたくて幅を広げたのですが・・・。
このサイズなら画像の大きさをもう少しアップしても大丈夫ですかね??
ご批評頂ければ幸いです。(わら)
クー
2009/11/26 11:38
>>くーさん

大丈夫そうですね(にこ)b
画像はもう少し大きめでも良さそうな感じです(ん)
500px程度を目安にしてサイズ調整ですね(ぐらさん)
mairis
2009/11/26 12:29
ありがとうございました。(@ぺこ)
立派な画像になりました。(@にや)
また来ます。(@はーと)
クー
2009/11/26 20:06
くーさん、おつかれさまでした〜(にこ)
いい感じで猫ちゃんの表情が見えていい感じです♪

うちも500くらいにしようかしら・・・(だって)ん〜
mairis
2009/11/26 21:04
はじめまして。
ようやくCSS編集で幅を広げる事が出来ました。
ありがとうございます。
ところが、ページ一番下の広告?の所はそのままです。
どうすれば広げる事が出来るか教えて頂けないでしょうか?
宜しくお願いします。
taka
URL
2010/03/09 19:01
takaさん、いらっしゃいませ(ん)
はじめまして、こんばんは(にこ)

一番下の広告のあるところですね。
ここのスタイル指定は26行目あたりの「ページフッタ領域」のトコロです。

#footer{
width:800px;
}

…という風にしてみてください(にや)ノ
mairis
2010/03/09 19:38
takaです。
お世話になっております。
早速、アドバイスを頂きましてありがとうございます。
ページフッタ領域が無事に広がりました
しかし、右方向に1ピクセル分ずれてしまっているようです。
何故でしょうか?
度々ですが、アドバイスをお願い致します。
taka
2010/03/09 22:00
>>takaさん
ん〜なんでしょうねぇ、この動きは…「(@あせ)
フッター領域の中に「リンク領域」というのがありまして、
ブラウザによってはフッター領域から1pxだけ右にはみ出した形で表示されてしまってますね。

さて、問題のリンク領域なんですけど、困ったことにうまくコントロールが出来ませんでした。
代替的なスタイル指定になりますが、リンク領域のスタイル指定をやめてフッター領域全体に同じようなデザインを割り当ててみますと…

#footer{
width:800px;
background:#E1D8CE;
border:1px solid #FFFFFF;
border-top:0px;
}

/* リンク領域 */
#footer #links{
background:none;
border:none;
}

こうするとウェブリのバナーまで広がってしまいますが、ずれはなくなります。

あとは目立たないようなテンプレートを選択するか、1pxのずれを気にしないかでしょうか…(気まずい)
mairis
2010/03/10 19:33
お世話になっております。
ご回答ありがとうございます。
早速、ご提案の方法でやってみます!
まだまだ、CSSについて参考にさせて頂きますので
今後とも宜しくお願い致しますm(_ _)m
taka
2010/03/10 23:54
こんにちは。先日はお世話になりました。
今朝、トップページのイメージ画像の張り替えをしたところ、ブログのデザインが変わってしまいました。
 管理画面から縮小した画像に張り替えたのですが、記事本文の色あいが変化してしまい、みずらいものとなってしまいました。
 こちらでの記事を拝見して、管理画面からのイメージ画像の設定はブログが崩れると今朝知りました。
 はて、どうしたら元通りとなるのでしょうか・・・。
 画像を取り外しても戻りません。
 一難去ってまた一難・・・。(@しょぼ)
 宜しくお願いいたします。(@ぺこ)
 
くー
2010/03/11 12:06
>>takaさん
はーい、おつかれさまでした(ん)
また何かありましたらいつでもお越しくださ〜い(ぺこ)
mairis
2010/03/11 19:53
くーさん、いらっしゃいませ(ん)

この管理画面からのタイトル画像の設定でブログデザインがおかしくなるというのはウェブリに報告済みなんですけどねぇ(あせ)
ず〜っと改善されずに放置されっぱなしです(うえ)

さて、解除方法です。
管理画面から「タイトル位置/画像設定」の【設定】ボタンで
「タイトルデザイン設定」ページに進んでください。
「タイトル画像アップロード」のところに【削除】ボタンがありますので、そちらから画像の削除を行うと正常に戻ります。

ホント困りますよねぇ(だって)
mairis
2010/03/11 20:06
解除されました。
ところが、今度は以前に教えていただいた背景画像(ブログ上部の帯の部分)の様子がおかしくなってしまったのです。
 (http://userdisk.webry.biglobe.ne.jp/019/829/70/N000/000/000/126433957915216408221.png);
 と三か所に貼り付けた件です・・・。
 どうなってしまつたのでしょうか・・・?
 何度、三か所に貼り付け直しても元に戻りません。
 お助けをー(@かなし)
くー
2010/03/11 20:44
>>くーさん
スタイルシートで背景画像の指定されている部分3ヶ所ありますね。

background-image:url
(画像URL);

という感じで、urlと(画像URL);の間が改行が入ってしまっています。
改行を消してもらって、

background-image:url(画像URL);

となるとOKかと思います(にこ)b
mairis
2010/03/11 21:43
そうなんですよね・・・。
しかし、何度やっても勝手に改行してしまうのです。
わざわざ手で打ち込んでも、字数一杯になると改行されてしまいます。
私には手に負えません・・・。(@かなし)
ご迷惑おかけしっぱなしですみません。
どうしたらいいのでしょうか。
くー
2010/03/11 21:54
>>くーさん

えっと、スタイルシートの編集はメモ帳でやってますか?
メモ帳でやっている場合ですと、メニューのところの「書式」>「右端で折り返す」のチェックを外してみて下さい。
他のテキストエディタの場合でも同じような項目があると思いますので、それを外します。

これでどうでしょうか?(気まずい)
mairis
2010/03/11 22:25
オプションからCSS編集に入りいじっておりますが・・・。
メニューという項目はいったいどこに??
スミマセン・・・
くー
2010/03/11 22:44
とてつもなくご迷惑をかけていると思います。(@あせ)
ブログデザインを変更した方が早いですかね・・・。
「右端で折り返す」・・・見つかりませんです。
スミマセン・・・
くー
2010/03/11 22:58
トップページのみの異変です。
一風変わったデザインとしてこのまま使用していきます。
PC初心者の自分がCSS編集などに手を出したことが間違いでした。
ご迷惑おかけしたこと、すみませんでした。
そしていろいろありがとうございました。
いつかまたお邪魔することがあるかもしれませんが、その時は宜しくお願いします。

 P.S 稚拙な質問続きでせっかくのビールがさぞかしまずくなったことと思います。
 重ねてスミマセン。

 
くー
2010/03/12 00:35
>>くーさん

メッセージを送りましたので確認してみて下さい(にこ)
質問はどんどんOKですよ〜(ん)
返信が送れてしまうこともありますが(あれ)
mairis
2010/03/12 02:06
大変たいへんお世話になりました。
ありがとうございました。
くー
2010/03/13 21:10
>> くーさん
お疲れ様でした〜(にこ)
mairis
2010/03/14 11:49
また異変です。
画像を全て縮小画像に張り替えて最後ま一枚を終えてブログを見たら、また背景画像がおかしいのですが・・・。
 先日メッセージでいただいたものを全コピーして、編集画面から貼り付けても変わりません。
 どうしたらよろしいか教えて下さい。
 とてもみっともない背景となっています。
 どうかお助けをー。(@かなし)
くー
2010/03/17 00:44
縮小の件、おかげさまにて無事終了しました。(わら)
すっかりファイルが軽くなり、大層感激しています。
ありがとうございました。(@ぺこ)
 と、大喜びしていた矢先の背景画像異変です・・・。
 どうかご助力、お願い致します。(@ぺこ)
 ファイルを整理している時に、最初に頂いた背景画像を削除してしまったのが原因かと思い、新たにアップロードしたのですが変化はありません・・・。
 
くー
2010/03/17 01:12
>> くーさん
縮小作業お疲れ様でした(ん)
画像全部は大変だったでしょう(気まずい)

タイトル画像の件ですが、元のファイルを削除したのが原因です。
元の画像はPNG、縮小した画像はJPGとファイルの種類が違うので、
アップロードしても同じではないのです。
元の画像を消したことで表示される画像がなくなってしまったという具合です。

それから新たに画像をアップロードされたようですが、ウェブリのヘンテコ仕様のためファイル名にランダムな文字列が付加されてしまいます。
同じ画像をアップロードしてもファイル名が変わってしまいます。

なので、もう一度画像のURLを調べてスタイルシートに書き直さないといけません。
とりあえず、スタイルシートを書き直す作業をしてみてください。
もし、ブラウザで編集すると前のように改行が入ってしまった場合はメモ帳などのテキストエディタに全文コピペしてスタイルシートの編集をしてください。
それからメモ帳のスタイルシートを全文コピペでブラウザの編集画面に貼り付けます。

それでもだめな場合は画像URLをここに書き込んでください。
前みたいにスタイルシートの編集をしてみます。

※この後お返事が遅くなるかもしれませんが、明日の夜には返信が出来ると思います。


mairis
2010/03/17 01:33
復活しました。
ありがとうございました。(@ぺこ)
感謝感激です。
画像縮小の件も無事終了し、やっと一息つけます。
本当にありがとうございました。(ぺこ)(@ぺこ)(ぺこ)
くー
2010/03/17 01:58
>> くーさん
復活なによりです(にこ)
たくさん猫ちゃんたちの写真を増やしていってくださ〜い(わぁ)
それでは楽しいブログライフを〜(わら)
mairis
2010/03/17 12:36
はじめまして。CSSをいじる際に参考にさせていただいてます。
そこで教えていただきたいのですが、ブログの幅を広げようとしていて、「ブログ全体の幅」「記事ページ本体部分の幅」も変えられたのですが、「トップページのリストの幅」だけが変わってくれません。

ブログ全体の幅は900px、記事ページ本体部分とトップページのリスト幅は500pxにしようとしています。
トップページのリスト幅については下のように記載してます・・・
  /*------------------ 新着記事 ------------------*/
  #contents{
  width:500px;
  }
・・・が、全然変わってくれないのです。

もし何かご存知でしたら教えていただけたらと…。
よろしくお願いします。
ぎろぴた
URL
2010/03/18 14:12
ぎろぴたさん、はじめまして(ん)
いらっしゃいませ、こんにちは。

記述ミスですたいる指定がきちんと反映されていないようです。

プロフィール領域のトコロのコメント用の「/* */」の記述が多いですね(気まずい)
開始と終了がきちんとされてないトコロもありますし、整理したほうがよさげです。
※行番号は目安程度です。

■ 77行目付近 「ラベル(「ブログ名」「自己紹介」)」部分
コメントの開始と終了がきちんとされていません。
スタイル指定もされていませんので、コメント以外は隠す必要はないと思います

/* ラベル(「ブログ名」「自己紹介」) */
#profile dt{
}

■ 221行目付近 「#blog-head{}」
「sollid」のスペルが違います。
○ : solid
× : sollid


以上です。
これで新着記事の幅のスタイル指定が反映されると思います(にこ)
mairis
2010/03/18 18:45
さっそくどうもありがとうございます!(にや)

色々と闇雲にいじっていた残骸が邪魔していたりするようでした。(@はず)

あと、基本的なことなのかもしれませんが、どうやって私のが細かく分かったのでしょうか。
同じように他の人のを参考にしていじることも可能ということですか?
ぎろぴた
2010/03/18 23:29
>> ぎろぴたさん
どうもです(にこ)

>どうやって
スタイルシートはHTMLのソースから辿ることが出来まして、
チェックのためぎろぴたさんのを参照させていただきました。
スタイルシートはcustomize.cssと言う名前で保存されています。
基本的には「アドレス+customize.css」で参照可能です。
mairis
2010/03/19 01:12
なんと、そうなのですか。色々勉強になります。
どうもありがとうございます!
ぎろぴた
2010/03/19 08:27
>> ぎろぴたさん
そんなことになっています(ん)
それではまた〜
ブログカスタマイズ頑張ってくださいね^^
mairis
2010/03/21 11:18
またお邪魔しました。
初歩的な質問ですみません。
連休中からブログを開いてもなかなか画像がアップされないのですが、これは私のパソコンの具合の問題なのでしょうか。それとも、ネットの問題ですか?
はたまた、画像縮小したことと何か関係でもあるのでしょうか・・・。
サイドバーのバナーも同様なのです。
自分のブログだけではなく他の方のブログにアクセスしても、画像がなかなかアップされなかったりするのですが・・・。
稚拙な質問でスミマセン。
くー
2010/03/24 01:34
くーさん、いらっしゃいませ(ん)

画像を含めてページの読み込み速度ということですね(にや)
くーさんのネットへの接続状況がわからないのではっきりしたことは言えませんけどご容赦下さい。
とりあえず全般的な話になります。

先に画像縮小に関してですが、画像のサイズを小さくしたことで表示スピードは速くなります。
なので関係はありません。

ネットの問題と考えると、回線速度やウェブリの仕様などが挙げられるでしょうか。
わりとウェブリはもっさりしてますので、それも影響してるかもです。

ウェブリ以外のサイトも含めてネット全体で表示スピードが遅いと言うなら回線、もしくはパソコンのスペック等が考えられます。
他サイトはパッと表示されるけど、ウェブリ、または特定のサイトだけ遅い場合だとそのサイトの仕様やサーバーの問題かと思われます。

回線やパソコンがって場合は環境を整えれば改善されるかもしれません(気まずい)
後者の場合だとユーザー側では何も出来ません(しょぼ)
mairis
2010/03/24 11:25
ありがとうございました。
大変参考になりました。
何から何まで丁寧に教えて頂いて感謝です。
また来ます。
ちなみに、今この画面上でも、下部の絵文字配列は表示されていませんので貼り付けできません。
やっぱり私のパソコンのスペックの問題なのでしょうか・・・。
ではまた
くー
2010/03/25 01:05
>> くーさん
あれま、絵文字読み込めてませんか(T_T)
回線スピードやパソコンなのかなぁ(*_*)
環境をそのままというのなら、ブラウザを変えてみるとか…
あんまりお役にたてずにごめんなさい(;><)人
mairis
2010/03/25 10:53
またお邪魔しました。
updateを最近していなかったので、Windows Updateをインストールしました。
しかし読み込み速度は変わらずです。
 また、メール画面にログインしても、三度に一度しか成功しません。
「このセッションは無効です。再度ログインしてください」というテロップが出現します。
 異変が起きた数日前から、「Internet Explorerではこのページは表示できません」というテロップが頻繁に出始めました。
 ウェブリだけでなく、他のサイトにアクセスしても不調なので、やはり私のパソコンがおかしくなってしまったということでしょうか・・・。
 また、稚拙な質問ですみませんが、他の方が私のブログにアクセスしても、何ら問題なく表示されているのでしょうか?
 本当にすみません。
 身近にパソコンに詳しい人間がいなくて・・・。
 もしもよろしければ私のブログにアクセスしてみてはいただけないでしょうか?ちゃんと表示されているのかどうか・・・。(多分されているのでしょうが・・・。私だけの問題ですよね)
 お暇な時で結構です。
 次から次へとスミマセン。
 また、このような場合、どちらに相談すれば解決するのでしょう。
 私はDELLを使っているのですが、そちらに問い合わせたら何とかなるのなら、休み明けにでも連絡してみようと思っています。
 ではまた。
 
くー
2010/03/26 02:22
>> くーさん

うちの環境では特に問題なく表示されてます。

さて、トラブルが起きた時の対処の仕方を書いてみます。
まずは問題が起きてる部分の特定です。
今だとInternet Explorer(以降IE)からエラーメッセージが出てますよね。
そのエラーメッセージをグーグル等で検索します。
そうするとよく似たケースや対処法がかかれたページがヒットしますので、その中からご自分と同じようなものを見つけて試したりします。
「Internet Explorerではこのページ…」のエラーメッセージで検索するとIE7やIE8などで同じようなケースが見つかります。

また、問題の切り分け方法として、FireFox(FireFoxのサイトからダウンロード、インストールする必要アリ)などIE以外のブラウザで確認してみると良いかもしれないですね。

とりあえずは検索でトラブルシューティングしていくのが良いかと思います。

DELLのサポートもアリだと思います。
うちは利用したことがないのでどの程度サポートしてくれるかは不明ですが(苦笑
mairis
2010/03/26 13:33
いろいろご親切にありがとうございました。
早速試してみます。
パソコンて難しいものですね。
これから勉強していきます。

追記
このページ、私の質問でいっぱいになってしまいました。
誠にすみませんでした。
くー
2010/03/27 00:22
>> くーさん
パソコンはなかなかに手がかかりますし、ややこしいですね(しょぼ)
大してお役に立てませんが元に戻ることをお祈りしております。

追記の件はお気にならさずにですよ(にこ)
mairis
2010/03/27 08:21
先日はお世話になりました。(ぺこ)
あれからGoogleの検索で、マイクロソフトのトラブルシューティングを試してもダメで、他の記事に乗っていたものを片っ端から試してもダメで、アドオンの無効化、閲覧履歴の削除を試みてもダメで。
 マイクロソフトの方に連絡をして、共同閲覧の元、いろいろ試してもその方にもわからない現象のようでした。
 普通は「Internet Explorerではこのページは表示できません」というテロップが流れると、画面にアクセスできないらしいのです。
 私の場合はそのページは閲覧できるのですが、画像がおかしかったり、ページの読み込みがおかしかったり。
 表示そのものも、その方は見たことがないテロップだったそうです。
 バージョンの問題ではなく、パソコンの問題では?ということでした。
 ダメでもいいのでInternet Explorer 8を削除する方法をお願いしました。
 すると、あの忌まわしい表示は消えました。(@わら)
 その間一時間の電話でのやりとり・・・。
 パソコンのこと、少しだけわかりました。
 まだまだ勉強していかなければ・・・。
 本当にありがとうございました。(@ぺこ)
 まずはご報告まで。(@ぺこ)

くー
2010/03/29 23:58
>> くーさん
なかなかに苦労なされたようですねー(うる)
結局IE8が原因だったんでしょうか(まじ)
IE8ってあんまりいい話は聞きませんね(気まずい)

いろいろ大変なこともあるかもしれませんが、頑張ってくださいね(にこ)
mairis
2010/03/30 19:04
初めまして(@ぺこ)
昨日、mairisさんのブログをウェブリーよくある質問で知りました(@わら)
CSS編集を失敗ばかりしていた私には目からウロコ状態です
さっそくブログを広げてみました。
これでYuo Tubeの大きい画面を編集せずにアップ出来そうです(@むふ)
これからも、ちょくちょく知恵を拝見しに訪れると思いますので
どうぞヨロシクお願い致します
たむたむ
2010/04/21 01:56
たむたむさん、はじめまして(にこ)
いらっしゃいませ、こんにちは(ん)
わざわざご訪問ありがとうございます(ぺこ)

CSSはなかなか取っつきにくいトコロもありますけど、デザイン変えたりとか楽しいコトもありますので頑張ってチャレンジしてみてください(にや)
ブログライフをエンジョイしましょ(わら)
mairis
2010/04/21 08:59
丁寧な解説記事非常に助かりました!
わかりやすい解説で今まで見づらかったブログのデザインを
かなり改善することができました!。
実は「ブログカスタマイズ」じゃすぐには引っ掛からなくて
別の方がこのブログを紹介されていて跳んできました。
なんとか辿りつけてよかったです。他のページも是非参考にします。
ヒッキー
URL
2010/05/07 00:25
ヒッキーさん、いらっしゃいませ(にこ)
お役に立てたみたいでよかったです♪
他記事も参考になれば幸いです(ん)
mairis
2010/05/07 01:19
こんにちは(@ぺこ)
久々の質問です。ヨロシクお願い致します
とゆうか、一度ブログを閉鎖し
また一から始めてるのですが・・・
フリースペースの横幅を広げられるのですか?(@びっくり)
とても知りたいのですが
どこをどうやって変更するのか詳しく教えて頂けないでしょうか?(@すき)

たむたむ
2010/10/08 12:34
たむたむさん、いらっしゃいませ(ん)
おひさしおかえりなさいませです(にこ)ノ

ご質問のフリースペースの幅ですが、サイドバー全体の幅を広げるとフリースペースや他のパーツの横幅も自動的に広がるようになっています。
サイドバーへの指定の仕方は以下の通りです。

#utilities,#utilities2{
width:***px;
}

3カラムの場合、左側サイドバーは『#utilities2』、右側サイドバーは『#utilities』です。
それから2カラムの場合は『#utilities』になります。
『width:***px;』の『***px』に適当な数値を入れて試してみてください。
※デフォルトは190px程度

あとサイドバーを広くしたらブログ全体の幅も広げることも忘れずにですね(ん)b
mairis
2010/10/09 16:28
ありがとうございました(@ぺこ)
ブログ全体の幅を広げるのが面倒と思い・・・
(画像の編集が面倒なんですけどね・・(@あせ))
2カラムにして、幅を広げました(@拍手)
おかげさまでサイドバーのフリースペースの
画像が大きくできてしいです

また、何かありましたらヨロシクお願い致します(@ぺこ)
たむたむ
2010/10/13 17:53
> たむたむさん
お疲れ様でした〜。
うんうん、サイドバーを広げるなら、3カラムよりは2カラムの方がいいかもですね(にや)b
ナイスチョイスだと思います。
ではではまた〜♪
mairis
2010/10/14 10:14
はじめましてm(__)m
ウェブリ・助け合いの部屋よりこちらにおじゃさせていただきました。
ブログの幅が広がり圧迫感がなくなりました。ありがとうございます。
記事ページ内のコメント欄などの幅の広げ方が出来なかったのですが、色々また試してみようと思います^^; これからもこちらで色々勉強させてもらいたいと思ってますのでヨロシクお願いします♪
うさ
2010/11/14 11:11
うささん、いらっしゃいませ(にこ)
はじめましてです♪
お役にたてて何よりでした〜(ん)

>記事ページ内のコメント欄などの幅
以下のようなスタイル指定をお試しください。

#blog #trackback table .cont,
#blog #comment table .cont {
width:80%;
}
#blog #trackback table .sub,
#blog #comment table .sub {
width:150px;
}

これくらいで程よい広さになるんじゃないかと思います(にや)b
mairis
2010/11/14 18:06
さっそく試してみましたv
広がってバランスが良くなりました♪
本当にありがとうごさいます〃○┓ペコッ♪
うさ
2010/11/15 09:22
>うささん
お疲れ様でした〜(にこ)ノ
mairis
2010/11/15 11:35
こんにちは。
以前ウェブリ広場でお世話になった者です。
あの後ここに誘導して頂いて、無理だと思っていたCSS編集にも手をつける事が出来ました。
有難う御座います。

少し質問があるのですが…。
こちらの記事を参考にブログの幅を広げてみたのですが、サイドバーとコンテンツとの間が広がるだけで、コンテンツの幅が広がりません。
コンテンツの幅だけを広げたい場合はどうしたら良いのでしょうか?

コメント欄も見てみたのですが、「?」でした。
お手数ですが、ご教授頂けると嬉しいです。
眉上カルキ
2010/12/11 16:02
眉上カルキさん、いらっしゃいませ(ん)
その節はどうもでしたー(にこ)ノ

>コンテンツの幅
変更ポイントは2箇所ですね。
現在「width:580px;」となっているようですので、こちらを「680px」程度にしてみてください。
この記事は全体の幅「800px」に合わせて書いてあるので、「900px」の場合ですと100px程度プラスになります。

#contents{
width:680px;
}

#blog{
width:680px;
}

数値は目安なので設定してからバランスをみてくださいね(にや)b
mairis
2010/12/11 17:00
mairisさん、有難う御座います!
丁度良いバランスになりました(*・∀・)
CSS編集はまだ続けていきたいので、このブログには引き続きお世話になります。
また質問するかも知れませんが、その時は宜しくお願いします。
眉上カルキ
2010/12/12 09:16
>> 眉上カルキさん
おつかれさまでした〜(にや)ノ
これからもCSS頑張ってくださ〜い☆
ご質問あればお気軽にお寄りくださいね(ん)
mairis
2010/12/12 09:38
はじめまして。
こちらのブロブ記事を参考にしながら、ブログの幅を無事に広げることができました!ありがとうございます(@にや)
最初は自分にも出来るんだろうかと半信半疑でしたが、分かりやすい解説に助けられ、感謝の気持ちでいっぱいです。

2010/12/19 23:20
哲さん、いらっしゃいませ(にこ)
はじめまして〜♪
カスタマイズお疲れ様でした。
また何かありましたらおこし下さいませ(ん)
mairis
2010/12/22 09:32
初めまして!
ブログ幅の変更の仕方を検索していたところ、こちらに辿り着きました。

とても分かり易く、お陰様で変更することができました^^
有難うございました!

幅を変更したことで気になる細かい点は、またこちらの内容を参考にさせて頂き、徐々に手をつけていこうと思っています。

取り急ぎお礼まで。
taka_c230
2012/01/19 23:45
taka_c230さん、いらっしゃいませ(にこ)
はじめまして、こんにちは(ん)

程よく広がったみたいですね(にこ)
撮られた写真も大きく表示出来ますしいい感じです♪
ではではステキなブログライフを〜(わら)
mairis
2012/01/20 08:28
はじめまして
ブログ初心者です

ブログの幅を広げることができたらなぁ〜
と思っているのですが 変更したら 
今までのアップしたブログも変更されるのですか?
よしの
2012/06/30 14:17
よしのさん、いらっしゃいませ(にこ)
はじめまして、こんにちは(ん)

このブログの幅を広げるCSS編集をすると、ブログトップページや記事ページなど全てのページに適用されます。
過去に書かれた記事も同じように広がって表示されます(*・ω・)b
mairis
2012/06/30 15:08
そうそうのお答え有難うございます。
これから編集を試みます
また 解らなくなったら宜しくお願いします(@ぺこ)
よしの
2012/06/30 19:05
>> よしのさん
頑張ってください(にこ)
また疑問などありましたらお気軽にカキコください(ん)
mairis
2012/07/01 11:11
こんにちは
親切な説明が初心者の私にもブログの幅を広げることができ
大変嬉しく思ってます
有難うございました
ところで こちらの可愛い絵文字は 自分のブログのコメント欄には
使えるのでしょうか?
一つ出来るとまた次に他のことにも興味が湧いてきます
これからも宜しくお願いします
よしの
2012/07/02 10:23
>> よしのさん
CSS編集お疲れ様でした(にこ)
うまくいったようでなによりです♪

コメント下にある絵文字はパンヤというゲームで使われてる絵文字で、ウェブリの記事やコメントで使えるようにするには「絵文字スクリプト」というものの編集と設定が必要になります。
いろいろとめんどくさい作業はありますけど、よしのさんのブログでも表示することは可能です。

やり方については別ページにて説明を書いたものがあるんですが、そのページが今ちょっとサーバーのメンテナンス中で見れないんですね。
2、3日中にはメンテが終わる予定ですので、メンテが終わったてページが見れるようになったらまたメッセージにてご連絡します(*・ω・)b ネッ
mairis
2012/07/02 18:51
mairisさん、こんにちは〜

こちらの記事だけでなく、ウェブリのCSS編集で大変参考にさせていただきました。ありがとうございました。

CSS編集の記事を書く際に、リンクさせていただきましたmm
何か問題ありましたら、すぐに対応いたしますので、ご連絡ください。
chao
2013/07/30 13:36

コメントする help

ニックネーム
URL(任意)
本 文
  現在の閲覧者数:

* ぱにゃステ *

『ぱにゃステ』 customized by mairis
 
 
ふぉろーみー

CSS(スタイル編)第7回 ブログの幅を広げてみよう♪ きまぐれAWA's Life/BIGLOBEウェブリブログ
文字サイズ:       閉じる