道化師ラッパンのボヤキ

カテゴリーが異様に長くなってるので、いい手はないかと思っていた。まぁ以前のブログ記事も後々持ってこようなんて思ってるから、最初にカテゴリを作りすぎたってこともあったりして・・・。

前からいじるならこれ！と決めていたので早速お世話に。

[参考サイト]

• 小粋空間>>サブカテゴリーリストの折りたたみ+ツリー化 for Movable Type

この方すごいね。ブログいじり始めた当初からよく記事読ませていただいてます。解説もよくわかるし・・・。( ﾟдﾟ)ﾊｯ!　それよか作業進めよ。

 

menufolder.jsのダウンロードと設定

menufolder.jsをダウンロードしてきた。バージョン7.00が最新なんかな？ほんで中身確認。

若干書いてある内容は違ってたりするけど、要はvarの文字の指定があってたらええねんな。1か所だけ、記事と違うとこがあったので変更した。

→　var offsetForTitleAndMarkOfSubcategory = 1;

そんで、メインページと同じとこにUP。

 

各ページにscript 要素追加

メインページ・カテゴリ別ブログ記事リスト・ブログ記事・月別ブログ記事リストの４つに追加。

 

カテゴリアーカイブの内容を変更

実は本（レッスンブック）見て1から書いたので、タグの順序とか若干違っているのであった。

いくら考えても、その違いがなぜあるのかわからんかったので、思い切って全部削除し、小粋さんが表示されているソースにそっくり書き換えた。

 

CSS追加

メニューのフォントサイズが少しこのままだと小さいので、9pxやめて11pxにしました。

これもこのままコピーして追加。（青字が変更箇所）

ul.tree {
    margin: 0 0 0 5px;
    padding: 0;
    font-size: 11px;
    list-style: none;
}

 

ツリー画像のUP

で、完成。

 

記事が古かったので、不具合出たらどうしよう・・・とか思ったけど、MT5でもいけたみたい。

 

最近思うんやけど、こないいじるのに苦労するんやったら、小粋さんの公開されているテンプレートをそのままもらって、いじった方がよかったかなーと思ったりしてる。

次・・・バージョン上がって、１からやり直す時は、小粋さんのテンプレートもらうことにしよう・・・。

タグクラウドをかっこよく、デザイン性にあふれるものにできないかと、検索していたら次のサイトが見つかりました。

[参考サイト]

3.5ping.org>>Tag Cloudのスタイル

 

いやーカラフルで、このごちゃごちゃ感よくて、早速導入を。

ほんで、スタイルシートの設定だけで済むとこがええ。とりあえず、6色で段階的に頻度を表すとこは、8色に変更してみました。

色は、PCCS色相環を採用し、2：Rの赤から青方向に8色取って、フォトショップで色相と明度を少しいじりました。以下が使用した8色。赤が強くなるにつれて、タグの頻度が高くなります。

そして、スタイルシートも、ダウンロードしたデータを参考に、少しいじりました。

/*タグクラウド*/
ul#tag {
  margin: 0 0 20px;
  padding: 0.5em 10px;
  line-height: 1.1;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
}

ul#tag li {
  margin: 0;
  padding: 0;
  display: inline;
  font-size: 100%; /* ここで相対的に文字サイズを変更 */
}

ul#tag li a {
  padding: 2px 5px;
  border-width: 1px;
  border-style: solid;
  position: relative;
  text-decoration: none;
  background-color: #ffffff;
}

ul#tag .rank-1 a {
  z-index: 8;
  border-color: #d74984;
  color: #d74984;
  font-size: 175%;
  font-weight: bold;
  top: 5px;
}

ul#tag .rank-2 a {
  z-index: 7;
  border-color: #c2478e;
  color: #c2478e;
  font-size: 160%;
  font-weight: bold;
}

ul#tag .rank-3 a {
  z-index: 6;
  border-color: #bd479e;
  color: #bd479e;
  font-size: 145%;
  font-weight: bold;
  top: 5px;
}

ul#tag .rank-4 a {
  z-index: 5;
  border-color: #a44da3;
  color: #a44da3;
  font-size: 130%;
}

ul#tag .rank-5 a {
  z-index: 4;
  border-color: #85549c;
  color: #85549c;
  font-size: 115%;
}

ul#tag .rank-6 a {
  z-index: 3;
  border-color: #7861a5;
  color: #7861a5;
  font-size: 100%;
  top: 5px;
}

ul#tag .rank-7 a {
  z-index: 2;
  border-color: #6e7db0;
  color: #6e7db0;
  font-size: 85%;
}

ul#tag .rank-8 a {
  z-index: 1;
  border-color: #4891b6;
  color: #4891b6;
  font-size: 70%;
}

ul#tag li a:hover {
  border-color: #ffffff;
  z-index: 10;
  color: #ffffff;
  background-color: #cc0063;
}

 

どない？右のサイドに表示されてると思うんやけど。大成功！

 

で、ちょっとショックなことが・・・。

タグをクリックしたら、そのワードで検索がかかるんやね。検索結果のページ覗くと案の定レイアウトが乱れてた。

前回の記事（PHPモジュール化その2）で、システムテンプレートの検索結果をPHP化したんやけども、その際、formタグに仕掛けする方法を取った。よー考えたら、このタグクラウドの場合、form使ってないから、そのまま検索結果のページが開かれるのであった。

ウキウキしてたのもつかの間、いつかここを直さないとアカンわなぁ・・・。検索できてるみたいやし、しばらくこのままでいこかなとは思てるけど。

カレンダーをサイドバーへ付けるとかさばるなぁと思いつつ、どうしようかと思っていた。

で、色々調べてたら、フラッシュで横型カレンダーを公開されてる方がいらっしゃるので、早速設置してみた。

公開されてるサイトと、設置するのに参考にしたサイトは次の通り。

[公開されてるサイト]

• Kinarie&May>>MT用横型flashカレンダー3.00

[参考サイト]

• ひるねこさん日記>>MT5.0にKinarie&Mayさんのフラッシュカレンダーを設置
• MovableType メモ>>Flashカレンダー

 

場所をあける

横型なので、タイトルの下に設置したいと思う。タイトルの下にあるように見えて、実際はバナーヘッダーの下部に場所を作る感じ。スタイルシートで整えておく。

 

ファイルのダウンロード

1）こちらのページへいき、「MT用横型flashカレンダー3.00」をダウンロード。

2）ダウンロードしたファイルを解凍してできた「w_calendar300.swf」を、サーバーの適当な場所にアップします。適当といっても後でわかるような場所を選んでください。ちなみに、うちの場合は、ブログを公開している同じフォルダに入れました。

例）http://●●.jp/blog/w_calendar300.swf 

 

日付アーカイブマップの追加

1）デザイン＞テンプレートをクリック。アーカイブテンプレートの「月別ブログ記事リスト」をクリック。内容が表示されたら、下部にあるテンプレートの設定をクリック。

2）「新しいアーカイブマッピングを作成」をクリック。種類を「日別」にして追加する。パスの部分が下記になっているか確認（うちの場合は、PHP化してます）。追加されると、元からあった月別と並んで日別が表示されます。

パス：yyyy/mm/dd/index.php

 

月別XMLの作成

1）デザイン＞テンプレートをクリック。アーカイブテンプレートの「アーカイブテンプレートの作成」のブログ記事リストをクリック。下記のように記述して保存。

テンプレートの名前：月別XML

内容： 同サイトのこちらのソースをコピーして貼り付け

2）保存したら、下部にあるテンプレートの設定をクリック。「新しいアーカイブマッピングを作成」をクリック。種類を「月別」にして追加。パスは、カスタムを選択して下記のように書き換えて保存。

→　xml/<$MTArchiveDate format="%Y_%m"$>.xml

3）全体を再構築。

 

ソースを作成して貼り付け

1）ここで、2点のフルパスを確認します。w_calendar300.swfをアップした場所と新しくできたXMLフォルダの場所です。このサイトの場合は下記になってます。

http://●●.jp/blog/w_calendar300.swf
http://●●.jp/blog/xml/

 2）専用ソース作成ページに行き、上記のフルパスと、必要事項を記述します。「ソース表示」をクリックして色が反転したソースを、表示させたいところへ貼り付けて、再構築します。

PHP化をしたので、それによる不具合なんか出てこないか心配してたが、案外すんなり設置できました。