姉妹ブログ ホームページ作成浜松Tips （※） は2008年春より運営を開始しておりますが、 其の時とはブログを閲覧する方の環境も変わって来ました。 大きな処ではパソコンの表示画面が大きくなりました。 今ではノートPCでもデスクトップ型に負けない解像度どころか、 iPad でさえ 1024px、狭い方でも 768px のサイズを有しており、 尚且つこれは 960px相当の表示を標準でします。 其処で姉妹ブログも幅を拡張することを始めとして 幾つかレイアウトデザインを修正することにしました。 それら変更は大凡、本ブログにサイズ、位置等準じるようにしました。
そのビフォー・アフター図を示します。 先ずはビフォー図、
ホームページ作成浜松Tips：BEFORE
これを全体幅を50px広げ、
その広がった分を全て真ん中のブログ記事部分の表示に割り当てます。
このメインとなる改修の変更CSSコードは以下です。
#container{
width: 900px; // <=850px
}
#content{
width: 470px; // <=420px
}
.main{
width: 450px; // <=400px
}
数字を書き換えるだけの至って簡素な変更ですね。
width: 900px; // <=850px
}
#content{
width: 470px; // <=420px
}
.main{
width: 450px; // <=400px
}
他にもサイドバーからは役に立たないアフィリエイトを一つ削除して、 以下はまぞうプラグイン
- ブログ内検索
- 最近の記事
- QRコード
- RSSリンク
その結果が以下のアフター図ですが、如何でしょうか？
ホームページ作成浜松Tips：AFTER
ブログデザインの変更に於いて、 幅の変更は単に数字を足し算、引き算するだけの容易な部類に入りますので、 少々窮屈だなと感じれば実践してみるのも好いかも知れませんね。
※ 現在では ホームページ作成浜松Tips は本ブログ（ Acenumber Technical Issues ）に統一しました。
本ブログ更新情報を姉妹ブログに表示する方法
姉妹ブログのレイアウトデザインを時代及び本ブログに準じるようにと施した改修を姉妹ブログの全体幅の拡張として2011年5月1日の本ブログ記事にしました。その際のアフター画面が下の図ですが、ビフォーと題打つのが今回の記事の趣旨に沿うもの。ホームページ作成浜松Tips：B
「最近の記事」リンクの行毎に背景色を変更する
本ブログでは3カラムのレイアウトで左サイドバーには最近の記事を30件表示しています。閲覧者の利便を考え、目に留まり易い箇所に記事へのリンクを大量に置き、興味のある記事が見出だし易くなるだろうと考えてのレイアウトです。これは姉妹ブログHamaZoランクチェック！Blog