頑張る父さんの記録帳

アクセスカウンタ

zoom RSS 【ブログ編集】 ページレイアウトを変更

<<   作成日時 : 2010/04/12 21:00   >>

なるほど(納得、参考になった、ヘー) ブログ気持玉 2 / トラックバック 0 / コメント 2

ウェブリブログのページレイアウトを変更しよう と試み、ひまわりさんの九九免許というホームページを参考にして、CSSを使って、記事とサイドバーの幅の変更に挑戦した。

ウェブリブログではサイドバーへのコンポーネントを左右に配備することにより、2カラムまたは3カラムのページレイアウトで構成することができるようになる。3カラムのページ幅はデフォルトで
160px+480px+160px=800px
となっており、2カラムのページ幅はデフォルトで
500px+200px=700px
となっている。

頑張る父さんの記録帳では、2カラムのデフォルトレイアウトを用いてきたので、500px+200px=700px幅の部分については触りたくない。そこで、これまでの2カラムのページレイアウトに、200px幅の左サイドバーを追加することにより、
200px+500px+200px=900px
のページ幅とすることにした。


【CSSソース】

ブログ管理ページ→ブログ→設定→オプション→CSS編集(上級者向け)→下記の赤字部分を追加→設定

/*----------------------------------------------*/
/* 共通スタイル */
/* (トップ、月別、テーマ別、記事ページ共通) */
/*----------------------------------------------*/

/* コンテナ(広告・フッタを除くメイン領域) */
#container{
/* ブログ全体の幅 */
width: 900px;

}

/*----------------------------------------------*/
/* トップ、月別、テーマ別ページ */
/*----------------------------------------------*/

/*------------------ 新着記事 ------------------*/
#contents{
/* 記事の幅 */
width: 500px;

}

/*-------------- コンポーネント群 --------------*/
#utilities{
/* 右サイドバーの幅 */
width: 200px;

}
#utilities2{
/* 左サイドバーの幅 */
width: 200px;

}

/*----------------------------------------------*/
/* 記事ページ */
/*----------------------------------------------*/

/*-- ブログ(記事+トラックバック+コメント) --*/
#blog{
/* 記事の幅 */
width: 480px;

}






にほんブログ村 ブログブログ ブログ活用法へ
ほかの解決策が見つかるかも!

テーマ

注目テーマ 一覧


月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ
気持玉数 : 2
なるほど(納得、参考になった、ヘー) なるほど(納得、参考になった、ヘー)

トラックバック(0件)

タイトル (本文) ブログ名/日時

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(2件)

内 容 ニックネーム/日時
大変参考になりました。
ありがとうございます。
umai_cola
URL
2011/03/22 19:32
大変参考になりました。
ありがとうございます。
chao
2013/07/30 13:41

コメントする help

ニックネーム
URL(任意)
本 文
免責事項: 無断転載はおやめください。当ブログへのリンクはフリーですが、いかなる不利益・損害、期待した効果や実績が得られなかったとしても一切責任を負いませんので、ご自身の責任において行動をお願いします。また、当ブログから他のサイトにリンクをしている場合があります。移動された先のホームページは当方が管理するものでも運営するものでもございません。よって、その内容の真偽につきましても一切責任を負いませんのでご了承下さい。

プロフィール




頑張る父さん こちらからメールをお送りください☆



【ブログ編集】 ページレイアウトを変更 頑張る父さんの記録帳/BIGLOBEウェブリブログ
文字サイズ:       閉じる