ヘッダー部の背景画像と記事の見出し、文字色&リンク色などなど、cssをカスタマイズして使っていました。が、数ヶ月も経ってくるとカスタマイズ病が再発し、あちこちいじりたくなってくる(笑)
カスタマイズはほとんど「
はじめてのFC2ブログカスタマイズ」の通り。
<div>タグの階層とpaddingの指定に気をつければ結構簡単。
一番外側のdivタグのid属性「container」にコンテンツ幅を指定。
同じく、id属性「primary-column(中央部)」「secondary-column(左側)」をそれぞれ持った<div>タグ(2つ)を、id属性「wrapper」を持つ<div>タグで囲って子要素にし、「wrapper」を左側に回り込ませる(float:left)。
さらに「wrapper」と
同階層のid属性「extra-column(右側)」を持つ<div>タグを右側に回り込ませる(float:right)。
ブラウザのバグを利用したテクニックらしいけど、とりあえず表示されればOK(笑)
でも文字で書いたらややこしいなぁヽ(;´Д`)ノ
自分のための覚書の意味もあるので、ソースを載せておこうっと・・・
(このブログでは属性名は若干変えてます)
<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」することで解決v
レイアウトはしばらくこの3カラムで行こうと思っとります。
ヘッダーの背景画像は近いうちに変更予定なんですが、ま、今日はいいや(笑)
<追記1(4/21)>
投稿してから「...read more」をクリックして記事全体をみてみたら、この記事だけレイアウト崩れが発生。
cssの設定やらHTMLの書き方やら調べていたんだけど原因判明。
記事内に<>(本当は半角文字)を使っていたせいでした。
ああ、なんて初歩的なミス・・・orz
IE6とMozillaでしか確認してないけどとりあえず致命的な崩れは発生していない模様・・・、ホントかね??ま、今日はいいや(笑)
<追記2(4/22)>
ヘッダー部の背景画とカレンダー部のズレが気になって、ちょっと修正。コンテンツ幅も860pxから840pxに。背景のサイドバー(?)もひとまず取ってみたけど、スクロール時の重そうな描画が無くなった??
<追記3(4/22)>
css修正とデザインの確認はローカルでやりました。
HTMLソースコードの<head>タグ内に外部cssファイルを指定する<link>タグがありますが、ここの
href="<%css_link>"をローカルに置いたcssファイルのパスに変更すればOK。
<%css_link>部は変数なので、このままではせっかく設定したスタイルもローカル環境では全く反映されず
うぎゃーっ!(# ゚Д゚) ということになります、ハイ。
あちこち変数が埋め込まれているので通常通りには見えないけど、大まかなデザインを確認するにはこれで十分。
管理者ページの「テンプレートの編集」でソースを直す→ブログをリロード→また直す・・・の繰り返しは面倒なので、ローカルでできることはローカルでやった方が楽ですね〜
Close.↑
しかも A判定♪
すばらしい!! w(( ̄ ̄0 ̄ ̄))wワンダフォーー!!
論理学試験のコメントありがとございます♪
考え方や書きAlice貧血との戦い2008(8日目)〜復調 やはりこのところの不順な気候も
体調くずす原因なんでしょうか。
人間でもだるだるしますものね。
再発には一瞬びっくりしたけど
無事退院できて良かったです。
ルッpandaクロノ・トリガー、DSで今冬発売決定!改悪はいただけない▼Kouさん
ワタシもSFC版は何周したか分からないほどです(笑)それと比べるとPS版はロード時間が遅くてやる気失せました。。。こういう改悪だけはやめて欲しい。。まぁ、DSなちクロノ・トリガー、DSで今冬発売決定!そのまんまの移植がいいですよね。
まあ、スーファミ版をやり込んだもんだから、ちょっとプラスアルファがあったらうれしいけど。サイドイベントの追加、とか。
できkou貧血との戦い2008(5日目)〜退院ありがとう!▲Aliceさん
入院させていると猫も飼い主も何かと不安やストレスが蓄積していくので、無事退院できて良かったです(^^)
完全復帰おめでとうございます
ワタシは大したこなち貧血との戦い2008(5日目)〜退院退院おめでとうございます!
おうちで安心して、どんどんよくなるといいですね。
病院通いも大変でしょうけどがんばってください。kotomo貧血との戦い2008(5日目)〜退院ルッカちゃん退院おめでとう〜♪
これで、なちさんも少しは、安心できますね☆
ようやく、完全復帰です!!
これもなちさんの暖かいメールのおかげです♪
Alice貧血との戦い2008(4日目)〜退屈ありがとうございます▼Con_neigeさん
おかげさまでルッカ退院できました♪
コメントありがとうございます。
ペットは家族同然ですから、ワンちゃんの持病は心配ですね。
中耳炎での入院時なち試験が近づいてくると、速読スキルが欲しくなるりえさんへコメントありがとうございます(^^)
お返事遅くなってスミマセン。
学習のペースといい、単位取得状況といい、
本当に似ていますね!ワタシの方こそ驚きました。
同じなち貧血との戦い2008(4日目)〜退屈お大事に今晩は 大変ですね。家は 犬を飼ってます。
一度 中耳炎になった時に やはり入院しました。そのとき 横に 肝臓病の猫が 点滴されてて 見ていてつらかったです。犬Con_neige試験が近づいてくると、速読スキルが欲しくなる確かに(笑)>毎日同じ文章読ませるんで、速度が上がるのも当然、というか。。
なるほど(笑)
大学のテキストでも3回読めば、読む速度は確かにupしますわ(・∀・)
卒論云々以なち試験が近づいてくると、速読スキルが欲しくなるどうもです
ずいぶん昔に買いましたよ。速読通信講座。
あんまり身に付かなかった・・・というか、毎日同じ文章読ませるんで、速度が上がるのも当然、というか。。
卒kou貧血との戦い2008(2日目)〜威嚇ありがとうです▼kotomoさん
ご無沙汰しています!いつもROMばかりでゴメンナサイ
ご心配いただきありがとうございます。
元気はあるようなので貧血が解消されれば退院できると思うのなち貧血との戦い2008(2日目)〜威嚇ルッカちゃん、早くよくなるといいですね(ノω・、)
早期発見&食欲はあるとのことだから
きっと元気になると信じてます!
入院ってやっぱりストレスになりそうですよね・kotomo貧血との戦い2008(1日目)〜再発 元々は・・・▼Kouさん
そう、クロノトリガーからいただきました。
でも元々は、新婚旅行で行ったイタリアの都市にちなんで「ルッカ」と「シエナ」と名づけたのがきっかけなんです。
なち