« 2006年03月 | メイン | 2006年05月 »

2006年04月18日

MovableTypeのバナー

powered

このバナーはどこに落ちてんのかな~とおもてたら、なんとサーバーにUPしているフォルダの中にあったんやね。

場所は、 mt-static/imagesフォルダpowered.gif。 早速サイドバーへ追加しました。

<div class="module-powered module">
   <div class="module-content">
      Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>

<div class="module-powered module">
   <div class="module-content">
      <a href="http://www.sixapart.jp/movabletype/" target="_blank" title="Movable Type <$MTVersion$>"><img src="http://m.vv.cx/b_mt/mt-static/images/powered.gif" width="128" height="22" border="0"></a>

と変更。

ついでにカウンターと、かりてるサーバーのバナーもつけました。

20060418-01

※カウンター画像は、Snow Moonさんからいただきました。

2006年04月17日

タイトルの左横にアイコン表示

タイトルの横がせっかくあけれたので、アイコンでも表示したいなぁ~と考えていた。

実際な~~んも表示のやり方とか考えてなかったんやけど。

アイコンについては、初めは、「カテゴリ毎のテーマに沿ったアイコンを作って表示させよう!」と考えたけど、 カテゴリまだまだ少ないしなぁ~・・・んでもって、これから増えていったらアイコン作りまくるのもなんやなぁ~・・・ とか考えるようになっていった。

  1. カテゴリとは関係ないアイコンを表示させることに。
  2. アイコンの画像が入ったフォルダからランダムに1つ取り出して表示。

とまぁ、こんな条件で検索してみると・・・MTPhotoGalleryっちゅう、 プラグインがあるらしいのだ!

>>きままにポロポロ::MTPhotoGallery を参照させていただくことに。

おぉ!画像をクリックしたら、関連ページへジャンプする機能もあるらしい。案外高性能なんね。

●まず、MTPhotoGallery紹介のサイトへいき、PhotoGallery.zip (1.1.1.0 ? 2005-09-04) をダウンロード。

●解凍したら、PhotoGallery.plを、 mt.cgiと同じディレクトリにあるpluginsフォルダに入れます。

●一方、アイコンに使用する画像を数点用意し、 mt.cgiと同じディレクトリにフォルダを作って入れます。(今回は、 65px×65pxの画像をtitle-imgフォルダを作って入れました。 )

●テンプレートのメインページを開き、画像を表示させたいところに、下記のタグを書けばOK。(青字追加)

<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<div class="head-img"><MTPhotoGallery sort_order="random" path="/title-img/">
<img src="<MTPhotoGalleryImageLink>"></MTPhotoGallery>
</div>
<div class="head-title"><h3 class="entry-header"><$MTEntryTitle$></h3></div>

どうかな~と思いつつ見てみると・・・; ̄ロ ̄)!! なんや、ランダムに画像は並んでるけど、縦に全ての画像が表示されてるやん!!

20060417-05

●ということで・・・、ちょこっと追加。(緑字追加)

<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
<div class="head-img"><MTPhotoGallery sort_order="random" count="1" path="/title-img/">
<img src="<MTPhotoGalleryImageLink>"></MTPhotoGallery>
</div>
<div class="head-title"><h3 class="entry-header"><$MTEntryTitle$></h3></div>

よっしゃ~成功~。感謝感謝。

20060417-06

あとは、例のごとく、エントリー・アーカイブ,カテゴリー・ アーカイブ, 日付アーカイブにも変更を加えて終了。

タイトルの直下にカテゴリー表示2

前回の「タイトルの直下にカテゴリー表示」で、 アイコンを表示させる部分も確保して、やった~!!成功!と思ったのもつかのま・・・

よくよく見てみると、タイトルと文章の間にスキマが大きく出来てしまっていた。(ノ_・、)

20060417-01

なんでやろう・・・。ちょうどclass="head-img"で記述した高さ分、 65px分だけスキマがあいている感じなのだ。

色々試行錯誤して悩んだあげく、方法を変更することに。

現在は、class="entry-header"が上段、 class="head-Categories"が中段、 class="head-img"が下段で、 この下段を-65pxずらしているんやけど、視覚的にはずれているが、 物理的にはその高さ分の下段が存在してることになってるみたい。

20060417-02

なので、「回りこみ」ゆうのをすることにしたのだ。(ただの勉強不足。)

いっちゃん左に、class="head-img"を。回りこみさせて、 右上段に新たに設定したclass="head-title"を。 右下段にclass="head-Categories"を、それぞれ配置させてみた。

20060417-03

●まず、前回いじった箇所を元に戻す。

●テンプレートから、 メインページを開きentryentry-contentのタグの間に付け足し。 (青字を追加)

<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
   <div class="head-img"></div><div class="head-title"> 
   <h3 class="entry-header"><$MTEntryTitle$></h3></div>
   <div class="head-Categories">[ <MTEntryCategories glue=", ">
   <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$>
   </a></MTEntryCategories> ]</div>
  
 <div class="entry-content">
      <div class="entry-body">

entry-headerの部分は、CSSでいじりやすいように、 新たにclass="head-title"とした。

●次に、mt-static/themes/original/フォルダoriginal.cssを開き、変更と付けたし。(赤字から青字へ,青字追加)

/* page layout */

.entry-header {
 margin: 0px ;
 padding: 10px 0px 5px 25px ; → padding: 15px 0px 0px 5px ;
 color: #990000 ;
 background: #ffcc99 ;
 font-size: 18px ;
 font-weight: bold ;
}

.head-img {
margin: 0 ;
padding: 0 ;
width : 65px ;
height : 65px ;
background-color : #ffcc99 ;
float:left;
}

.head-title {
margin: 0 ;
width : 473px ;
height: 44px ;
background-color: #ffcc99 ;
float: left ;
}

.head-Categories {
margin:0;
padding : 3px 15px 3px 0px ;
width : 458px;
text-align: right ;
background-color : #ffe3c8 ;
font-weight: bold ;
float:left;
}

再構築かけたら、こんな感じで成功!!

20060417-04

例によって、エントリー・アーカイブ,カテゴリー・ アーカイブ,日付アーカイブにも変更を加えて完了。

2006年04月14日

タイトルの直下にカテゴリー表示

以前、記事(の下) にカテゴリを表示する。を紹介したけれど、なんやかんやいじっている内に、 entry-footerが2行になったりして見にくいので、タイトルの直下にもってこようと思う。

現在 のタイトル周りと、やりたいこと。↓

20060414-01

  1. タイトルを右にずらす。
  2. タイトルの下にカテゴリー表示をするための帯を作る。
  3. アイコン表示の為の、 65px×65pxのBOXを作る。

こんな感じでいじって、下図のようになるようにしたいのである。↓

20060414-02

またまた、メインページを中心にいじって、エントリー・アーカイブ,カテゴリー・ アーカイブ,日付アーカイブにも反映させるようにする。

●まずは、テンプレートからメインページを開き、 entry-headerentry-contentのタグの間につけたし (青字と緑字を追加)。

<a id="a<$MTEntryID pad="1"$>"></a>
<div class="entry" id="entry-<$MTEntryID$>">
   <h3 class="entry-header"><$MTEntryTitle$></h3>
   <div class="head-Categories">[ <MTEntryCategories glue=", ">
   <a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$>
   </a></MTEntryCategories> ]</div>
  
<div class="head-img"></div>
   <div class="entry-content">
      <div class="entry-body">

CSSでいじりやすいように、 カテゴリー表示部はclass="head-Categories"に、アイコン表示部は、 class="head-img"とした。

ちなみに、これが正解のやりかたかどうかは、定かではない・・・。

●次に、mt-static/themes/original/フォルダoriginal.cssを開き、 変更と付けたし。(赤字から青字へ,青字追加)

/* page layout */

.entry-header {
 margin: 0px ;
 padding: 10px 0px 5px 25px ; → padding: 15px 0px 8px 75px ;
 color: #990000 ;
 background: #ffcc99 ;
 font-size: 18px ;
 font-weight: bold ;
}

.head-Categories {
padding : 3px 15px 3px 0px ;
text-align: right ;
background-color : #ffe3c8 ;
font-weight: bold ;
}

.head-img {
width : 65px ;
height : 65px ;
background-color : #ffcc99 ;
position :relative ;
top : -65px ;
left : 0px ;
}

すると、こんな感じになる・・・↓

  20060414-03

後は、エントリー・アーカイブ,カテゴリー・アーカイブ,日付アーカイブにも変更を加えて、完成!

2006年04月11日

エントリーアーカイブについて

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

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

ところで、

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

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

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

20060411-01

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

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

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

20060411-02

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

20060411-03

ってな感じで、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部が2行になってしまっているが・・・、今度「カテゴリー表示」を、 タイトルの直下に持ってくるように変更しようと思う。

 20060411-04 20060411-05

2006年04月10日

5:エントリー部分の変更(1::記事の部分)

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

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

20060410-01 

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

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

20060410-02

20060410-03

  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; /* 改行幅 */

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

20060410-04

次は、トラックバックとコメント記入欄をいじるとするかな。

 

2006年04月08日

4:サイドバーをいぢる(2::項目ごとに囲む)

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

20060408-01

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

 20060408-02

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

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

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

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

●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 ;
}

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

  20060408-03

●次に、タイトル画像(header-bg.gif)を作ってUPし、その変更と、行間の変更。 (赤字削除、赤字→青字へ) 

/* 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 ``` 色あいがドぎついかな・・・

20060408-04

2006年04月06日

4:サイドバーをいぢる(1::背景)

まずは、背景の色をめいいっぱい下に広げて、上下左のスキマをなくしたいのだ。

20060406-04

20060406-05 

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

と、こんな感じである。

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;
}

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

20060406-09
 ←ほらこんな感じ。

 

 

 

 

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

●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;
}

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

    20060406-07 20060406-08

2006年04月05日

ナビゲーション・メニュー設置

バナーにイラストを載せてしまったおかげで・・・、いや、そのイラストをどうにかすればええんやけど、 ブログトップへのリンクが使えないようになってしまっているので、ナビゲーションバーをつけて、カバーしようと考えた。

コンテンツがあまりないのと、今んとこページもそないに作成してないってことで、ナビをつけるまでもない気がするが・・・。

>>ブログ別!作成・カスタマイズ講座::トップナビゲーションの設置 を、 参照させていただきました。

どうせ、このメニューバーは、各ページに設置することになるので、前回の「サイドバーを左へ 3:各アーカイブページへ (モジュール化)」でも書いたように、 HTMLタグの部分はモジュール化することに。

●テンプレート名はnabi-menuとし、内容は下記のようにして保存します。

<DIV id="navi">
<UL>
<LI><A href="http://m.vv.cx/b_mt/" title="このブログのトップへ">ブログTOP</A>
<LI><A href="リンク先URL" title="ラッパンの自己紹介">プロフィール</A> 
<LI><A href="リンク先URL" title="このサイトについて">このサイトについて</A>
<LI><A href="http://m.vv.cx/" title="ホームへ戻る"> 「年がら年じゅう」 ホーム</A>
</UL>
</DIV>

  • 「プロフィール」と、「このサイトについて」のページはまだ作れていません。

<LI><A href="リンク先URL" title="説明文">タイトル</A>
赤字の部分を、適当に変更して、並べてやればOK。

 20060405-01

●次に、メインページへの記述です。bannerの記述の下 (pagebodyの記述の上)にタグを挿入。(青字)

               </div>
            </div>
         <div id="banner-img"></div>
         <$MTInclude module="navi-menu"$>

         <div id="pagebody">

●そして、mt-static/themes/original/フォルダoriginal.cssに以下を書き足し。

#navi {
text-align: center; /*メニューの位置*/
width: 800px; /*横幅*/
padding: 8px 0 8px 0; /*内側余白*/
background: #ffecec; /*背景色*/
border-bottom: 1px solid  #cc00cc; /*枠のライン*/
}

#navi UL {
list-style: none; /*マーカーなし*/
margin: 0px; /*外側余白*/
padding: 0px; /*内側余白*/
font-size: 12px; /*文字の大きさ*/
font-weight: bold; /*文字の太さ*/
text-align: center; /*文字の位置*/
background: #ffecec; /*背景色*/
}

#navi LI {
display: inline; /*表示形式*/
white-space: nowrap; /*スペース等の表示(半角)*/
}

#navi A { 
text-decoration: none; /*リンクの下線*/
background-color: #ffcc66; /*背景色*/
border: 1px solid #cc00cc; /*枠色*/
padding : 2px 12px 2px 12px; /*内側余白*/
}

#navi A:HOVER{
text-decoration: none; /*リンクの下線*/
background-color : #ffffee; /*背景色*/
}

おぉ、リンクの数が少なくて寂しいが・・・完成!

20060405-02

後は、これをメインページ以外(エントリー・アーカイブ,カテゴリー・アーカイブ,日付アーカイブ)にも設置せなあかんのやなぁ・・・ 。

いやまてよ、1カラムですまそうとしているアーカイブページや、検索結果のページや、 コメントを書いてもらった後の確認のページにも設置せなな。ままま、とにかくメインページを先に完成させて、 後者の3ページはまた後回しにしよ・・・。

2006年04月04日

3:全体的に配色を整える。

全体の配色をいじっていきたい。とにかく、下図の箇所の色を変更しようと思う。

20060404-01

20060404-02

  1. 背景の画像を用意して、変更する。
  2. containercontainer-innerとの間は#ff9999に。
  3. container-innerの両側は2px#cc00ccラインを。
  4. サイドバー側(左側)の画像をやめて、#ffcc66に。
  5. 記事側(右側)の地色は、そのままの#ffffeeに。
  6. コピーライトの背景は、バナー(タイトル)の背景と同じ#ffcc99に。
  7. フッターの上部のフチに、 1px#cc00ccラインを。

とまぁ、今回の変更内容はこんな感じである。

ということで、 早速mt-static/themes/original/フォルダoriginal.cssをいじっていきます。 (赤字から青字へ)

なお、背景の画像は×noconoco×さんのサイトより頂きました。

/* page layout */

body{
 min-width: 820px;
 color: #333;
 background: #e1e0e0 url(body-bg.gif) repeat; → tx01.gif /*背景画像*/
 background-attachment : fixed; (追加) /*背景固定*/
}

#container{
 width: 820px;
 background-color: #ffffee; → #ff9999
}

#container-inner{
 margin: 0 10px 0 10px; → 0 8px  0 8px
 border-bottom: 1px solid #4A87B9; (削除)
 background: transparent url(column-right-bg.gif) -500px 0 repeat-y; (削除)
 border-left: 2px solid #cc00cc ; (追加)
 border-right: 2px solid #cc00cc ; (追加)

}


/* two-column-left tweaks */

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

.layout-two-column-left #alpha {
 width: 200px;
 background-color:#ffcc66;  (追加)
}

.layout-two-column-left #footer
{
 padding:10px;
 border-top: 1px solid #000000; → #cc00cc
 color: #ffffff; → #000000
 background: #7fa2ea; → #ffcc99
 font-size: 11px;
 text-align: center;
}

ってな感じで完成!・・・あとは、コメントと、メニュー部分をいじったら、ほとんど完了かな。

  20060404-03

2006年04月03日

2:タイトル(banner)に画像を。

実はこのブログ、homeなるページがありまして、ホームページの名前は、「年がら年じゅう」 というタイトルなんですな。ところが、更新はこのブログでも時々というアリサマ・・・・。

で、このブログのタイトルのとこに、どのページも共通の(ブログ以外のページはあえてhtml)、タイトル帯を付けたいんです。 しかも、タイトル周りは、わざとはみ出した画像を使う・・・。

↓これ、各ページ共通のバー。<title_bar.gif>20060403-04

↓これ、タイ トル周りに使うイラスト。ね、横幅ちょと大きいでしょ。<banner.gif>20060403-05

結局は下のようにしたいのである。

20060403-06  

  1. banner800x176に広げて、 その上部に 、title_bar.gifをはりつける。
  2. banner-innermargin-top:115のところへ配置。
  3. イラストbanner.gifid="banner-img"とつけて、 配置。

3の方法は他にやり方があるかもしれん。イラストは、わざと横方向にはみ出したから苦労した・・・。

●まずは、画像をUPしてから、 mt-static/themes/original/フォルダにある、 original.cssをいじる。(赤字を青字へ)

#banner a { color: #fff; text-decoration: none; } → color: #9900cc /*文字の色*/
#banner a:visited { color: #fff; } → color: #9900cc /*文字の色*/


/* page layout */

#banner{
      width: 800px ; /* necessary for ie win */ 
      height:176px; /*(追加) 縦の幅*/
      border-bottom: 1px solid #000; → border-bottom: 1px solid #cc00cc; /*下線の色*/
      background: #369 url(banner-bg.gif) repeat; → background: #ffcc99 url(title_bar.gif) no-repeat; /*画像と背景*/
}

#banner-inner { margin-top:115px ; /*(追加)bannerからの位置*/
          
padding: 20px; } → padding: 0px; /*タイトル文字の位置*/

#banner-img { position: absolute;
                     background: url(banner.gif) no-repeat; /*画像*/
                     left : 0px ; top : 30px ; /*画像の位置*/
                     width : 819px ; height : 146px ; /*画像のサイズ*/
}

#banner-header{
                margin: 0;
                padding: 0 0 0 120px ; /*(追加) 文字の位置*/
                color: #FFF;
                font-size: 30px;
                font-weight: bold;
                line-height: 1;
                }

#banner-description{
                margin: 1px 0;
                padding: 0 0 0 120px ; /*(追加) 文字の位置*/
                color: #fff; → color: #000000 /*文字の色*/
                background: none;
                font-size: 12px;
                line-height: 1.125;
                }

●そして、メインページに、banner-img の項目を追加。(青字追加)

               <h2 id="banner-description"><$MTBlogDescription$></h2>
            </div>
         </div>
         <div id="banner-img"></div>

         <div id="pagebody">
            <div id="pagebody-inner" class="pkg">

どうでっす!苦労した甲斐が・・・あれ?タイトルがクリックできへん・・・・。(>-<)

まぁええか、ナビゲーションメニューつけたらええし。

 20060403-07

1:全体の横幅を広げる

メインページを見ながら、ページの作りを考える。

 20060403-01

とまぁ、こんな感じでIDが並んでいる感じだ。(footer追加して、メニューを左へ持ってきた場合)

ってことは、順番に指定個所を広げたらええんかな?で、よく見たら、このテンプレは下記のように画像が2つはめこんである。

20060403-02

とにかく、containerに使われている画像を取り除かないと幅を広げれないので、取ってしまうことに。それと、 バナーの画像の横幅を800pxで使いたいということ。

これらをふまえて、下記の部分を変更。(赤字から青字へ)

/* page layout */

body
{
 min-width: 780px; →820px
 color: #333;
 background: #e1e0e0 url(body-bg.gif) repeat;
}

#container
{
 width: 780px; →820px
 background: transparent url(container-bg.gif) repeat-y; →background-color: #ffffee;
}

#banner
{
 width: 760px; /* necessary for ie win */ →800px
 border-bottom: 1px solid #000;
 background: #369 url(banner-bg.gif) repeat;
}

 

/* two-column-left tweaks */

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

記事部分(右側)を、40px広げたいのであった。 ちなみに#ffffeeの色は今んとこ適当。

20060403-03 

どうかな~・・・おぉ!うまいこといったいった。次はバナーやな。

 

デザインを変えたいんやけど・・・(初めの用意)

プラグインのStyleCatcherを導入したんはええものの・・・気に入ったテンプレートがないんですわ。

MovableType幼稚園さんのところに、ようさんあるんやけどねぇ・・・。 とにかくイメージしてる雰囲気は、

http://www.sixapart.com/movabletype/styles/library にある、 Stevensonっていうテンプレートなんだわさ。

ってことで、これを元にいじっていこうと思う。

(;゜ロ゜)ハッ いや、いじってもええんかな・・・、全くちゃう感じに替えようと思うから、かまへんか。

  • 横幅を広げる。
    ・・・ このStevensonよりは少し記事側(左にサイドバーを持ってきたので、右側)を広げたい。
  • バナーをオリジナルの画像へ。
    ・・・やっぱりこの部分は、オリジナルへ変更。
  • 全体の色合いを暖色系へ。
    ・・・実は、このStevensonは、寒色系なのです。もっとにぎやかにしたい。

とまぁ、これぐらいですな。これで、この記事を読まない限り、雰囲気は全く変わってしまうハズだ。

  1. まずは、 mt-static/themes/のフォルダにあるtheme-stevensonフォルダ→originalフォルダへ改名。
  2. ついで、 mt-static/themes/originalフォルダにあるtheme-stevenson.css→original.cssへ改名。
  3. そして、StyleCatcherで読み込み。

あとは、いじって確認。まぁ、失敗しても戻せばええんやから、なんとかなるやろ。