2011年09月27日

[サイト作成]お手軽jQueryでテンプレート風サイトデザイン


こんばんは、蛛賢です。
戦国史同盟のリニューアルを今現在(2011.9.27)行っております。

ちょっと前まで、Joomla!、Drupal等のCMSを用いたサイトリニューアルを考えておりましたが、
なんだかんだで手打ちの方が手前に合っていたこともあり、手打ちかつ手軽な方法を探しておりました。

まず思いつくのは、CSSなんか便利ですよね。
あとはヘッダフッタ、常に表示するメニューバーなどをテンプレートとして組み込めれば最高です。

そんな中で手段として案に上がったのが「jQuery」でした。(別にJavascriptと言っても良いんですけどね) 
戦国史同盟のソースを見れば分かりますが「load」という命令でテンプレートファイルを読み込んでいます。
該当するdiv要素を読み込んだテンプレートファイルの内容に書き換えることで、サイトの骨子を構築しているわけです。

トップページ


手軽なんですが留意点もあります。(よくハマるかも)

  • 同じドメインのファイルじゃないと呼び出せない。
    http://sengokushi.net から呼び出すなら http://sengokushi.net より下のディレクトリのファイルだけ
  • javascriptを含むHTMLファイルを読み込んでも思ったように動かないことがある。
    表示用のHTMLファイルを別に用意してiframeで表示すると良いかも
  • 相対パス指定していると、他のディレクトリのHTMLから呼び出したとき、呼び出せずに表示が崩れることがある。
    無難に絶対パス指定がおすすめ
  • document.writeで表示が崩れることがある。(個人的にjQueryと相性の悪い命令と感じました)

大体思いつくのはこれくらいですが、それを踏まえてもやっぱり便利ですね。
部品のHTMLを編集すれば全てのページに反映されますからね。
様々なスクリプト(アップローダや掲示板等)にも簡単に組み込むことが出来ます。


そんなに大掛かりなサイトじゃないんだけど、デザインは変えたい!
…という非ブログ志向な方、ポータルサイト運営の方、趣味サイト運営の方、HTML手打ち派の方、おすすめです。
(もちろんですが、大人数でサイト管理運営するならCMSのが良いかも)

【参考】load( url, data, callback ) - jQuery 日本語リファレンス

 



at 00:48│ウェブサイト管理:コラム |Edit

Comment



blog comments powered by Disqus