JeffreyFrancesco.org

しました、ハイ。見れば分かりますかそうですか。

背景画像とかやっぱりなんか合わんというか、ごちゃっとし過ぎな感がしたので、さくっと削除。ついでにサイトのロゴもさくっと削除。作り直そうとも思ったけれど面倒くさいのでテキスト。なんでフォントが Palatino なのかは問わないように。

3カラムレイアウトも止めました…で、3カラムっぽく見える1カラムというか、左右の余白を多めに取った1カラムの余白にエントリ情報や広告を配置する、みたいな感じにしてます。エントリ情報部分を左にピタッとくっつけたかったのでセンタリングもやめっと。

配色も今までのはほぼ完全にモノトーンの濃淡でしたけど、やっぱりこれじゃあリンクなどが分かり辛いよなあ…という反省の元、白地に暖色系のグレーというか、微妙にブラウン・ベージュ寄りのカラーを基調にしてみた…つもり（色を言葉で表現するのは難しいものだ）アクセントにダークレッド、リンク色も一般的な青色（通常よりはダーク目ですが）に変更。あと ins にだけやや薄めの黄色を使ってみた…インラインレベルの時は文字背景色に、ブロックレベルの時はブロックの周りのボーダーに。紙の書類で蛍光ペンでラインを引いたり周りを囲ったりしますよね…そんなイメージです。笑

という訳で全体的に余白部分も大きく広げましたので、レイアウト・配色と合わせて以前より読みやすくなったんではないかなあと思います。やっぱり私はこれくらい、すっきりシンプル目な方が好みなのだなあ、とか再確認。

Continue reading

CSS てのは弄り始めたらなかなか止まらないもので(汗)先日から立て続けに色々なところを細々と変更しておるのでございます。

いちおう前例に倣って(?)先日までからの変更点を箇条書き。

• さりげなく背景右側に Organ の画像を置いてみた。ウチにある XK-3 を撮影して加工したもの。
• 背景画像が見えつつテキストが読みづらくならぬ程度に opacity プロパティ使ってサイドバーをほんの少し透過。
• Firefox でもメニューのタブが角丸になるように -moz-border-radius プロパティを入れた。
• ページの一番上に戻るリンクの場所とデザインを調整。
• 他いろんなところの margin, padding を微調整。

そんなところ…だと思います(笑)細かくメモ取ってなかったから、ところどころ忘れてる気がしますが。

ご覧になって分かる通り opacity とか border-radius とか CSS3 的なプロパティを使っておりますので、Windows の IE では意図した通りに表示されませんが、知った事ではなく(笑)とはいっても一応 Parallels Desktop 上の Windows7 + IE8 で確認は取っておりまして、見たところとりあえず閲覧に支障を与えるような崩れ等は発生してなかったし、問題ないでしょうその辺。

でも実は IE8 について、一つどうしても謎なことがあったのでございます。それは…次回に続く。単純に私が IE8 の設定の変なところを弄ってしまってた事による勘違いでした…よって次回に続くはありません。汗

勢いで立て続けに変更。まあ半分くらいは既に出来上がってたものを本 CSS に書き足すだけなので簡単でしたが。

ちう訳で、以下箇条書き。

• Header と Footer にバックグラウンド画像（パターン）を敷いた。
• Header 下の Navigation をタブっぽくしてみた。-webkit-border-radius とか初めて使った。
• あとはその部分の color 調整を細々と。

ていうか明日は27日の発表会のリハで大阪行きなので、早く寝なくては…

暇を持て余していたので色々変えた。以下、箇条書き。

• ふと思い立って Google AdSence を縦長バナー（160×600のもの）にしてみた。
• そのままではサイドバーがものすごく長くなってしまうので、レイアウトを3段組に変えた。
• エントリ ID がページによって全然違うものを吐いてたので(汗)プラグインの該当部分を修正した。
• 自分の Twitter アカウントへのリンクを付けた。アイコンは貰ってきたやつだが、どこからか忘れた…
• サイドバーのラベル部分のフレーズをちょっと考えて書き直した。
• フォントサイズを一回り大きくした。

以上。それだけ…