oyoyo Memo Blog

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

テンプレート(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;
}

(3.) 右カラムの高さをトップ画像の矢印の上辺の高さまで下げる。
(4.) 右カラムのボトムの下にも (3.) でできるのと同じだけの余白を作る。
(5.) 右カラムのボトムをやや太くする。

【本来】
div#right {
        width : 200px;
    float : right;
        border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;

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


(6.) 左カラムのボトムも右カラムのボトムと同じだけ太くする。

【本来】
div#secondary-column {
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;

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


(7.) 記事本文内のリンクの装飾(マウスオーバー時の背景色など)を変更。

【本来】
div.entry-body a:link {background-color : #aaa;}
div.entry-body a:visited {background-color : #999;}
div.entry-body a:hover {color : #eee;}
div.entry-body a:active {color : #666;}

【改変】
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;}


(8.) 記事フッター部の背景色と文字色、文字サイズを変更。

【本来】
div.section ul.entry-footer {
    padding : 5px 10px 5px 10px;
    list-style-position : inside;
    text-align : right;
    background-color : #666;
    border : 1px solid #000;
    font-size : x-small;    
    }

div.section ul.entry-footer li {
    display : inline;
    list-style-type : none;
    color : #ccc;
    }

【改変】
div.section ul.entry-footer {
    padding : 5px 10px 5px 10px;
    list-style-position : inside;
    text-align : right;
    background-color : #ccc;
    border : 1px solid #000;
    font-size : small;    
    }

div.section ul.entry-footer li {
    display : inline;
    list-style-type : none;
    color : #333;
    }


(9.) コメントフッター部の文字色を変更。

【本来】
ul.comment-footer li {
    display : inline;
    list-style-type : none;
    font-size : small;
    color : #999
    }

【改変】
ul.comment-footer li {
    display : inline;
    list-style-type : none;
    font-size : small;
    color : #ccc
    }


(10.) トラックバック URI の文字色を変更。

【本来】
p.trackback-uri {
    color : #999;

【改変】
p.trackback-uri {
    color : #ccc;


(11.) トラックバックのフッター部の文字色を変更。

【本来】
ul.trackback-footer li {
    display : inline;
    list-style-type : none;
    color : #999;
}

【改変】
ul.trackback-footer li {
    display : inline;
    list-style-type : none;
    color : #ccc;
}


(12.) 左カラム・各プラグインのタイトル文字列開始位置を少しだけ右にずらす。

【本来】
div#secondary-column h2 {
    height : 34px;
    padding: 5px 0 0 35px;

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


(13.) 右カラム・各プラグインのタイトル文字列開始位置も少しだけ右にずらす。

【本来】
div#right h2 {
    height : 34px;
    padding: 5px 0 0 35px;

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


(14.) 引用時(blockquote)の枠線の色・線種・幅、ならびに枠のサイズを変更し、枠内に背景色を追加。

【本来】
blockquote {
    width : 300px;
    margin : 20px 0 20px 50px;
    padding : 0.5em;
    border : 1px solid #333;
    }

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


(15.) 記事タイトル部分をマウスポイントしたときの「title」を変更。

【本来】
<h2 class="entry-header"><a href="<%topentry_link>" title="「<%topentry_title>」の永続的アドレス"><%topentry_title></a></h2>

【改変】
<h2 class="entry-header"><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></h2>


(16.) 「続きを読む」のリンク表記に記事タイトルを含むように単変数を追加。

【本来】
<p class="entry-more"><a href="<%topentry_link>" title="「<%topentry_title>」の続きを読む">続きを読む &raquo;</a></p>

【改変】
<p class="entry-more"><a href="<%topentry_link>" title="<%topentry_title> の続き"><%topentry_title> の続き &raquo; &raquo; &raquo;</a></p>


(17.) 記事のフッターに投稿時刻を表示する単変数を追加。

【本来】
<li class="date"><%topentry_year>-<%topentry_month>-<%topentry_day>&nbsp;|&nbsp;</li>

【改変】
<li class="date"><%topentry_year>/<%topentry_month>/<%topentry_day> <%topentry_hour>:<%topentry_minute>&nbsp;|&nbsp;</li>


(18.) コメントのフッターに投稿受付時刻を表示する単変数を追加。

【本来】
<li><%comment_year>-<%comment_month>-<%comment_day>&nbsp;|</li>

【改変】
<li><%comment_year>/<%comment_month>/<%comment_day> <%comment_hour>:<%comment_minute>:<%comment_second>&nbsp;|</li>


(19.) トラックバックのフッターに着弾時刻を表示する単変数を追加。

【本来】
<li>|&nbsp;<%tb_year>-<%tb_month>-<%tb_day>&nbsp;|</li>

【改変】
<li>&nbsp;<%tb_year>/<%tb_month>/<%tb_day> <%tb_hour>:<%tb_minute>:<%tb_second>&nbsp;|&nbsp;</li>


その他、「送信」ボタンを「確認」ボタンとするなどの日本語表記の変更が数箇所。
とりあえず、スタイルが突然崩壊なんてことにならないことを祈ります。






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

コメント

コメントの投稿


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

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

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

 | HOME |