新着情報
サムネイル画像をクールなサブウィンドウで表示させるスクリプトを配布している「Highslide JS」を、“本家”のサイトで利用している。スクリプトを利用するのためのダウンロードは、商用ではない個人サイトは無料。導入には「小粋空間」の解説ページが助けになった。
→Highslide JS
→Highslide JS でサムネイル画像を拡大表示する - 小粋空間
Seesaaブログのサムネイル画像表示はサブウィンドウ表示ではないが、別タブ（別画面）に移動してもらって見てもらうというのは気が引けるので、このブログにもHighslide JSを導入することにした。例によって試行錯誤したが、最後には完璧な導入に成功。左の画像をクリックしてみてください。Seesaaブログのカスタマイズ性の高さがあらためてうれしくなった。
既にレンタルサーバーに開設しているサイトで導入済みなので簡単にいけると思ったが、ブログのファイルマネージャでスクリプトファイル諸々をアップロードすることでつまづいた。Seesaaブログのファイルマネージャは画像ファイル以外のファイルでもアップロード可能で、画像ファイル用のデフォルトのディレクトリ「image」以外にも新しいディレクトリを作成することができる。で、「highslide」というディレクトリを作成したのだが、CSSで指定しているサブウィンドウのレイアウト用の画像ファイルは、「highslide」の一階層下の「graphics」に保存されている。さらにサブウィンドウにドロップシャドウを付けたければ、ファイルのパスは highslide/graphics/outlines/drop-shadow となる。あれれ、ディレクトリの階層を作成することができない？！
やむを得ず全ての使用ファイルを「highslide」ディレクトリに突っ込んでみたけれど動作しない。使用ポインタzoomin.curとローディング画像loader.gifは出るが、その先は砂時計が固まったまま…。
（続きでどうやって導入に成功したかを説明）
小粋空間の記事へのトラックバックでHighslideで画像表示（おさるの旅ログ2）が目に留まり、読みに行ったが参考になるべき情報がなく…わかっている人にはわかるのでしょうが(^^；…＜highslide 設置方法 seesaaブログ＞で検索するとトラックバックピープルにヒット。Highslideを簡易的に導入 - 間違いだらけの○○選びで知ったLIFE IS LIKE A GROCERY CART. FC2ブログでHighslideを使う〜とりあえずそれっぽく篇〜へ。う〜ん、その通りやってみてもやはり動かなかった。「間違いだらけの○○選び」さんでは成功しているのに。いずれもSeesaaで導入可能とわかっただけでも有難いが、肝心のディレクトリ作成については情報が得られなかった。
いろいろやっているうちに今度はスクリプトさえ動作しなくなり、原因究明に四苦八苦。コピー&ペーストの時にアポストロフィを消してしまったのが原因とわかるまで、ホームページのレンタルサーバーのスクリプトを呼び出すという反則技？が成功したので、それでいいかと思ったり（笑）
気を取り直して再チャレンジしているときに、破れかぶれでそのまま「highslide/graphics」という名称のディレクトリを作成してみた。なんとこれが大成功。だったらサブウィンドウの枠にドロップシャドウをつけたいよね。白背景ではサブウィンドウがハッキリしないし。で、「highslide/graphics/outlines/drop-shadow」名のディレクトリを作り、ドロップシャドウの1.png〜8.pngをアップロード。大成功！
では詳細を。
Highslide JSからダウンロードしてきて、JavaScriptとスタイルシートを自サイトで使えるようにカスタマイズ。この辺りは小粋空間さんの記事を参考に。要はダウンロードした中のHTMLファイルのソースをテキストエディタで編集する。ホームページビルダーならソースを丸ごとコピーするとプレビューしながら編集できる。ただしホームページビルダーがタグの一部を削除することもあるので要注意。
Seesaaブログのファイルマネージャで新しいディレクトリの作成
☆ highslide というディレクトリを作成し、その中にhighslideフォルダの中のhighslide.jsをアップロード。
☆ highslide/graphics というディレクトリを作成し、その中にgraphicsフォルダの中のfullexpand.gif fullexpand.psd loader.gif zoomin.cur zoomout.curをアップロード。
☆ highslide/graphics/outlines/drop-shadow というディレクトリを作成し、その中にgraphicsフォルダの中にあるoutlinesフォルダのさらにその下のdrop-shadowフォルダにある、1.pngからf1.pngまでの画像ファイルを一個ずつアップロード。
☆ 〔デザイン〕→〔HTML〕でHTMLファイルの編集
</head>のすぐ上にJavaScriptコード（茶色文字部分）を挿入。
<body>のすぐ下に<div id="highslide-container"></div>の一行を挿入
<% /if -%>
<script language="JavaScript" src="あなたの転送用パスに変更/highslide/highslide.js"></script>
<script language="JavaScript">
hs.graphicsDir = 'あなたの転送用パスに変更/highslide/graphics/';
window.onload = function() {
hs.preloadImages(5);
}
</script>
</head>
<body>
<div id="highslide-container"></div>
<div id="container">
☆ 〔デザイン〕→〔デザイン一覧〕でスタイルシートの編集
一番下にhighslideのスタイル設定をを挿入。
「cursor: url」と「background-image: url」のカッコ内の箇所は、あなたの転送用パスに変更（絶対パスで）
☆ 記事編集画面での指定
Highslide JS Version: 3.0.0 では以下のように指定する（画像の回りこみ指定がなしの場合）
<a href="あなたの転送用パス（画像URL）/image/△△△.jpg" class="highslide" onclick="return hs.expand(this, {captionId:
'caption1'})"><img src="あなたの転送用パス（サムネイル画像URL）/image/thumbnail△△△.jpg"
width="150" height="112" border="0" alt="タカネマツムシソウ（サンプル画面）"
id="image1" /></a><div class='highslide-caption' id='caption1'>タカネマツムシソウ（サンプル画面）</div>
画像を複数使う場合はid="image2とid='caption2にして対応させる。
サブウィンドウ画面でコントロールバーを使ったスライドショーも面白い。私のウェブサイトで利用しているので、よろしかったらご覧ください。
→Slideshow with individual captions and a controlbar using custom overlay の使用例
→Slideshow with controls in a shared caption の使用例
※Seesaaブログのカスタマイズについて書いた過去記事
→記事タイトルに背景画像（Seesaaブログ）（2007.09.21）
→画像回り込みのカスタマイズ（Seesaaブログ）（2007.09.21）
→カスタマイズのための参考サイト（2007.03.18）
→Seesaaブログのカスタマイズ（2007.03.17）
→ファビコン設置（2007.03.05）
→ブログでの画像の使い方（回り込みなど）（2006.11.08）
→ブログのデザインカスタマイズ（2006.01.03）
北海道の今金町というところで地元情報や日々の暮らしなどをブログにしているものです。
知り合いのブログでHighslide JSのことを知り、僕も導入したいと思ったのですが、ｓｅｅｓａａブログでの設置方法を記載しているところがなく探していたところ、こちらにいきつきました。
早速、書かれている内容でやってみたのですが、いかんせんコンピューターに関するもともとの知識がまだ乏しいためなかなか上手くいきません。
そこで質問があります。
「転送用のパス」と記載されているのですが、これは「http://○○○.seesaa.net/」のような、ドメインでいいのでしょうか？
お忙しいところ申し訳ありませんが、教えていただけると大変助かります。
長々とすいません。よろしくお願いします。
ご質問について。
「http://○○○.seesaa.net/」ではなく、転送用URL、つまりスクリプトや画像を置いたフォルダのURLにしてください。
Seesaaの場合の転送用URLには「up」が付くようで、具体的には
「http://○○○.up.seesaa.net/」になります。
「Highslide JS」は良くできていますよね。
スクリプト配布フリーなのでリンクがあるロゴが入りますが
薄いグレーでほとんど目立ちませんし。
ご成功を祈ってます。
またわからない箇所がございましたら、いつでも遠慮無くご質問ください。
大変助かります。
早速、「up」を付けてやってみました・・・まだダメでした。
またまた質問させていただきたいと思います。
質問その１
「cursor: url」と「background-image: url」のカッコ内の箇所は、先に書いてある(highslide/graphics/zoomin.cur)のカッコ内の部分を消して転送パスだけ書き込むのでしょうか？
それとも(http://○○○.up.seesaa.net/highslide/graphics/zoomin.cur)というふうにするのでしょうか？
質問その２
highslideのスタイル設定は「小粋空間」さんのページにあったものをコピペして使ったんですが、それで大丈夫でしょうか？
質問その３
記事編集についてなんですが、下記のようにしてみました。一度ファイルマネージャーにアップロードした画像を（画像ＵＲＬ）の部分に入れればいいんですよね？
そして△△△の部分には下記の例でいくと「DSCN1993」でいいんでしょうか？
まったくのど素人で大変情けなく、ご迷惑をおかけしますがよろしくお願いします。
僕もあのカッコイイ感じにしてみたいです。
お返事は時間があいたときで結構です。
<a href="http://imakane.up.seesaa.net/(<img src="http://imakane.up.seesaa.net/image/DSCN1993.jpg" width="450" height="338" border="0" align="" alt="ここから山道へ・・・" />)/image/DSCN1993.jpg" class="highslide" onclick="return hs.expand(this, {captionId:
'caption1'})"><img src="http://imakane.up.seesaa.net/<a href="http://imakane.up.seesaa.net/(image/DSCN1993.jpg" target="_blank"><img src="http://imakane.up.seesaa.net/image/DSCN1993-thumbnail2.jpg" width="150" height="112" border="0" align="" alt="ここから山道へ・・・" /></a>)/image/thumbnailDSCN1993.jpg"
width="150" height="112" border="0" alt="ここから山道へ・・・"
id="image1" /></a><div class='highslide-caption' id='caption1'>ここから山道へ・・・</div>
【質問その１】
「http://○○○.up.seesaa.net/highslide/graphics/zoomin.cur」です。
ちなみにhttp://から始まるアドレスを使ってファイルの場所を指定することを「絶対パス」と言います。
該当箇所は以下のように記述します。
.highslide {
cursor: url(http://imakane.up.seesaa.net/highslide/graphics/zoomin.cur), pointer;
outline: none;
background-image: url(http://imakane.up.seesaa.net/highslide/graphics/loader.gif);
【質問その２】
YES！このブログと同じでよろしかったら
「Drop shadow and no border（ボーダーなし・影つき）」のCSSをコピペしてください。
ただし私の場合は画像の枠線の色と太さの指定を変更しています。（gray→blue 2px→1px）
【質問その３】
タグに無用な括弧（）があります。修正しました。
<a href="http://imakane.up.seesaa.net/image/DSCN1993.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="http://imakane.up.seesaa.net/image/DSCN1993-thumbnail2.jpg" width="150" height="112" border="0" align="" alt="ここから山道へ・・・" id="image1" /></a><div class='highslide-caption' id='caption1'>ここから山道へ・・・</div>
たぶんこれで大丈夫だと思います。
コピペしたときに改行が入らないようにしてください。
また元画のサイズは必要ありません。
私のやり方は、まず編集画面のファイルマネージャで、普通にサムネイル画像貼り付けを行い、
そのソースから画像のURLとサイズを取得。
次に過去記事の編集画面からhighslide仕様のソースをコピぺ。
それをアップする画像のURLとサイズの部分のみちょこちょこ修正しています（笑）
では再チャレンジしてみてください。
本当にありがとうございます<(_ _)>
おかげさまで僕のブログにも導入できました。というかほとんどMasakoさんに導いてもらいました。
いや〜かっこいいですね。
こうなったらゆっくりとこれまでの記事の写真を全部highslide使用にしますよ(^o^)丿
親切・丁寧に手順を解説していただき感謝しています。
北海道は初夏の気持ちのいい季節です。
山開きが続々と始まっています。
Ｍａｓａｋｏさんが今年も楽しい登山ライフを過ごせますように<(_ _)>
どうもお世話になりました！！
失礼いたします。