ウェブサイトいじり: Pastel Coloured Log

ウェブサイトいじり

ウェブサイトをちょこちょこいじる。
まず、登山＆サイクリングの記録ページと化しつつある、yama-kei journal の画像表示にLightbox2を使ってみた。
(->こんな感じ)。

yama-kei journalは、何年か前に出会ったMODxというCMSで構築してある(というよりも、もともとはMODxで遊ぶために作り上げたサイトだったりして)ので、変更は簡単。

必要なファイルをアップロードして、MDOxのテンプレートからアップロードされた *.jsと*.css をインクルードするように修正。さらに、画像の表示部分(これは独立した Snipet として定義してある)をちょこちょこっといじれば完成。
ドキュメントを構成する要素が綺麗に別れているMODxの考え方はナイスだと思う。

編集画面は←のような感じ。

それぞれのアクティビティーごとにテンプレートを用意して、記事を書くときはタイトルと本文、画像、画像のメモ、それに追加情報を入力してしまえばあとはよろしくやってくれる仕組み。

画像が6枚までしか張れないのは仕様(ショボッ！)。

ここ最近目にすることの多かったLightboxなのだけれど、随分と簡単に設置できるのね・・・。一部のブログでは、プラグインなんかを使って統合されているようなので、さらに敷居は低そう。

ついでに、Amazonへのリンクをちょこちょこ追加。
一応、登山やサイクリングなどのアクティビティーに関係のあるオススメ商品を表示するようにしておいたので、検索サイトから飛んできた人がうっかりカートに入れたりしてくれたりすることを期待してみる。

＊＊

さらに、細々と更新しているブック・レビューサイトの編集画面をいじる。
こっちはMovable Type + aws.plを使っているのだけど、MT 3.6 になってから編集ページのテンプレートが更新されてしまった関係で、編集画面の「ASIN登録一発ボタン」がなくなってしまっていたのを修正。

MT 3.6 に対応した aws.pl はここにある。

tmpl/cms/edit_entry.tmpl に


function insertAmazon (e) {
var str = getSelected(e);
if (!str) return;
setSelection(e, '<MTAws dev_token="your_token" associate_id="your_associate_id" search="AsinSearch" query="' + str + '" mode="books-jp" lastn="1"><MTIfNonZero tag="MTAwsurl"><MTIfNonZero tag="MTAwsImageUrlMedium"><a href="<$MTAwsurl$>"><img src="<$MTAwsImageUrlMedium$>" valign="top" align="left" vspace="5" hspace="5"></a></MTIfNonZero><br>Title: <a href="<$MTAwsurl$>"><$MTAwsProductName$></a><br>Author: <$MTAwsAuthors$><br>Price: <$MTAwsListPrice$><br>Publisher: <$MTAwsManufacturer$><br>Published Date: <$MTAwsReleaseDate$><br clear=all></MTIfNonZero></MTAws>');
}

という関数を追加して、さらに同じファイルの<div class="field-buttons-formatting">がある下のあたり(フォーマッティングボタンが並んでいる)に、


write('<img title="<MT_TRANS phrase="Amazon">" onclick="return insertAmazon(document.entry_form.text)" src="<TMPL_VAR NAME=STATIC_URI>images/amazon-button.gif" alt="<MT_TRANS phrase="Amazon">" width="40" height="18" />');

といった記述を追加することでボタンが復活。