ワイド設定の例

みみすけさんのご要望にお答えし　私が行った設定をご説明します

※１　スタイルシートをいじりますので　自己責任にて設定願います
※２　テスト後の適用をお勧めします
※３　変更前のテンプレートは　万が一のため保存しておいてください
　　　　ブログバージョンアップにより　３個のテンプレートが保存できます

さて私の設定例ですが　スタイルシートの変更は　①から⑥の全７箇所です



　　①ブログ全体の横幅　　　②記事欄の横幅　　　　　③左サイドバーの横幅
　　④右サイドバーの横幅　　⑤記事欄内部の横幅　　⑥あと１箇所

横幅の指定は　ｐｘ（ピクセル）または％にて行います

私はｐｘにて指定しました　％指定だとブログを参照される方の端末設定（画面解像度）により

ブログが崩れてしまう可能性があるからです

私の場合　掲載する写真（画像）のサイズを基本に横幅を決定しました

写真（大）の横幅が５００ｐｘ　（小）の横幅が２５０ｐｘ　ちなみに携帯からの写真は２４０ｐｘ

①９８０ｐｘ　②５８０ｐｘ　③１８０ｐｘ　④１８０ｐｘ　⑤５８０ｐｘ　と（テストしてみて）決めました

⑥の値は単純に計算してください　②５８０ｐｘ－２８ｐｘ＝⑥５５２ｐｘ

さてここからが　スタイルシートへの設定です　秀丸などにコピーすると変更しやすいかも

知れません　参考にアウトドア３カラムからの変更箇所を【レコード数】にて表示します

①の設定は１箇所
　　#container{　の　width:980px;　【１０８レコード】

②の設定は１箇所
　　#content{　の　width:580px;　【１７７レコード】

③の設定は１箇所
　　#links{　の　width:180px;　【１８５レコード】

④の設定は１箇所
　　#links2{　の　width:180px;　【１９５レコード】

⑤の設定は２箇所
　　#container{　の　.description{　の　width:580px;　【１５８レコード】
　　#copyright{　の　.blog{　の　width:580px;　【２２３レコード】

⑥その他１箇所
　　#copyright{　の　.main{　の　width:552px;　【２６８レコード】

ここまで設定したら　オリジナルデザインとして保存し　使用テンプレートを切り替えて

見てください　思ったように表示されましたか？

あくまでも私の設定値ですので　ご希望とおり表示されるまで　テストをしてみてください
　

あなたにおススメの記事