アルテッツァの造り方

最近ロードバイクとCitrixXenAppネタばかり

MT4で動きのあるWebページを作る

2014/02/07

プライベートでWebページの製作を依頼されています。

しかしHTMLベタ打ちで書いちゃうと、依頼者ご自身でコンテンツのメンテをするのが難しくなってしまいます。・・・と言うことで、Moovabletypeを構築してメンテはご自身で出来るようにします。

依頼者の方にはさくらインターネットに契約していただき、そちらにMovabletypeを構築します。その前に、ここのMTを使ってデモサイトを作っているのですが、依頼者からの要望が「動きのあるページを作りたい」と言うことで悩んでいました。

「動きのあるページ」とは何だろう・・・??

そこで目標とすべき見本のWebページを見せてもらったところ、CSSでマウスオーバー時の画像を入れ替えているようです・・・・・・

確かに動きがあると言えば、動きがあるのですが、私はてっきりバリバリajaxで書かれたトップ絵がグリグリ動く!と言う物をイメージしていたので拍子抜けでした。

しかし、実際には 画像作るの面倒くせー リンクを画像で作ってしまうと後でコンテンツが変わったときに融通が利かなくなるので却下です。そして、あくまで私の主観ですが、この程度で「動く」と云うのはイメージと違います!!

と言うわけで、Javascriptの登場です。

今では便利になってWebでscriptのソースがゴロゴロ落ちていますね。今回は「マウスオーバー時にリンクが右にずれるjQueryプラグイン」を利用しました。

以下、実装方法を簡単に解説します。

  1. jQueryプラグインを公式サイトからダウンロードし、Webサーバの適当なところに置く
  2. 上のプラグインを拾わせるためにwebページの <head>~</head> 間に<script type='text/javascript' src='hogehoge/jquery.js'></script>を記述
  3. ここでjQuery Link Nudge Pluginのソースをコピー
  4. htmlにコピーしたソースを貼る(文字色とかは好みにより編集して下さい)
  5. <ul id="nudgeUs"></ul> 内のリンクで使えます

IDは"nudgeUs"と"nudgeUs2"の2つあります。前者は文字だけ右にずれ、後者はリストの枠ごと右にずれます。

せっかくなのでac-westのwebページにも実装してみました。よく分かりませんが近代的な感じがします!私は4の手順の様に直接HTMLに記述すると後々のメンテが面倒くさいので、外部ファイルにしました。

ちと調べれば簡単に実装できますので、お試しください。

P.S.
専門業者のMTの構築費用って結構するんですね。個人レベルで頼める額ではありませんよ。高額なだけの技術があるのでしょう。

私は技術がない代わりに格安で「構築代行」なんていう商売でもしようかしら。。。と思いました(笑)

↓ブログ村のランキングに参加しています。ポチっと押して頂けると嬉しいです♪ にほんブログ村 自転車ブログ ロードバイクへ

-Webサイト構築