道化師ラッパンのボヤキ

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

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

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

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

とまぁ、こんな条件で検索してみると・・・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）テンプレートのメインページを開き、画像を表示させたいところに、下記のタグを書けばＯＫ。(青字追加)

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

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

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>

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

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

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

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

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

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

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

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

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

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

2）テンプレートから、メインページを開きentryとentry-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;
}

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

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

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

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

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

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

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

1）まずは、テンプレートからメインページを開き、 entry-headerとentry-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 ;
}

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

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

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

[参考サイト]

ブログ別！作成・カスタマイズ講座>>トップナビゲーションの設置

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

1)テンプレート名はnabi-menuとし、内容は下記のようにして保存します。「プロフィール」と、「このサイトについて」のページはまだ作れていません。

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

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

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

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

3)そして、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; /*背景色*/
}

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

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

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