oyoyo Memo Blog

時事と雑記。気が向いたときに更新するブログ。

テンプレート(CSS、HTML)のカスタマイズ 覚え書き(2)

どこをどーいじったのか、のメモ。

前回いじったときのメモは oyoyo Memo Blog テンプレート(CSS、HTML)のカスタマイズ 覚え書き

改変・変更して、もし変になったら、なにはともあれ、とりあえず、一旦もとにもどす。これを原状恢復の法理という。

今回は主に「メイリオ」を意識したカスタマイズ。ブラウザの「メイリオ」フォントの「サイズ16」(Firefox や Google Chrome で標準的なサイズ)で見たときの見映えを改善。加えて以前から少し気になっていた箇所を幾つか補正。

「MS Pゴシック」の「サイズ16」、「メイリオ」の「サイズ16」、どっちで見ても「程よく見れる」ようになれば・・・と思いながら調整してみました。同じ「サイズ16」でも、「メイリオ」はデカイ。


以下、(1.) ~ (9.) は CSS。(10.) は HTML。


(1.) 記事本文内のリンクの下線を非表示。

【変更前】
div.entry-body a:link {color: #33f; border-bottom: 1px dotted #333; text-decoration: none;}
div.entry-body a:visited {color: #33f; border-bottom: 1px dotted #333; text-decoration: none;}
div.entry-body a:hover {color: #63c; background-color: #ccf; border-bottom: 1px solid #63c; text-decoration: none;}
div.entry-body a:active {color: #33f; border-bottom: 1px dotted #333; text-decoration: none;}

【変更後】
div.entry-body a:link {color: #33f; text-decoration: none;}
div.entry-body a:visited {color: #33f; text-decoration: none;}
div.entry-body a:hover {color: #63c; background-color: #ccf; text-decoration: none;}
div.entry-body a:active {color: #33f; text-decoration: none;}

おそらく重要なのは、リンクがどこにあるのか、どこがリンクになっているのかを、なるべく直感的に認識してもらえるようにしておく、ということで、これまではマウスポインターを乗っけなくても最初から下線があったほうがいいかなと思って、リンクの下線を表示していたのです。が、上下の行で(見た目、二階建てのような格好で)リンクがある場合、フォントやそのサイズによっては、上の行のリンクの下線が下の行のリンク部分に被さって表示されてしまうことが多々あり、これを解消するため、記事本文内のリンクの下線を非表示にしました。なお、マウスオーバー時の背景色などの設定はそのまま。


(2.) 記事本体部分の背景を画像から背景色に変更。これで1000分の何秒かは表示が速くなったかもしれません。

【変更前】
div.entry-body {
padding : 10px 20px;
background: url("http://blog-imgs-26.fc2.com/u/n/d/underground7/ug_com_back.jpg") repeat-y #fff;

【変更後】
div.entry-body {
padding : 10px 20px;
background-color : #eee;

【再変更後】
div.entry-body {
padding : 10px 20px;
background-color : #f9f9f9;

 ↑さらに明るくしてみました。(2012/06/19)

【再々変更後】
div.entry-body {
padding : 10px 20px;
background-color : #fcfcfc;

 ↑さらに明るくしてみました。(2012/06/23)


(3.) 記事タイトル部分の背景を画像から背景色に変更。これにより、長いタイトル(たとえば2行、3行にわたるタイトル)のエントリも、タイトル部分のレイアウトが崩れるおそれを気にせずにできるようになりました。ついでに記事タイトルの文字回りの余白を修正。

【変更前】
div.section h2 {
padding: 7px 0 4px 12px;
background : url("http://blog-imgs-26.fc2.com/u/n/d/underground7/lefttop.gif") top left repeat;

【変更後】
div.section h2 {
padding: 7px 12px 4px 12px;
background-color : #fdd;


スポンサーサイト

テンプレート(CSS、HTML)のカスタマイズ 覚え書き(2) の続き » » »

2011/3/18/ にリリースされた Lightbox 2.05 を試用してみる

[テンプレ js 動作確認用エントリ]

うまくいかなければ元のテンプレの状態に戻す予定。その場合、このエントリは、
はぁ? てな感じの、わけのわからない存在となる。

うまくいった場合でも、これまでにアップロードした画像のうち、サムネイルを作成してエントリで使用した全ての画像のリンクタグに "rel" 属性( rel="lightbox")を付加するのか? どーしようか? という問題がある。

css, js, images... とりあえずアップロードし忘れたファイルはないはず。
css, js ファイル内の変更も、たぶんこれでいいはず。

興味のある方は以下の画像をどれでもクリックしてみてください。
なにぶん、"実験" ですので、クリックは自己責任でお願いします。(笑)


テスト用画像1(拾い物)  テスト用画像2(拾い物)

カン・チョクトの政権交代論_kan_chokuto_minshu_4256





画像をグループ化して表示する試み。

test_f22_raptor_cool.jpg  test_f22_raptor_cool2.jpg

test_euro_fighter_06.jpg test_euro_fighter_05.jpg test_euro_fighter_04.gif

test_F2_08.png test_F2_00.png test_F2_10.png

test_shinshin_05.jpeg  test_shinshin_04.jpeg



Lightbox 2
http://www.huddletogether.com/projects/lightbox2/
または、
http://www.lokeshdhakar.com/projects/lightbox2/



2011/3/18/ にリリースされた Lightbox 2.05 を試用してみる の続き » » »

テンプレート(CSS、HTML)のカスタマイズ 覚え書き

(1.) ~ (14.) は CSS。(15.) ~ (19.) は HTML。


(1.) ブログ全体の別途指定なきテキストリンクにおいて、マウスオーバー時にアンダーラインを表示。
(2.) ブログ全体の別途指定なきテキストリンクにおいて、訪問済みのリンクを含め、文字色を一定にする。

【本来】
a {
text-decoration : none;
}

a:link {color : #eee;}
a:visited {color : #666;}
a:hover {background-color : #999;}

a img {
border-style : none;
border-width : 0px;
text-decoration : none;
}

【改変】
a {
text-decoration : none;
}

a:link {color : #eee;}
a:visited {color : #eee;}
a:hover {color : #eee; text-decoration : underline;}
a:active {color : #eee;}

a img {
border-style : none;
border-width : 0px;
text-decoration : none;
}

テンプレート(CSS、HTML)のカスタマイズ 覚え書き の続き » » »

 | HOME |