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.blog.fc2.com/tb.php/12-82c09901
» このエントリにトラックバックする (FC2ブログユーザー)

 | HOME | 

Recent Entries

 

East Turkistan

日本ウイグル協会

Uyghur American Association

世界ウイグル会議

 

Blue Ribbon

内閣官房 拉致問題対策本部

外務省 北朝鮮による日本人拉致問題

警察庁 北朝鮮による拉致容疑事案について

救う会 全国協議会

特定失踪者問題調査会

 

メールフォーム

Name (HN)

Mail

Subject

Comment

 

QRコード

QR

Special Thanks

Powered by FC2

This template designed by Underground

Some images displayed with Lightbox

Some icons designed by フリーWEB素材サイト「DOTS DESIGN」

 

管理人

oyoyo (oyoyomemo)

 oyoyo (oyoyomemo)
 

   RSSフィード