引っ越し

"おさるの旅ログ2"をご覧いただきありがとうございます。

Seesaaは細かいところまでカスタマイズできて使いやすかったんですが、反応が遅いのでブログの引っ越しを決意しました(T_T)
新しいURLはこちら「おさるの旅ログ3」です。

恐れ入りますがブックマークなどの修正をお願いします。
2度目の引っ越しになり、お手数をおかけして申し訳ありませんが、
これからもどうぞよろしくお願い致します。

コメント欄の内容を記憶する

Seesaaではデフォルト状態でコメント欄の名前などが保存されません。
最近としては珍しいかも。

「ありふれた生活」さんのこちらの記事「コメントで名前を保存する」を参考にカスタマイズしてみました。
Firefoxでしか確認してませんが、うまく動いているようです。

最近Cookieの使い方を覚えたばかりで、自分で作らなきゃいけないのかな…と思っていたところなので助かりました(^_^;

メイン部分以外はほとんど触ってませんでしたが、これを機会に少しずつ手を入れていきたいと思います。

Highslideの属性を自動設定する

Highslideの機能を有効にするためにはアンカー<a>にclass属性とonclick属性を付加する必要がありますが、JavaScriptを使ってonclick属性を自動的に追加することができました。
前回と同じく「小粋空間」さんのところのこちらの記事「HighSlide JS の onclick 属性を JavaScript で登録する」に詳しく書かれています。
紹介されているスクリプトを利用するとclass="highslide"が指定されているアンカーについてonclick属性とonkeypress属性が追加されます。

当ブログではExif情報の一部をキャプションとして掲載したいので、少し修正してみました。

function addHighSlideAttribute() {
   var isIE = (document.documentElement.getAttribute('style') ==
   document.documentElement.style);
   var anchors = document.getElementById('content').getElementsByTagName('a');
   for (var i = 0, len = anchors.length; i < len; i++) {
      if (anchors[i].className == 'highslide') {
         if (!anchors[i].getAttribute('onclick')) {
            var img_name = getFileName(anchors[i].href);
            var ev = "return hs.expand(this,{captionId:'caption-" + img_name + "'})";
            isIE ? anchors[i].setAttribute('onclick', new Function(ev)) :
                    anchors[i].setAttribute('onclick',ev);
            isIE ? anchors[i].setAttribute('onkeypress', new Function(ev)) :
                    anchors[i].setAttribute('onkeypress',ev);
         }
      }
   }
}

function getFileName(href) {
   var fe = href.substring(href.lastIndexOf('/',href.length)+1,href.length);
   var f = fe.substring(0,fe.lastIndexOf('.'));
   return f;
}

アンカーに設定されている画像ファイルのファイル名（拡張子を除く部分）をキャプションのIDとしてhs.expand()の引数に指定します。
例えば、画像ファイルのアンカーが href="http://〜/image001.jpg" だった場合、"caption-image001" がキャプションのIDとして指定されます。

これで随分作業が軽減されました。
驚き(^_^;

ちなみに画像を左寄せなどにするために、

margin: 0px 5px 5px 0px;
float: left;

を外部ファイルのCSSに記述してclass="〜"で指定しようとしたんですが、Highslideの動きがおかしくなりました。インラインで指定した場合は問題なし。
残念…。

Highslideで画像表示

"おさるの旅ログ1"（ココログ）で導入した Highslide をSeesaaにも設置しました。
「小粋空間」さんのところのこちらの記事「Highslide JS でサムネイル画像を拡大表示する」を参考にして導入。

ココログと違ってSeesaaではHTMLを直接修正できるので記事の通りに設置可能です。</head>の前に以下を挿入。

<script type="text/javascript" src="http://転送したパス/highslide/highslide.js"></script>
<script type="text/javascript">   
  hs.graphicsDir = 'http://転送したパス/highslide/graphics/';
</script>

hs.graphicsDirを上書きしないと動きません。その他の変数も上書きすることが可能で、highslide.jsの上の方を参照するとなんとなく分かります(^_^;
例えば、credits〜を上書きすれば自分のサイト名を表示することもできます。

<div id="highslide-container"></div>

は、書かなくても問題ないようです。あとはサンプルを参考にしてCSSをカスタマイズすればOKです。

→こんな感じになります。