ヘッダー部の背景画像と記事の見出し、文字色＆リンク色などなど、cssをカスタマイズして使っていました。が、数ヶ月も経ってくるとカスタマイズ病が再発し、あちこちいじりたくなってくる(笑)
カスタマイズはほとんど「
はじめてのFC2ブログカスタマイズ」の通り。
＜div＞タグの階層とpaddingの指定に気をつければ結構簡単。
一番外側のdivタグのid属性「container」にコンテンツ幅を指定。
同じく、id属性「primary-column（中央部）」「secondary-column（左側）」をそれぞれ持った＜div＞タグ（２つ）を、id属性「wrapper」を持つ＜div＞タグで囲って子要素にし、「wrapper」を左側に回り込ませる（float:left）。
さらに「wrapper」と
同階層のid属性「extra-column（右側）」を持つ＜div＞タグを右側に回り込ませる（float:right）。
ブラウザのバグを利用したテクニックらしいけど、とりあえず表示されればＯＫ(笑)
でも文字で書いたらややこしいなぁヽ(;´Д｀)ﾉ
自分のための覚書の意味もあるので、ソースを載せておこうっと・・・
（このブログでは属性名は若干変えてます）
<body>
<div id="container">
<div id="header">ヘッダー</div>
<div id="wrapper">
<div id="primary-column">記事（中央部）</div>
<div id="secondary-column">メニュー（左部）</div>
</div>
<div id="extra-column">リンク等（右部）</div>
<div id="footer">フッター</div>
</div>
</body>
（FC2ブログのカスタマイズ「3カラムレイアウトの作成」より）ワタシの場合、
container → widht:840px
wrapper → widht:650px
primary-column → widht:460px
secondary-column → widht:190px
extra-column → 190px
と、各ポジションの横幅を1pxの余裕もなく指定しているので、
上記属性に「padding-right」「padding-left」を指定するとレイアウト崩れがうじゃうじゃ発生＿|￣|○
なのでこれらの属性には「padding-right」「padding-left」は指定せず、
子要素にあたる＜h3＞や＜ul＞といったタグのスタイルで「padding-right」「padding-left」することで解決ｖ
レイアウトはしばらくこの３カラムで行こうと思っとります。
ヘッダーの背景画像は近いうちに変更予定なんですが、ま、今日はいいや(笑)
＜追記１（4/21）＞
投稿してから「...read more」をクリックして記事全体をみてみたら、この記事だけレイアウト崩れが発生。
cssの設定やらHTMLの書き方やら調べていたんだけど原因判明。
記事内に＜＞（本当は半角文字）を使っていたせいでした。
ああ、なんて初歩的なミス・・・orz
IE６とMozillaでしか確認してないけどとりあえず致命的な崩れは発生していない模様・・・、ホントかね？？ま、今日はいいや(笑)
＜追記２（4/22）＞
ヘッダー部の背景画とカレンダー部のズレが気になって、ちょっと修正。コンテンツ幅も860pxから840pxに。背景のサイドバー（？）もひとまず取ってみたけど、スクロール時の重そうな描画が無くなった？？
＜追記３（4/22）＞
css修正とデザインの確認はローカルでやりました。
HTMLソースコードの＜head＞タグ内に外部cssファイルを指定する＜link＞タグがありますが、ここの
href="＜%css_link＞"をローカルに置いたcssファイルのパスに変更すればＯＫ。
＜%css_link＞部は変数なので、このままではせっかく設定したスタイルもローカル環境では全く反映されず
うぎゃーっ！(# ﾟДﾟ) ということになります、ハイ。
あちこち変数が埋め込まれているので通常通りには見えないけど、大まかなデザインを確認するにはこれで十分。
管理者ページの「テンプレートの編集」でソースを直す→ブログをリロード→また直す・・・の繰り返しは面倒なので、ローカルでできることはローカルでやった方が楽ですね〜
Close.↑
| Comment:15 |
Trackback:0 | Edit | Top↑
Month Archives.
All Archives.
先日は突然お邪魔して失礼しました。
教室で見かけたらお気軽に声をかけてください(^^)
ワタシの行動範囲は東京東部なち夏スク2008〜3期、3日目▼りえさんへバランスボール！なるほど〜。無理しない程度で試してみます♪
（以前、バランスボールの動きが面白くて調子に乗っていたら、腰を痛めてしまって(^^;）
アリナミンは効なち夏スク2008〜3期、2日目あら、偶然！▼クローバーさん
ご無沙汰してます〜。
同じ授業をとっていらっしゃるんですね(^^)
LAN-DISKが壊れた際にはお世話になったので、一度お会いしてお礼を言いたいです。あなち夏スク2008〜3期、2日目偶然ですね♪私もイギリス文学とっています、同じ授業とっているのですね。
お体大丈夫ですか？田町駅から大学までは道も遠いし、教科書なんかも結構重いから体に負担がかかるんですクローバー卒論指導調査票、提出完了りえさんへ事務局から連絡があってよかったですね〜！
「返信用封筒が入ってないから、申込は無効よ」なんて無慈悲に言われたら立ち直れないかも(^^;
ワード可レポート用のWordなち愛しきモリアーティ教授！あらま▼Kouさん
3日目だけじゃなかったんですねー
2日目の会場はホント酷かった。。。ワタシは1時半ごろバス停を降りたのですが、人だらけで大変な思いをしました(^^;
ちょなち夏スク2008〜2期、7日目こちらこそー！▼くろさん
いくら話しても話題が尽きませんでしたなぁ。
次回は時間制限がない店に行きましょうか♪
三田の「くろ○」でもいいし(笑)
岩波講座「哲学」、面白そうでなち愛しきモリアーティ教授！あ、夏コミ２日目、何気に私も行ってました
あまりの人の多さに、近隣にあるホテルのレストランに逃げ込んで夕方３時にようやく会場入りでしたけど
私もお店を出してるkou夏スク2008〜2期、7日目ありがとうございましたー☆卒論のこと、哲学のこと、先生方のこと、ゲームのこと、手土産のことｗ、ホントに話題がつきませんでしたねー♪めっちゃ、楽しかったですー♪
今度は、卒論の初回指導後にでくろ卒論指導調査票、提出完了Aliceさんへ花火大会、良かったですか？(^^)
夜空に咲いた花を見ていると、綺麗さとはかなさとが入り混じってなんとも言えない気持ちになれます。
卒論指導調査票は1ヶ月前から準なち卒論指導調査票、提出完了りえさんへ自分で目標を立てたら、回り道してもなんとか最後までやり遂げたいと思いますよね(^^) ワタシにとっては、今一番の目標は慶應通信卒業ですかねー。
レポート5科目ってスなち夏スク2008〜1期、3日目 はじめまして▼nabochaさん
過去の記事へのコメントでも歓迎ですよ(^^)
上記IDの話は日吉メディアセンターのセミナーで聞いたものを自分なりにあれこれやりました、というものなのでなち卒論指導調査票、提出完了良かったね〜こん♪
卒論指導調査票提出期限に間に合って良かったね (^^)
私も来年には出せるように頑張ります。
さて、昨日は、花火大会行ってきました。
バトルなしで 笑
Alice夏スク2008〜1期、3日目 こんにちは。初めましてnabochaと申します。過去のエントリーにコメントすみません。
上記IDの話を全く知らなかったので、とてもためになりました。ありがとうございます☆nabocha