デザイン制作室 TSUGUMIX https://ameblo.jp/takuya-okamoto/ ブログの説明を入力します。 ja グローバルメニューやサイドメニューを一括管理 いちいち全ページ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つでグローバルメニューを管理出来ますね。 ]]> https://ameblo.jp/takuya-okamoto/entry-11084900843.html Mon, 21 Nov 2011 11:54:23 +0900 自動で改行タグを挿入 今回は自動で改行タグを挿入してくれるサイトの紹介です。
使い方はとても簡単です。


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


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

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

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

]]> https://ameblo.jp/takuya-okamoto/entry-10988771845.html Wed, 17 Aug 2011 13:50:34 +0900 ＣＳＳを整頓 ＣＳＳをコーディングする時、触り倒していたら目茶苦茶になってしまう時があります。
自分だけかもしれませんが・・・
そんな時、便利なツールを見つけました。それがこちらです。



お気楽デザイナーのWeb（ウェブ）デザイン講座


http://www.styleneat.com/

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

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

]]> https://ameblo.jp/takuya-okamoto/entry-10987532418.html Mon, 15 Aug 2011 12:30:19 +0900 初めまして 神戸でWEB制作のお仕事をしています。岡本拓也と申します。

主に制作、デザインを行っております。

お客様のご依頼内容に対し、雰囲気や方向性をじっくりと親身に考えてデザインの提案が出来るように心がけています。
安定したデザイン品質をお届け致します。

]]> https://ameblo.jp/takuya-okamoto/entry-10891267028.html Fri, 27 May 2011 12:43:06 +0900