MovableTypeのバナー[MT3.2]

2006年4月18日

060418-01.jpg

このバナーはどこに落ちてんのかな~とおもてたら、なんとサーバーに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>

と変更。

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

060418-02.jpg

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

タイトルの左横にアイコン表示[MT3.2]

2006年4月17日

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

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

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

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

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

 

[参考サイト]

きままにポロポロ>>MTPhotoGallery

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

 

導入方法

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

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

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

4)テンプレートのメインページを開き、画像を表示させたいところに、下記のタグを書けば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>

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

060417-05.jpg

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

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

 

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

060417-06.jpg

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

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

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

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

060417-01.jpg

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

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

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

060417-02.jpg

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

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

060417-03.jpg

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

2)テンプレートから、メインページを開き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"とした。

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

/* page layout */

.entry-header {
 margin: 0px ;
 padding: 10px 0px 5px 25px ; → 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;
}

 

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

060417-04.jpg

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

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

2006年4月14日

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

 

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

060414-1.gif

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

 

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

060414-2.gif

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

 

1)まずは、テンプレートからメインページを開き、 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"とした。

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

 

2)次に、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 ;
}

 

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

  060414-3.gif