道化師ラッパンのボヤキ

リンクと行間はいじってなくて、今更となってちょこっといじろうと思う。

1. 記事内の行間が狭いので見やすく20pxに。
2. 記事内のリンクの文字色変更。
3. サイドバー内のリンクの文字色変更。
4. 加えて、リンクにマウスを置くと、右下へずれるようにする。

こんな感じのいじる内容となる。サイドバーの行間は以前いじったので、今回はいじらない。

で、サイドバーには、アーカイブの項目のみリンクが付いてて、別ページへ移動可能となっているが、このリンクだけは、なんぼいじってもマウスが上に乗った時の変更が出来ない。

なんかうまいやり方があるのかどうかは不明 だが、結局、この部分のみ個別で記述することで解決することにした。

スタイルシート変更

例のごとく、mt-static/themes/originalフォルダの、 original.cssの下記の部分を変更。（赤字→青字へ変更）

/* basic page elements */

a { color: #06C; text-decoration: underline; }　→　#6666cc;  /*ページ右半分のリンク色*/
a:visited { color: #369; }　→　#6666cc;
a:hover { color: #900; }　→　#660099; position:< relative; top:1px; left:1px;

.module-content a { color: #96c;  font-weight: bold; }　→　#6666cc; /*サイドバーのリンク色*/ 
.module-content a:visited { color: #bcaace; }　→　#6666cc;
.module-content a:hover { color: #9c0; }　→　:#660099; position relative; top:1px; left:1px;

.module-header a,
.module-header a:visited,
.trackbacks-header a,
.trackbacks-header a:visited,
.comments-header a,
.comments-header a:visited,
.comments-open-header a,
.comments-open-header a:visited,
.archive-header a,
.archive-header a:visited
{
 color: #fff ;　→　#ffffff; 
}

.module-header a:hover,　→　.module-header a:hover{ color: #660099; position: relative; top:1px; left:1px; }
.trackbacks-header a:hover,
.comments-header a:hover,
.comments-open-header a:hover,
.archive-header a: hover
{
 color: #369; 　→　#660099;
}

.module-content a { color: #369; font-weight: bold;}
　→　上記に同じ項目あるので削除
.module-content a:visited { color: #6e849a; }
　→　上記に同じ項目あるので削除
.module-content a:hover { color:#900 ; }
　→　上記に同じ項目あるので削除


/* page layout */

.entry-content { margin: 0px 10px 0px 10px; line-height: 20px;
 }　→　青字追加

と、だいぶこれで最初のテンプレートの雰囲気が変わってきたぞい。これで、何を元にいじったかさえわからないであろう。

次に、エントリー・アーカイブの中の、トラックバックとコメント記入欄の部分のデザインを同じように変更しようと考えてたんやけど、後回しにして・・・

実は、よくよく考えたら、コメントやトラックバックがまだついてないんで、表示のされ方がわからないのであった・・・(ﾉ_･､)

ところで、今までの記事は、メインページを元に変更してたんやけどね。

他２カラムにした、エントリー・アーカイブ,カテゴリー・アーカイブ,日付アーカイブの３つに、うまく反映されているのかチェックしてたところ・・・

エントリー・ アーカイブのページだけ、 entry-footerの表示がずれているのだ。↓

あら？なんでかなーと思いつつ、調べてみると、お先に記事を書いてらっしゃる方がいました。

[参考サイト]

MovableType幼稚園>>エントリーごとに囲みたいけどMTのデフォルトテンプレートでは難しい

はは～ん、この方も書いてらっしゃいますが、メインページ,カテゴリー・アーカイブ,日付アーカイブは、

となっているのですが、エントリー・アーカイブは、

ってな感じで、entry-footerの部分が、 entry-contentから、はみ出しとんです・・・。

 なんじゃいな！と、ツッコミ入れといて・・・、ワシも、 エントリー・アーカイブの中身自体はさわりたくないし、勝手に.entryクラスは見つけてそれで囲いを作ったのが幸いやったので、「囲い」がくずれる心配はないんやけど。

とにかく、囲いと記事の文章とのスキマを、 entry-contentで指定してるのでそれが効いてないのが原因やねんな・・・。ということで、 mt-static/themes/original/フォルダのoriginal.cssを変更しました。 （赤字から青字へ）

/* page layout */

.entry-footer {
 margin: 0 0 20px 0 ;　→　0px 10px 20px 10px
 border-top: 1px solid #ffcc99 ;
 padding-top: 2px ;
 color: #666666 ;
 font-weight: normal ;
}

・・・カテゴリー表示を下へ持ってきているおかげで、エントリー・アーカイブ以外のページでは、 entry-footer部が２行になってしまっているが・・・、今度「カテゴリー表示」を、タイトルの直下に持ってくるように変更しようと思う。

このエントリーが表示される記事の部分である。トラックバックと、コメント記入欄の部分は後回しにして・・・これ以上ごちゃごちゃすると、みにくくなるので、あっさりデザインでいこうと思う。

まずは、構造から調べてみた。

だいたいこんな感じである。記事全体を囲むっちゅーのは、難しいことがわかった。

今回はだいたいこんな感じで変えたい。↓

1. 日付の背景は色をつけて、文字は右寄りに。
2. 記事全体に囲みをつける。
3. 囲みとbataの領域とのスキマは20pxのままで。
4. 囲みと記事内容とのスキマは10pxで。
5. 記事タイトルに背景をつける。
6. フッター上部の線の色を変える。
7. 引用の配色を変更する。

今回はケバい配色いならんように注意してっと・・・。

例によって、mt-static/themes/original/フォルダのoriginal.cssの各個所を変更、つけたし。（赤字から青字へ,青字追加）

/* page layout */

.date-header {
 margin: 0 ;
 padding-bottom: 10px ;　→　padding: 3px ;
 color: #666 ;　→　#666666
 background: transparent url(date-header-bg.gif) repeat-x ;　→　#ffe3c8
 font-size: 14px ;
 text-align: right ;
}

.entry-header {
 margin: 10px 0 ;　→　0px
 padding: 0 0 0 20px ;　→　10px 0px 5px 25px
 color: #900 ;　→　#990000
 background: transparent url(entry-header-bg.gif) 0 0.2em no-repeat ;　→　#ffcc99
 font-size: 18px ;
 font-weight: bold ;             
}

.entry {
 width: 538px ;
 border: 1px solid #ffcc99 ;
}

.entry-content { margin: 0 ; }　→　0px 10px 0px 10px

.entry-footer {
 margin: 0 0 20px 0 ;
 border-top: 1px solid #eee ;　→　#ffcc99
 padding-top: 2px ;
 color: #666 ;　→　#666666
 font-weight: normal ;
}

blockquote {
 margin: 10px; /* 枠線を表示する上下左右の空白 */
 padding: 5px; /* 枠線から文字までの上下左右の空白 */
 background: #c8e3ff; /* 背景色 */　→　#e4e4cb
 border: 2px dotted #999999; /* 枠色 */
 font-size: 11px; /* フォントサイズ */
 line-height: 16px; /* 改行幅 */

どうっすか？いやみのないにぎやかさになったと思うんやけど・・・。記事タイトルの横に画像残しときたかったけど、どうやらタイトルに背景入れると無理みたい。まぁそれは今度アイコンでも足すことにしよう。