メイン

2006年05月16日

カテゴリを好きな順番で並べる。

まだまだカテゴリの数は知れてても、やはり「その他」のカテゴリがいっちゃん上に位置してんのは、いただけない。

 20060516-01 ←現状。

っとまぁそうゆうことで、カテゴリの順番を変えてみようと思う。

なんかええ方法ないかな~と検索してたら、ええプラグインありました。

>>pmLabo.:: ●MovableTypeのカテゴリーソートに使える数字置換プラグイン

です。この方が作られたようです。すごいな。早速使わせてもらいます。

●まずは、 pmHeadChanger Ver.1.2をダウンロードしてきて、 解凍。 755のパーミッションでpluginsフォルダにUP。

●今度は、システムメニューのプラグインのページを開いて確認・・・、ありましたありました。

20060516-02

●で次は、「カテゴリー」を選んで順番を考え、番号を付けていきます(青字追加)。これで準備完了。

例:Movable Type 3.2 → 0001)Movable Type3.2

20060516-03

●後は、順番に書き換えていくだけですな。(青字追加)

<$MTCategoryLabel$> → <$MTCategoryLabel pmhc=""$>
<$MTArchiveTitle$> → <$MTArchiveTitle 
pmhc=""$>

●ワシの場合は、書き換える場所は大きく分けて、次の3つ。

  1. サイドバーを左へ 3:各アーカイブページ (モジュール化)で、左側に持っていった、 メニューの中のカテゴリーの項目。
  2. パンくずリスト付ける。 でエントリー上部に付けた、パンくず部分。
  3. タイトルの直下にカテゴリ表示2で、 エントリータイトルの下につけた、カテゴリ名。

 

1.まず、メニューの中の「カテゴリ」の変更。モジュール化してるので、 これはイッパツで済む。(青字2箇所追加)

<MTSubCatIsFirst><ul class="module-list"></MTSubCatIsFirst>
<MTIfNonZero tag="MTCategoryCount">
<li class="module-list-item"><a href="<$MTCategoryArchiveLink$>" title="<$MTCategoryDescription$>"><MTCategoryLabel pmhc=""></a>[<$MTArchiveCount$>]
<MTElse>
<li class="module-list-item"><MTCategoryLabel pmhc="">
</MTElse>
</MTIfNonZero>
<MTSubCatsRecurse>
</li>
<MTSubCatIsLast></ul></MTSubCatIsLast>

2.お次は、パンくずのとこ。エントリー・アーカイブ,カテゴリー・ アーカイブの2つにそれぞれ追加。(青字)

エントリー・アーカイブ

<div id="pan-link">
<a href="<$MTBlogURL$>">Top</a> &#65310;
<MTParentCategories glue=" &#65310; ">
<MTIfNonZero tag="MTCategoryCount">
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel pmhc=""$></a>
<MTElse><$MTCategoryLabel pmhc=""$></MTElse>
</MTIfNonZero>
</MTParentCategories>
&#65310; <$MTEntryTitle$>
</div>

カテゴリー・アーカイブ

<div id="pan-link">
<a href="<$MTBlogURL$>">Top</a> &#65310; <MTParentCategories glue=" &#65310; ">
<MTIfNonZero tag="MTCategoryCount">
<?php
if ('<$MTCategoryLabel encode_php="q" pmhc=""$>' != '<$MTArchiveTitle encode_php="q" pmhc=""$>') {
    print '<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel encode_php="q" pmhc=""$></a>';
} else {
    print '<$MTCategoryLabel encode_php="q" pmhc=""$>';
}
?>
<MTElse><$MTCategoryLabel pmhc=""$></MTElse></MTIfNonZero>
</MTParentCategories>
</div>

3.最後は、タイトル下のカテゴリ表示。メインページ,エントリー・アーカイブ,カテゴリー・アーカイブ, 日付アーカイブの4つに共通にそれぞれ追加。(青字)

 <div class="head-Categories">[ <MTEntryCategories glue=", "><a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel pmhc=""$></a></MTEntryCategories> ]</div> 

 

おぉ~、きれいに並んだね・・・。

20060516-04

そやけど、カテゴリの表示関連をいじる時は、必ずこの追加作業が付いてくるってことやな~。忘れんようにせなな。

[壁]ロ゜)ハッ Movable Typeやな・・・ つづりなおしとこ・・(/ω\) ハジカシー

2006年05月11日

パンくずリストを付ける。

カテゴリの階層はそ~んなに深くなかったりするけど、とりあえず「パンくずリスト」なるものを付けたいのであった。

パンくずリストの語源は~・・・ってのは置いといて、 メインページ以外のエントリー・アーカイブ,カテゴリー・アーカイブ, 日付アーカイブへ今回は付けようと思う。 

 20060511-01

そんでもって、これが、パンく ずリスト。

20060511-02

うまい方法はあるんかな~っと、早速検索。ありました、ありました。

>>小粋空間::パンくずリスト
>>@NOTE::MovableType構築メモ no.007

を参照させてもらうことに。

●MTタグだけやなしに、PHPも併用するらしいんなぁ。拡張子は.phpになっとるから、次。

●それぞれのページの<div id="beta-inner" class="pkg">の下にタグ追加。(ちなみにこのブログは、メニューが左にきている構造なので、 エントリーが表示される箇所は、 alphaじゃなしにbetaなのです。)

エントリー・アーカイブ

             <div id="beta">
                  <div id="beta-inner" class="pkg">
                  <div id="pan-link">
<a href="<$MTBlogURL$>">Top</a> &#65310;
<MTParentCategories glue=" &#65310; ">
<MTIfNonZero tag="MTCategoryCount">
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
<MTElse><$MTCategoryLabel$></MTElse>
</MTIfNonZero></MTParentCategories>&#65310; <$MTEntryTitle$>
                  </div>

                     <p class="content-nav">

カテゴリー・アーカイブ

               <div id="beta">
                  <div id="beta-inner" class="pkg">
                  <div id="pan-link">
<a href="<$MTBlogURL$>">Top</a> &#65310; <MTParentCategories glue=" &#65310; ">
<MTIfNonZero tag="MTCategoryCount">
<?php
if ('<$MTCategoryLabel encode_php="q"$>' != '<$MTArchiveTitle encode_php="q"$>') {
    print '<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel encode_php="q"$></a>';
} else { print '<$MTCategoryLabel encode_php="q"$>';}?>
<MTElse><$MTCategoryLabel$></MTElse></MTIfNonZero>
</MTParentCategories>
                  </div>
                     <p class="content-nav">

日付アーカイブ

               <div id="beta">
                  <div id="beta-inner" class="pkg">
                  <div id="pan-link">
<a href="<$MTBlogURL$>">Top</a> &#65310; <$MTArchiveTitle$>
                  </div>
                     <p class="content-nav">

●ついで、スタイルシート(original.css)に、下記のように記述。

#pan-link {
padding-bottom: 20px;
color: #666666;
}

おおお、うまいこといったぞ。感謝感謝。
20060511-

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月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年03月20日

フッターを追加してコピーライトを。

そうそう、忘れてた。コピーライト表示つけな。

またもやちょこっと検索を。

>>おじさんの備忘録::MovableType3.2 フッタを追加するを参照させていただきました。

ワシの場合は特に、コピーライトにリンクをつけたくないので・・・メインページのいっちゃん下の方に、

</div>
<div id="footer">
Copyright &copy; 2006 Rappan, All rights reserved.
</div>
</div>
</div>
</body>
</html>

を(赤字部分挿入)。そして、スタイルシートへ、 (ワシの場合はlayout-two-column-left

.layout-two-column-left #footer
{
    padding:10px; /* 周りから文字までの上下左右の空白 */
    border-top: 1px solid #000000; /* 枠線 */
    color: #ffffff; /* 文字の色 */
    background: #7fa2ea; /* 背景色 */
    font-size: 11px; /* 文字の大きさ */
    text-align: center; /* 文字の配置 */
}

を追加しました。おぉ!成功成功。

なんか、プラグイン使ったり、自動で更新したりする方法もあるみたいやね・・・。まぁ、ページが増えてきたら考えるとしよかな。

[blog]ロ゜)ハッ これ、各ページにつけやなあかんのやんな・・・。もっとはようにしとくんやったな・・・。

2006年03月17日

サイドバーを左へ 3:各アーカイブページ(モジュール化)

今まで、メインページを元に、サイドバーを左側へもっていったんやけど・・・。まぁ、アーカイブページは別にして、 エントリーアーカイブ,カテゴリーアーカイブ,日付アーカイブの3つのアーカイブが表示さるページにも、 サイドバーは表示させたいわけですよ。

しかも、サイドバーの作りはとりあえずは一緒でええと思ってるもんやから、できれば1つ変えれば(メインページをいじれば)、 他のアーカイブページにも反映させたいと思い、どうしたもんかな~と思ってたんやけど・・・

>>MovableType幼稚園::MovableTypeのテンプレート・ モジュールは便利 を参照させてもらいました。

小躍りするほどうまくこちらも出来ればええんですけど。

何をしていくかというと、alphaの内容部分(サイドバー)をモジュール化しまして、 共通で表示させようということです。(不具合感じたらまた直せばええことやし。)

  • まず、テンプレートのページのモジュールをクリック。モジュールを新規作成を選択します。  

20060317-01

  •  テンプレート名に好きな名前 (ここではsidebarと付けたとします。)、 モジュールの内容はメインページのalpha部分、つまり 「検索表示」~「フィード説明・MTバージョン表示部(↓の赤字部分)」をごっそりコピーして貼り付けます。 そして保存します。

<div id="alpha">
   <div id="alpha-inner" class="pkg">
    <div class="module-search module">
   ・
   ・
   ・
        Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
      </div>
    </div>

   </div>
</div>
<div id="beta">

  • 後は、それぞれの該当箇所に、 タグ(赤字部分)を貼り付けて保存します。

メインページ↓

<div id="alpha">
  <div id="alpha-inner" class="pkg">
  <$MTInclude module="sidebar"$>
  </div>
</div>
<div id="beta">

エントリーアーカイブ,カテゴリーアーカイブ,日付アーカイブ↓

<div id="alpha">
  <div id="alpha-inner" class="pkg">
  <$MTInclude module="sidebar"$>
  </div>
</div>
<div id="beta">
  <div id="beta-inner" class="pkg">

    <p class="content-nav">

  • エントリーアーカイブ,カテゴリーアーカイブ,日付アーカイブの3つは、 </head>のすぐ下にある部分も書き替え。

<body class="layout-one-column">

<body class="layout-two-column-left">

に。(赤字部分)

そして、再構築・・・。うぉ~!っと大踊りしてしまいました。それにしても、 MovableType幼稚園さんは、テンプレートも配布してはるんですねぇ、すごいなぁ。

スタイルシートいじって、デザインも変えたいんやけど、なっかなか中身みても何をどう変えたらええんかチンプンカンプンやのに・・・。

メニュー群の並び替えもやりました。「検索」が一番上にあるんがちょといややったので。

サイドバーを左へ 2:いよいよ左側へ

メインページの構成がわかったところで、どうすればサイドバーが左にいってくれんのやろか?と思って検索・・・。ってことで、

>>自宅サーバーを楽しもう!::テンプレートを参照させていただきました。

要は、今現在

id="alpha"
 「エントリー表示部」
id="beta"
 「検索表示部」
 「カテゴリー表示部」
 「アーカイブ表示部」
 「フィード説明・MTバージョン表示部」

となっているのを、

id="alpha"
 「検索表示部」
 「カテゴリー表示部」
 「アーカイブ表示部」
 「フィード説明・MTバージョン表示部」
id="beta" 
 「エントリー表示部」

てな感じで、入れ替えれば、ええっちゅうわけですわ。

まずは、</head>のすぐ下にある

<body class="layout-two-column-right">

<body class="layout-two-column-left">

に変更します。(赤字を書き換え)

次に上記のように、
「検索表示部」~「フィード説明・MTバージョン表示部」と「エントリー表示部」をごっそり入れ替えます。

<div id="alpha">
   <div id="alpha-inner" class="pkg">
      <MTEntries>
      <$MTEntryTrackbackData$>
   ・
   ・
   ・
      </MTEntries>

   </div>
</div>
<div id="beta">
  <div id="beta-inner" class="pkg">
    <div class="module-search module">
   ・
   ・
   ・
        Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
      </div>
    </div>

  </div>
</div>

<div id="alpha">
   <div id="alpha-inner" class="pkg">
    <div class="module-search module">
   ・
   ・
   ・
        Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
      </div>
    </div>

   </div>
</div>
<div id="beta">
  <div id="beta-inner" class="pkg">
      <MTEntries>
      <$MTEntryTrackbackData$>
   ・
   ・
   ・
      </MTEntries>

  </div>
</div>

に。(赤字と青字を入れ替え)

おぉ!無事左側へ移動成功!よかったよかった。

2006年03月16日

サイドバーを左へ 1:まずはメインページの中身の把握

どうも右にメニューがあるのが落ち着かない。サイドバーを左にもっていきたいのである。とにかく、メインページからまずやってみて、 成功したら他のページも・・・と考え進めていこかな。

ついでに、メニュー群の並び替えも同時にしてしまおうと思ったりして。

  1. メインページの中身(構造)の把握。
  2. サイドバーをモジュール化する。
  3. 各ページにも反映。

この順序でやっていこうと思う。

メインページの中身て、ややこしいんちゃうかな~と思いつつ、順番に見ていくことに。間違った理解をしてないことを祈りつつ、 まとめてみました。

メインページ構成

「タイトル表示部」↓

<div id="banner">
  <div id="banner-inner" class="pkg">
    <h1 id="banner-header"><a href="<$MTBlogURL$>" accesskey="1"><$MTBlogName encode_html="1"$></a></h1>
    <h2 id="banner-description"><$MTBlogDescription$></h2>
  </div>
</div>

「エントリー表示部」↓

<MTEntries>
<$MTEntryTrackbackData$>
<MTDateHeader><h2 class="date-header"><$MTEntryDate format="%x"$></h2></MTDateHeader>
                     <a id="a<$MTEntryID pad="1"$>"></a>
   ・
   ・
   ・
   </div>
</div>
</MTEntries>

「検索表示部」↓

<div class="module-search module">
   <h2 class="module-header"><MT_TRANS phrase="Search"></h2>
   ・
   ・
   ・
      </form>
   </div>
</div>

「カテゴリー表示部」↓

<MTIfArchiveTypeEnabled archive_type="Category"><div class="module-categories module">
   <h2 class="module-header"><MT_TRANS phrase="Categories"></h2>
   ・
   ・
   ・
</div>
</MTIfArchiveTypeEnabled>

「アーカイブ表示部」↓

<MTIfArchiveTypeEnabled archive_type="Monthly">
<div class="module-archives module">
   ・
   ・
   ・
</div>
</MTIfArchiveTypeEnabled>

「フィード説明・MTバージョン表示部」↓

<div class="module-archives module">
   <h2 class="module-header"><MT_TRANS phrase="Recent Posts"></h2>
   ・
   ・
   ・
   <div class="module-content">
      Powered by<br /><a href="http://www.sixapart.jp/movabletype/">Movable Type <$MTVersion$></a>
   </div>
</div>

とまぁ、こんな感じですな。

<body>部分をおおまかに書いてしまうと下のようになっているようです。

id="alpha"
 「エントリー表示部」
id="beta"
 「検索表示部」
 「カテゴリー表示部」
 「アーカイブ表示部」
 「フィード説明・MTバージョン表示部」

サイドバーのカテゴリーの横にエントリー数を表示。

何がしたいかっていうと、サイドバーに表示されている項目の横にエントリー数を出したいってことなんやけど・・・。ほら、 よくみかける・・・ これですよこれ! → 2006月03月[6]

  • カテゴリーで表示されている、 カテゴリー名の横
  • アーカイブで表示されている、月表示の横

この2箇所に付けたいんだなぁ~。よって、検索検索・・・・ てことで、みつかりました!

テンプレート>メインページの該当個所に、以下のタグを入れればよいらしい。

<$MTCategoryCount$>

あら?月別の方には表示されへんのね・・・。もっかい検索・・・

>>おじさんの黙示録::サイドメニューのアーカイブにエントリー数表示を参照させて頂きました。

<$MTArchiveCount$>

結局こっちを付けたら、うまくいきました。感謝感謝!

2006年03月15日

引用したのにインデントみたいになってる。

初めて「引用」を使ってみたのに、インデントしたみたいな感じになってるだけですがな。(T.T)

ってことで、またもや検索すると、どうやらCSSに記述すれば解決するみたい。

どのCSSかなぁ~。やっぱ、base-weblog.cssですかな? たぶんそうだろう・・・。

(スタイルシートをいじり、original.cssを作ったので、そちらへ移動しました。: 2006年4月5日)

>>小粋空間::本文に引用をつけるそれと、
>>小粋空間::枠線の指定を参照させてもらうことにした。
ここのブログはすごいなぁ・・・。また活用させて頂きま~す。

で、ちょっとアレンジして、以下の部分をbase-weblog.cssに付けてみることに。

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

おぉ!うまくいった・・・あれ?なんでか、枠線が表示されない・・・。ひょっとしたら、ほかんとこで規制くらっとんかな・・・。 とにかく、枠線の指定ははずしてっと。

これでいいっか。とにかく感謝感謝!

記事(の下)にカテゴリを表示する。

エントリーした記事をみていると、なんのカテゴリーの内容か、わからんようになるので今回は、 記事1つ1つにカテゴリー名を表示させることにした。

とそこで、おなじみの検索をしてみた。

>>Techknow Weblog:: 「タイトルの横にカテゴリを表示する(2)」を参照させてもらうことに。

ふむふむ、エントリーが表示される部分のとこにタグを貼りつければええのか・・ ・。参照させていただいた記事では、タイトルの横にカテゴリを表示させるので、

<h3><$MTEntryTitle$>[ <MTEntryCategories glue=", ">
<a href="<$MTCategoryArchiveLink$>"><$MTCategoryLabel$></a>
</MTEntryCategories> ]</h3>

となるわけですな。

ところで、スタイルシートの中身を見て、デザインもちょこちょこいじりたいのに、 スタイルシートの内容をじっくり見れてない上に、どこをどういじったらええのか把握できてないので、 タイトルの横に上記のように書いて持ってくると・・・

カテゴリ名がでかく表示されるのであった・・・。 ↓こんな感じ・・・ (;´д`)トホホ

記事(の下)にカテゴリを表示する。 [カスタマイズ] 


タイトルの右隅にカッコよく・・・て、今んとこ無理っぽいので、タイトルの横はやめて、 いっちゃん下の投稿者うんぬんの横に持ってくることにした。

テンプレートのメインページ・エントリーアーカイブ・カテゴリーアーカイブ・日付アーカイブの4点に。

2006年03月14日

MovableType3.2の基本的な構造

さて、色々いじっていきたいが、なんせ初心者なので、構造がいまいちわからない。
表示されるページがどの部分に相当していているのか・・・

一応知識はほどほどにあるが(まだまだだが)、検索しまくるハメになるんやろなぁ・・・

自分なりに検索なりしてみたが、このテの構造まで書いてなかったりする。いや探すのが下手なのか?

とにかくこの文章見たら、すでにMTをやってきた人には、バカにされる覚悟で、ちょっとメモしとこうと思う。 (こっちは必死のパッチなんやけど。)

  1. 最初に表示されるページ(トップページ)
    →インデックス・テンプレート>メインページ
  2. カテゴリーの中のカテゴリーをクリックしたときに表示されるページ
    →アーカイブ・テンプレート>カテゴリー・アーカイブ
  3. 最近のエントリーの中のタイトルをクリックしたときに表示されるページ
    →アーカイブ・テンプレート>エントリー・アーカイブ
  4. アーカイブの中の月をクリックしたときに表示されるページ
    →アーカイブ・テンプレート>日付アーカイブ
  5. アーカイブをクリックしたときに表示されるページ
    →インデックステンプレート>アーカイブページ

とまぁこんな感じですな。最後のヤツだけ特殊やな・・・。それぞれの該当場所いじったら、 再構築した時に反映されるってゆうこっちゃな。がんばろっと。