JavaScript カスタマイズ vol.13

Javascriptを使ってサイドメニューをサイドメニュータイトルに格納させる

各アーカイブページエントリー単体、カテゴリー、月別ログ）を見てもらえれば分かると思いますが、サイドメニューのタイトルにサイドメニューが格納されてます。こうする事にスッキリしていいかなと思いやってみました。

トップページで使ってないのは、更新を視覚的に分かり易くさせる為にあえてそのままにしました。「ボクはこんなに毎日書いてるんだ！」と見せつける為でもあります……。

MovableTypeを既にPHP化してincludeさせてある事を前提に解説していきます。
PHP化、includeに関してはコチラを参照して下さい。

まずうちで言うならサイドメニューはSide Indexというテンプレートを作ってincludeさせてるのですが、今回の格納するのはアーカイブページでのみ仕様したいので新たにアーカイブ用のSide Indexを作る必用があります。トップページでも仕様するならばSide Indexを変更します。
うちではSide Archive Index（archiveside.php）としてSide Index全てをコピペして作りました。サイドメニュータイトルをクリックして開かせるので、

<div class="a-sidetitle">

最近のエントリー

</div>

となっている部分、要するにサイドメニューのタイトル部分に、

<div class="a-sidetitle">

<a href="javascript:void(0);" onClick="showHide('c1');">最近のエントリー</a>

</div>

として最近のエントリー前後をJavascriptが機能するように記述します。
次に、その直ぐ下にある、

<div class="side">

の上に、

<div class="sidehide" id="c1">

と記述してJavasprictを反映出来る様にします。div属性を作ってるので、

</div>

で格納する部分のブロックのサイドメニューを閉じるのを忘れないようにしましょう。

これを格納したいメニュー全てに行います。cXの部分は、そのIDのあるJavasprictをクリックするとID指定してる部分が出現、消失されるのでタイトル毎に変える必用があります。連番である必要性はありません。

また、サイドメニュータイトルがリンク属性になるのでStylesheetテンプレートで新たに、クラスを作って指定した方がいいと思います。ワタクシは.a-sidetitleというクラスで作りました。

終わったら保存、再構築して下さい。

次に、Javascriptの記述をします。直接各アーカイブのhead部分に記述するのもいいですが、３個のアーカイブに適用するので外部ファイルとして読み込ませてます。テキストエディタなどで以下のソースをコピペして、sidehide.jsなどとして保存、MovableTypeのindex.phpがあるフォルダなどにアップロードして下さい。

if(document.getElementById){

	document.writeln('<style type="text/css" media="all">');

	document.writeln('<!--');

	document.writeln('.sidehide{display:none}');

	document.writeln('-->');

	document.writeln('</style>');

       }

function showHide(id){

	var disp = document.getElementById(id).style.display;

	if(disp == "block"){

		document.getElementById(id).style.display = "none";

	}

       else{

		document.getElementById(id).style.display = "block";

	}

	return false;

       }

function hideShow(id){

	var disp = document.getElementById(id).style.display;

	if(disp == "none"){

		document.getElementById(id).style.display = "block";

	}

       else{

		document.getElementById(id).style.display = "none";

	}

	return false;

       }

出来たらアーカイブにこのファイルを読み込ませる記述をします。

<script type="text/javascript" src="<$MTBlogURL$>sidehide.js"></script>

を各アーカイブのhead部分に記述します。アップロードしたファイルパスを記述しましょう。最後に、各アーカイブのSide Indexをincludeさせていた部分を最初に作ったアーカイブテンプレート用のサイドメニューのファイルに変えるだけです。
終わったら保存、再構築しましょう。

後は、自サイトに合うようにCSSを設定してあげましょう。

Safari、Mozillaだと、リストタグを使ってた部分に、

このように空白が出来たのでうちは外しました。またMozillaだとサイドメニューが表示される時のサイドタイトルの下のborder部分が偶数列の時は消えてしまうようです。そういえばコメントのところも消えてましたな…。

今回参考にしたサイトですが、Safariをリセットしてしまってアドレス分からなくなってしまいました。色々飛んだ先にあったのでどこかも分かりません…あぅぅ。

追記：
これよりも利便性の高い方法があります。そちらをお勧めします。
→ カスタマイズ vol.29