しーまブログ 2022年11月22日
ブログの幅を広げちゃおう２
どうやってブログの幅を広げるのか？
やってみましょう。
１．ブログの設定＞テンプレート カスタマイズをクリック
２．スタイルシート： となっているところをご覧！
このスタイルシートという部分が世にいうCSSです。
ここを直接書き換えても良し。
全コピー（CTRL+A）して任意の場所に作ったテキストファイルなどにコピーして編集てもよし。（でも最後はスタイルシートに貼り付けてくださいね）。
（２）#content という文字列を見つけてwidthを変更する
（３）#linksという文字列を見つけてwidthを変更する
（４）.mainという文字列を見つけてwidthを変更する
（５）.sidetitleという文字列を見つけてwidthを変更する
（６）.side という文字列を見つけてwidthを変更する
まーぶっちゃけ、コレを全部コピーして貼り付けてもらってもオーケーです。
３．スタイルシートの次の（１）から（６）の場所にある width の数字を変更します
（１）#container という文字列を見つけてwidthを変更する＜変更前＞
#container{ font-size:12px;
width:740px;
background-color:#ffffff;
margin:0px auto;
text-align:left;
}
＜変更後＞
#container{ font-size:12px;
/*全体的な幅を変更 740px --> 1040px */
width:1040px;
background-color:#ffffff;
margin:0px auto;
text-align:left;
}
width:740px;
background-color:#ffffff;
margin:0px auto;
text-align:left;
}
＜変更後＞
#container{ font-size:12px;
/*全体的な幅を変更 740px --> 1040px */
width:1040px;
background-color:#ffffff;
margin:0px auto;
text-align:left;
}
（２）#content という文字列を見つけてwidthを変更する
＜変更前＞
#content{
width:545px;
float:right;
background-color:#ffffff;
}
＜変更後>
#content{
/*本体の幅を変更 545px --> 745px */
width:745px;
float:right;
background-color:#ffffff;
}
width:545px;
float:right;
background-color:#ffffff;
}
＜変更後>
#content{
/*本体の幅を変更 545px --> 745px */
width:745px;
float:right;
background-color:#ffffff;
}
（３）#linksという文字列を見つけてwidthを変更する
＜変更前＞
#links{
width:185px;
float:left;
text-align:left;
margin:0px 0px 0px 0px;
padding:20px 0px 0px 10px;
background-color:#ffffff;
overflow:hidden;
}
＜変更後>
#links{
/*サイドメニューの幅を変更 185px --> 285px */
width:285px;
float:left;
text-align:left;
margin:0px 0px 0px 0px;
padding:20px 0px 0px 10px;
background-color:#ffffff;
overflow:hidden;
}
width:185px;
float:left;
text-align:left;
margin:0px 0px 0px 0px;
padding:20px 0px 0px 10px;
background-color:#ffffff;
overflow:hidden;
}
＜変更後>
#links{
/*サイドメニューの幅を変更 185px --> 285px */
width:285px;
float:left;
text-align:left;
margin:0px 0px 0px 0px;
padding:20px 0px 0px 10px;
background-color:#ffffff;
overflow:hidden;
}
（４）.mainという文字列を見つけてwidthを変更する
＜変更前＞
.main{
width:502px;
color:#000;
font-size:12px;
padding:15px 0px 15px 0px;
overflow:auto;
line-height:135%;
}
＜変更後>
.main{
/*全体的な幅を変更 502px px --> 702px */
width:702px;
color:#000;
font-size:12px;
padding:15px 0px 15px 0px;
overflow:auto;
line-height:135%;
}
width:502px;
color:#000;
font-size:12px;
padding:15px 0px 15px 0px;
overflow:auto;
line-height:135%;
}
＜変更後>
.main{
/*全体的な幅を変更 502px px --> 702px */
width:702px;
color:#000;
font-size:12px;
padding:15px 0px 15px 0px;
overflow:auto;
line-height:135%;
}
（５）.sidetitleという文字列を見つけてwidthを変更する
＜変更前＞
.sidetitle{
border-top:1px solid #000066;
border-left:1px solid #000066;
border-right:1px solid #000066;
border-bottom:1px solid #000066;
background:#0072D3 url(/_img/simple_blue/obj.gif) top left;
background-position:1px 1px;
color:#fff;
font-size:12px;
letter-spacing:2px;
padding:5px 0px 5px 5px;
width:178px;
}
＜変更後>
.sidetitle{
border-top:1px solid #000066;
border-left:1px solid #000066;
border-right:1px solid #000066;
border-bottom:1px solid #000066;
background:#0072D3 url(/_img/simple_blue/obj.gif) top left;
background-position:1px 1px;
color:#fff;
font-size:12px;
letter-spacing:2px;
padding:5px 0px 5px 5px;
/*サイドメニュータイトルの幅を変更 178px --> 278px */
width:278px;
}
border-top:1px solid #000066;
border-left:1px solid #000066;
border-right:1px solid #000066;
border-bottom:1px solid #000066;
background:#0072D3 url(/_img/simple_blue/obj.gif) top left;
background-position:1px 1px;
color:#fff;
font-size:12px;
letter-spacing:2px;
padding:5px 0px 5px 5px;
width:178px;
}
＜変更後>
.sidetitle{
border-top:1px solid #000066;
border-left:1px solid #000066;
border-right:1px solid #000066;
border-bottom:1px solid #000066;
background:#0072D3 url(/_img/simple_blue/obj.gif) top left;
background-position:1px 1px;
color:#fff;
font-size:12px;
letter-spacing:2px;
padding:5px 0px 5px 5px;
/*サイドメニュータイトルの幅を変更 178px --> 278px */
width:278px;
}
（６）.side という文字列を見つけてwidthを変更する
＜変更前＞
.side{
font-size:12px;
line-height:140%;
margin:0px 0px 10px 0px;
padding:8px;
border-left:1px solid #000066;
border-right:1px solid #000066;
border-bottom:1px solid #000066;
width:167px;
}
font-size:12px;
line-height:140%;
margin:0px 0px 10px 0px;
padding:8px;
border-left:1px solid #000066;
border-right:1px solid #000066;
border-bottom:1px solid #000066;
width:167px;
}
＜変更後＞
.side{
font-size:12px;
line-height:140%;
margin:0px 0px 10px 0px;
padding:8px;
border-left:1px solid #000066;
border-right:1px solid #000066;
border-bottom:1px solid #000066;
/*サイドメニュー中身の幅を変更 167px --> 2678px */
width:267px;
}
font-size:12px;
line-height:140%;
margin:0px 0px 10px 0px;
padding:8px;
border-left:1px solid #000066;
border-right:1px solid #000066;
border-bottom:1px solid #000066;
/*サイドメニュー中身の幅を変更 167px --> 2678px */
width:267px;
}
まーぶっちゃけ、コレを全部コピーして貼り付けてもらってもオーケーです。
４. 変更したらプレビューボタンをクリックして確認しましょう！
ほれ、このトップページの横にあるボタンじゃよ。↓
もしここで表示がおかしかったら、「戻る」ボタンを押して変更をキャンセルし、またやり直してみてください。
どうしようもなくなったら、テンプレートの再選択で真っ新な状態に戻すこともできるので、勇気をもってじゃんじゃんいじっちゃいます。
きれいに表示できていればOK、登録ボタンを押してテンプレートを保存します。
トップの画像を変えたい へ
Posted by イロイロ at 00:02│Comments(0)
│ブログの幅を広げちゃおう
※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
