ブログが重い！表示が遅い回避 sub_bを利用した３カラムから２カラムへ
前回 、２カラムにしたいブログを３カラムと無理やり選択しました。
では今回は３カラムから２カラムへとカスタマイズして行きます。
サイドバーの配置で右側に、表示させたいメニューは並べられたでしょうか。
２カラムですので左側に配置しても後に消えますので注意してください。
では現在ブログはどうなっているかというと
このようになっているかと思います。
左側「sub_a」部分の余白があります。
この余白部分を消していくわけです。
作業は簡単なのですが、ちょいとばかし説明する側がややこしいので伝えきれないかもしれません。
その場合は遠慮なく質問してください。
それはスキンによって設定が違うので、こうしろ！と一概にいえない事にあります。
まず、どの方もやってもらうことは、ＣＳＳ編集画面の一番下を見てください。
そこに{ }内はそれぞれ違うのですが
#sub_a{
width:170px;
position: absolute;
left: 0px;
top: 0px;
}
と、「sub_a」のＣＳＳを見つけてください。
見つけられたら、{ }内の記述を消し「display:none;」と書いてください。
#sub_a{display:none;}
です。
これで、ブログに「sub_a」のボックスは表示されなくなりました。
この時点で、プレビューを見てもらうとブログの表示は様々です。
そのままの人や
このように「#main」が左にズレた人や
この時点で成功する方もいます。
余白が出来た場合「width」や「marign」などの指定がされています。
考えられる事は
「#main」「#sub_main」「#firstContentsArea」「#subFirstContentsArea」に余白や幅が指定してある場合です。
大体「float」指定されている場合は「width」、「position」指定されている場合は「margin」です。
幅が狭い場合は「width : 数字 ;」の数字を増やす。
幅が広い場合は数字を減らす。
右に余白がある場合は「margin-right : 数字px ;」の数字を減らす。
左に余白がある場合は「margin-left : 数字px ;」の数字を減らす。
余白の数値を減らす、または横幅を増やすことで２カラム完成です。
「float」の場合、幅が広すぎると「sub_b」が画面下に落ちるので、その場合は微妙な調整を行ってください。
「position」の場合、幅が広すぎるとサイドバーに重なるので、その場合は微妙な調整を行ってください。
それでも変わらない場合は
.entry {width:400px;}
#message{width:400px;}
と記事やメッセージボックス自体に幅が指定してある場合です。
このＣＳＳは何処にあるかはまちまち「Ctrl+F」で探してみましょう。
幅を増やすことで２カラム完成です。
もしかしたらもっと余計にＣＳＳの設定がされていて変化の起こらない場合もあります。
その際は、どうぞコメント欄へ。
２カラム逆バージョンをお望みの方
#sub_a{display:none;}
の変更が終わったあとです。
まず見て欲しいのが「sub_b」のＣＳＳです。
あなたのスキンは「float」「position」どちらが使用されているでしょうか？
floatの場合
#main{
width: 400px;
float: left;
padding-left: 10px;
}
#sub_b{
width:170px;
float: right;
}
「right」と「left」を入れ替えますします。
#main{
width: 400px;
float: right;
}
#sub_b{
width:170px;
float: left;
}
その後、「#main」にある幅（width）を広げるか狭めるかの調整してください。
「#main」にない場合は、上記に示した通り、「.entry」などにある場合があります。
positionの場合
#sub_b{
width:170px;
position: absolute;
right: 0px;
top: 0px;
z-index: 100;
}
「right」を「left」に変更します。
#sub_b{
width:170px;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
}
この時サイドバーがなくなり記事が一面に現れる、またはサイドバーと記事が重なるかもしれません。
あるいは右側に余白が出来るかもしれません。
その時は余白分の調整をおこなってください。
#main{margin-left:185px;}
#main{margin-right:0;}
と余白の調整を行ってください。
これで、左右が逆になります。
サイドバーが左にあっても、表示は記事からになります。
説明が難しく、意味不明な点もございますが、解からない場合は遠慮なく質問してください。
この作業を行えば、表示ストレスなく閲覧する事が可能となります。
是非、お試しください。