道化師ラッパンのボヤキ

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

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

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

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

エントリー・ アーカイブのページだけ、 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; /* 改行幅 */

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

サイドバーのメニューは項目ごとにまとめて、線で囲みたい。っていうことで、とにかくサイドバーの構造を調べてみた。

と、こんな感じになっている。今回は、各メニュー項目は囲みをつけて、適当に間隔をあけて、行間もつめたい。

1. 左右のスキマがいっぱいいっぱいなので、15pxあける。
2. カテゴリー，最近のエントリー，アーカイブ，検索の各縦のスキマを10pxあけたい。
3. 各moduleに囲みをつける。（項目ごとに囲み）
4. 各項目のタイトルの背景を変更。
5. 文字の行間を14pxにつめる。

と、こんな感じに変更しようと思う。

ところで、実は色々ためした結果、左右のスキマと縦のスキマをあけて、囲みをつけることに苦労した。 module-headerとmodule-contentの２つでいじっていたからだ。

例えば、カテゴリーの項目の場合、class="module-categories module"の部分でいじってやれば、解決するのであるが、なかなかうまくいかなかったのだ。一生懸命module-categories moduleで指定してたんやけど、うまくいかず、結局module-categoriesで指定してやるだけでよいみたい。

1）moduleの部分に色々つけたし（青字）。一部変更（赤字→青字へ）。

/* modules */

.module-categories,
.module-archives,
.module-search {
 width: 188px ;
 margin: 10px 15px 0px 15px ;
 border: 1px solid #cc00cc ;
 background: #ffecec ;
}

.module-syndicate {
 width: 188px ;
 margin: 20px 15px 0px 15px ;
 border: 1px solid #cc00cc ;
 background: #ffffee ;
}

.module-powered {
 margin: 20px 0;　→　10px 15px 0px 15px 
 border: 1px dotted #cc00cc ;
 width: 188px ;
 background: #ffffee ;
}

これで、囲みがついてスキマがあいた。↓

2）次に、タイトル画像（header-bg.gif）を作ってＵＰし、その変更と、行間の変更。（赤字削除、赤字→青字へ）

/* basic page elements */

.module-header,
.trackbacks-header,
.comments-header,
.comments-open-header,
.archive-header {
 /* ie win (5, 5.5, 6) bugfix */
 p\osition: relative ;
 width: 100% ;
 w\idth: auto ;
 
 margin: 0 0 1px 0 ;　→　0px
 padding: 5px 5px 5px 25px ;
 color: #fff ;
 background: #799de7 url(colitem-header-bg.gif) 0 50% repeat ;　→　transparent url(header-bg.gif)
 font-size: 12px ;
 font-weight: bold ;
 text-transform: uppercase ;
 line-height: 1 ;
}


/* modules */

.module-powered .module-content {
 margin: 0 ;
 padding: 10px ;　→　3px 5px 3px 8px
 border: 1px solid #ccc ;
 color: #333 ;
 background: #dcd8d8 url(powered-bg.gif) repeat-x ;
 }

.module-list-item { 
 padding-left: 14px ;
 background: url(li-bg.gif) 0 0.3em no-repeat ;
 line-height: 150% ;　→　14px
}


/* two-column-left tweaks */

.layout-two-column-left .module-powered .module-content {
 margin-right: 20px;
}

必死のパッチで、やっと完成！(;´Д`A ```　色あいがドぎついかな・・・↓

まずは、サイドバーの背景の色をめいいっぱい下に広げて、上下左のスキマをなくしたいのだ。具体的には画像の通り。

1. 左側のスキマが20pxあるので0pxにつめる。
2. alphaの幅が200pxなので、 220pxに変更。
3. 上のスキマが20pxあるので0pxにつめる。
4. alpha(サイドバー)の背景部分をコピーライトいっぱいまでつめる。

と、こんな感じである。

1）mt-static/themes/original/フォルダのoriginal.cssにつけたし。（赤字から青字へ）

で、page layoutと、two-column-left tweaksで、同じ項目が並んでいる場合、two-column-left tweaksの記述の方が優先されるみたいなので、page layoutの方の記述は削除してしまいました。

/* page layout */

#alpha { margin: 20px 0px 20px 20px; width: 260px; }　（削除） 　　
#beta { margin: 20px 0 0 40px; width: 420px; }　（削除）


/* two-column-left tweaks */

.layout-two-column-left #alpha {
 height:100%;　（追加）
 width: 200px;　→　220px
 background-color:#ffcc66;
 margin: 0px; 　（追加）
}

.layout-two-column-left #beta {
 width: 540px;
 margin: 20px 0 0 20px;
}

・・・っと、あれ？下にいっぱいいっぱいまで広がらないぞ・・・。何度やってもダメ。(;´д｀)

ほらこんな感じ・・・。

検索してあちこち調べてみたら、100%の記述をしても無理みたいね・・・。しゃーないので、 #ffcc66の背景は、画像で対処することに・・・。

2）800px×4pxの横長の画像（bar-l-bg.gif）を用意して、original.cssの以下の部分を書き換え。（赤字から青字へ）

/* two-column-left tweaks */

 .layout-two-column-left #container-inner { background: none; }　→　#ffffee

 .layout-two-column-left #pagebody {
 background-color:#ffffee;　→　background: transparent url(bar-l-bg.gif)  repeat-y;
}

よっしゃ！できたできた。