グローバルメニューやサイドメニューを一括管理

XHTML+CSSコーディングをしていて、グローバルメニューやサイドメニューが変わった時など、
いちいち全ページ1ファイルずつ編集するのが面倒だと思って、ちょっと色々と試みてみました。

DreamWeaverの機能を使えば簡単なのですが、
自分は色んな環境のパソコンで作業をしないといけないので、
中にはDreamWeaverが入っていないパソコンだって当然あります。

SSIを使えば行けそうな気もしますが、
サーバがSSIに対応しているかどうかいちいち確認しないといけないし、
ローカルで確認出来ないのが面倒です。
そうなると、XAMPPを使えと言う話しになって来ますが、
先程も言ったように、色んなパソコンで作業を・・・

そんな訳で、ちょっと簡単な方法を紹介したいと思います。

外部javaScriptを使います。

例えば、下記がグローバルメニューのHTMLファイルだとします。

<div id="globalmenu">
<ul>
<li id="menu1"><a href="#">Home</a></li>
<li id="menu2"><a href="#">menu</a></li>
<li id="menu3"><a href="#">menu</a></li>
<li id="menu4"><a href="#">menu</a></li>
<li id="menu5"><a href="#">menu</a></li>
<li id="menu6"><a href="#">menu</a></li>
<li id="menu7"><a href="#">menu</a></li>
</ul>
</div>

このタグをjsファイルとして保存するのですが、
jsに置き換えるとこんな感じになります。

document.write("<div id=\"globalmenu\">");
document.write("<ul>");
document.write("<li id=\"menu1\"><a href=\"#\">Home</a></li>");
document.write("<li id=\"menu2\"><a href=\"#\">menu</a></li>");
document.write("<li id=\"menu3\"><a href=\"#\">menu</a></li>");
document.write("<li id=\"menu4\"><a href=\"#\">menu</a></li>");
document.write("<li id=\"menu5\"><a href=\"#\">menu</a></li>");
document.write("<li id=\"menu6\"><a href=\"#\">menu</a></li>");
document.write("<li id=\"menu7\"><a href=\"#\">menu</a></li>");
document.write("</ul>");
document.write("</div>");

これをTeraPad等のテキストエディタに書き出し、拡張子を.jsとして保存します。
仮に、保存したファイル名を「menu.js」だとします。
後は、表示したい場所に下記のタグを入れるだけです。

<script type="text/javascript" src="menu.js"></script>

グローバルメニューを編集したい時は、このjsファイルをいじるだけです。
これを全ページに反映しておけば、jsファイル1つでグローバルメニューを管理出来ますね。

自動で改行タグを挿入

今回は自動で改行タグを挿入してくれるサイトの紹介です。
使い方はとても簡単です。

http://www.cost-simulator.com/eco/etc/enter.html

一番上のラジオボタンで、逆に改行タグを除去したり置き換えたりも出来ます。
改行タグの種類も選択出来ます。

大量のテキスト資料を、ウェブにアップする際、
何とか改行も一緒に出来ないかなぁ。と思い、検索したら見つかりましたので、

早速使わせて頂いています。

ＣＳＳを整頓

ＣＳＳをコーディングする時、触り倒していたら目茶苦茶になってしまう時があります。
自分だけかもしれませんが・・・
そんな時、便利なツールを見つけました。それがこちらです。

http://www.styleneat.com/

目茶苦茶になったＣＳＳを整頓出来るツールです。
Enter the CSS you would like to format の枠内に目茶苦茶になったCSSを貼り付けます。
そしたら Organize CSS ボタンをクリックするだけ！

ヘッダのタブ切り替えで、ファイルのアップロードとかスタイルシートのURL記入にも対応しています。