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;


(4.) 右サイドバーのプラグイン・各タイトル文字の開始位置を補正。

【変更前】
div#right h2 {
height : 34px;
padding: 5px 0 0 39px;

【変更後】
div#right h2 {
height : 34px;
padding: 5px 0 0 34px;


(5.) 左サイドバーのプラグイン・各タイトル文字の開始位置を補正。

【変更前】
div#secondary-column h2 {
height : 34px;
padding: 5px 0 0 39px;

【変更後】
div#secondary-column h2 {
height : 34px;
padding: 5px 0 0 34px;


(6.) プライマリーカラム(エントリ部分)の別途指定なきテキストリンクにおいて、マウスオーバー時の背景色を変更。

【変更前】
/* リンクの色調節 */
div.section a:link {color : #333;}
div.section a:visited {color : #333;}
div.section a:hover {background-color : #999;}
div.section a:active {color : #666;}

【変更後】
/* リンクの色調節 */
div.section a:link {color : #333;}
div.section a:visited {color : #333;}
div.section a:hover {background-color : #fbb;}
div.section a:active {color : #666;}


(7.) 引用時(blockquote)の背景色をついでに変えてみる。枠線の色・線種・幅、枠のサイズはそのまま。

【変更前】
blockquote {
width : 420px;
margin : 2px 0 2px 2px;
padding : 4px;
background : #ccc;
border : 1px dashed #96f;
border-left : 4px solid #96f ;
}

【変更後】
blockquote {
width : 420px;
margin : 2px 0 2px 2px;
padding : 4px;
background : #dee;
border : 1px dashed #96f;
border-left : 4px solid #96f ;
}


(8.) 右サイドバーのボトムの太さと色を変更。

【変更前】
div#right {
margin : 20px 0;
width : 200px;
float : right;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 6px solid #000;

【変更後】
div#right {
margin : 20px 0;
width : 200px;
float : right;
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 2px solid #333;


(9.) 左サイドバーのボトムの太さと色を変更。

【変更前】
div#secondary-column {
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 6px solid #000;

【変更後】
div#secondary-column {
border-left: 1px solid #000;
border-right: 1px solid #000;
border-bottom: 2px solid #333;


(10.) コピーライトの年表示ができる単変数を追加。これは別の調べごとをしているとき、Paroday 氏のブログ で発見したもの。
   

  <%template_copyright_date>


このブログのいちばん下にある
『Copyright (C) 2012 oyoyo Memo Blog. All rights reserved.』
の『2012』の正体はこの単変数です。数字で「2012」と書いているのではありません。このまま放置しても、2013年になれば自動的に『2013』に、2014年になれば自動的に『2014』になると思います。

現在のところ、FC2ブログ公式マニュアル テンプレート用 変数一覧 にはこの単変数は載ってないですね。前にこの変数一覧をじっくり見たときにもこの単変数はなかった。あったら気付いてたと思う。






ほかにも改修したいところがあったりするのですが、小生のお粗末技術レベルではそれを「すぐに!」というわけにはいかず、少々時間がかかりそうです。

jQuery を存分に活用したみたいな、しかもシンプルな表示のテンプレを見つけてDL。もうね、パッと見、ブログとは思えない感じのすごさ。期間限定でそのテンプレに変更してみてもいいかなと思う。けど、そのためにはちょっと作業が必要。jQuery を使ったプラグインが Lightbox 2 (v2.05)の prototype.js とコンフリクトするという問題を何らか解決する必要があるのです。

このコンフリクトをわりと簡単に回避する方法があるらしい。でも、この際、Lightbox 2 の最新バージョンを導入するか、あるいは jQuery 系で同等の機能をもつ Javascript Library を導入するか。

The Lightbox Clones Matrix « planetOzh
Ajax (JavaScript) Library List (Ajaxライブラリ一覧)





以上、テンプレ(CSS)のカスタマイズ、リアルタイム・すぃみゅれいしょんでは Web Developer にお世話になってます。

Web Developer :: Add-ons for Firefox
Web Developer | Mozilla Japan の公式アドオン紹介サイト

↑いずれも User Agent が Firefox でなければダウンロードボタンは表示されないと思います。

守備範囲は若干異なりますが、類似の機能をもつアドオンとして、
Firebug :: Add-ons for Firefox
EditCSS :: Add-ons for Firefox などがあります。

Web Developer がいちばん使い勝手がいいのかなと思う。ただし CSS 内で説明に使われている日本語の文字化けはなんとかならんかなぁと。。。


それから色彩の考察と指定でしばしば訪問させていただくサイト。

色のみじん切り
カラーチャート(RBG値) - 超初心者のためのホームページ作成講座
カラーコードの鉄人 カラーコード一覧

さまざまに工夫されて作成されたカラーチャートを、そのときどきの目的に合わせて活用させていただいています。御礼。







関連記事
スポンサーサイト

コメント

コメントの投稿


ブログの管理人のみ閲覧できるコメントとして投稿する

トラックバックURL (言及リンクは不要です。)

http://oyoyomemo.blog7.fc2.com/tb.php/174-d22a3201
» このエントリにトラックバックする (FC2ブログユーザー)

 | HOME |