姉妹ブログ
ホームページ作成浜松Tips
(※)
は2008年春より運営を開始しておりますが、
其の時とはブログを閲覧する方の環境も変わって来ました。
大きな処ではパソコンの表示画面が大きくなりました。
今ではノートPCでもデスクトップ型に負けない解像度どころか、
iPad
でさえ 1024px、狭い方でも 768px のサイズを有しており、
尚且つこれは 960px相当の表示を標準でします。
其処で姉妹ブログも幅を拡張することを始めとして
幾つかレイアウトデザインを修正することにしました。
それら変更は大凡、本ブログにサイズ、位置等準じるようにしました。
そのビフォー・アフター図を示します。
先ずはビフォー図、
ホームページ作成浜松Tips:BEFORE
これを全体幅を50px広げ、
その広がった分を全て真ん中のブログ記事部分の表示に割り当てます。
このメインとなる改修の変更CSSコードは以下です。
#container{
width: 900px; // <=850px
}
#content{
width: 470px; // <=420px
}
.main{
width: 450px; // <=400px
}
数字を書き換えるだけの至って簡素な変更ですね。
他にもサイドバーからは役に立たないアフィリエイトを一つ削除して、
以下はまぞうプラグイン
- ブログ内検索
- 最近の記事
- QRコード
- RSSリンク
を本ブログに準じる様にしています。
タイトル部分も元のHamaZo提供のデザインのテーマの藤の花をフィーチャーする必要もありませんので、
タイトルの表示を 30px 程繰り上げました。
その結果が以下のアフター図ですが、如何でしょうか?
ホームページ作成浜松Tips:AFTER
ブログデザインの変更に於いて、
幅の変更は単に数字を足し算、引き算するだけの容易な部類に入りますので、
少々窮屈だなと感じれば実践してみるのも好いかも知れませんね。
※ 現在では
ホームページ作成浜松Tips
は本ブログ(
Acenumber Technical Issues
)に統一しました。