ヘッダー部の背景画像と記事の見出し、文字色＆リンク色などなど、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.
ワタシは結局６科目目の「国文学古典研究２−２」が間に合わず、１０月試験は５科目受験となりました。
間に合わず、というか、借りてきた仮名草子全kouレポート完成すごい！なちさんのやる気にはいつも励まされますよー。
でもお体には気をつけてくださいね、ほんと。(にゃんズも)
わたしは歴史(日本史)の再レポート放置気味です…そろそろちゃはるたまクロノの歯肉炎治療ご無沙汰です。やっと家に帰ってきましたご無沙汰です。いかがお過ごしですか。
暖かい励ましの言葉をありがとうです。
感謝です。
帰ってきて 主人が休みを取っていてくれ お掃除もお料理もしてくれ、レポーCon_neigeクロノの歯肉炎治療定期検査▼Kouさん
クロノの食欲がなくなってきたのが一番心配なんですが、日によってはがっつくのでその時の気分なのかもしれません(^^;
ハンバーグちゃん、どこかでご出産？？なち『ラケス』三昧そういえば▼Kouさん
「国文学古典研究」、ありましたね。すっかり忘れていました(^^; ワタシは国文科卒業なんですが、国文学にはイマイチ興味を持てずそのまんま。
レポート採点基なちクロノの歯肉炎治療よくケアなさってますね
うちは、母ネコのハンバーグさまがすごく痩せてきてるのが気になります。妊娠してたハズなんだけど。。。どうやら、どっか違うところで出産しちゃkou『ラケス』三昧江戸文芸、「国文学古典研究２−１」と「２−２」です。今回は「２−２」の方で、江戸時代後期になります。物語が「説教臭さ」から「面白さ」に転化する次期にあたります。
kou『ラケス』三昧読みにくい文章はつらいよ▼Kouさん
江戸文芸って、科目名でいうと何に当たるのですか？
一度放棄してもまたチャレンジされるとは、色々な分野に興味がおありなんですねー。
岩波のプラトン全集なち『ラケス』三昧おつかれさまです
こちらは専門外なんですが、江戸文芸に再挑戦してます。
はい、「再」挑戦。以前、科目試験に受かっていたのにレポートがいつまでも合格しないんで放kou完全オフこれから本番▼りえさん
3本もレポート完成したなんて、凄すぎです！さらに論理学と西洋史概説2も？！でも身体が資本です、無理はしないでくださいね。
論理学は真理関数理論と量化理なち完全オフおつかれさまですー▼Kouさんへ
お仕事ご苦労様です。
Kouさんの猫ちゃん、寂しかったのかもしれませんよ。「わたしを置いていくなんてー！」とか？(笑)
肉球、実物は結構シワもあって色なち完全オフはじめましてはじめまして。ゆっち(ペルシャ猫もうすぐ三歳)の母と申します。私も慶応通信の文�気任后�実はこの夏スクも行ってました。(天候に恵まれない三期でしたね)初スクで、ひとりゆっち完全オフおつかれさまです
こちらはさっそくお仕事、でした
うちのネコちゃんには、ちょっと距離置かれています（＾＾； きっと、暑いから、でしょうね。
うちの子たちも、外kou夏スク2008〜3期、7日目▼Kouさんへ夏スク、お疲れ様でした。
いや〜、3期は何故か長く感じて疲れました(^^;
Kouさんをはじめたくさんの方とお会いできて、ワタシにとっても濃い夏スクでした。一生の思いなち夏スク2008〜3期、7日目▼きむらさんへコメントありがとうございます♪
論理学の飲み会でワタシの前にいらした方ですよね？？
間違っていたらスミマセン！訂正お願いしますっ
夏スクという一大イベント（なち