新着記事
2007年09月27日

Highslide JSをSeesaaブログで使用

Highslide JSドロップシャドウつきサブウィンドウのSeesaaブログでの導入方法

サムネイル画像をクールなサブウィンドウで表示させるスクリプトを配布している「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までの画像ファイルを一個ずつアップロード。

【2010年3月15日追記】 コメントでご指摘いただき確認したところ、現在はこの方法で下層ディレクトリを作成することが不可能になっています。従ってこれから新しくSeesaaブログでHighslide JSを使うのは無理だと思われます。

〔デザイン〕→〔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 の使用例
【2010年10月13日追記】現在はコントロールバーを使わない仕様に変更。
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のことを知り、僕も導入したいと思ったのですが、seesaaブログでの設置方法を記載しているところがなく探していたところ、こちらにいきつきました。

早速、書かれている内容でやってみたのですが、いかんせんコンピューターに関するもともとの知識がまだ乏しいためなかなか上手くいきません。

そこで質問があります。
「転送用のパス」と記載されているのですが、これは「http://○○○.seesaa.net/」のような、ドメインでいいのでしょうか?

お忙しいところ申し訳ありませんが、教えていただけると大変助かります。

長々とすいません。よろしくお願いします。
Posted by kenji at 2008年06月13日 08:56
kenji さま
ご質問について。
「http://○○○.seesaa.net/」ではなく、転送用URL、つまりスクリプトや画像を置いたフォルダのURLにしてください。
Seesaaの場合の転送用URLには「up」が付くようで、具体的には
「https://○○○.up.seesaa.net/」になります。

「Highslide JS」は良くできていますよね。
スクリプト配布フリーなのでリンクがあるロゴが入りますが
薄いグレーでほとんど目立ちませんし。
ご成功を祈ってます。
またわからない箇所がございましたら、いつでも遠慮無くご質問ください。
Posted by Masako at 2008年06月13日 11:52
お忙しいところありがとうございます。
大変助かります。
早速、「up」を付けてやってみました・・・まだダメでした。
またまた質問させていただきたいと思います。
質問その1
「cursor: url」と「background-image: url」のカッコ内の箇所は、先に書いてある(highslide/graphics/zoomin.cur)のカッコ内の部分を消して転送パスだけ書き込むのでしょうか?
それとも(https://○○○.up.seesaa.net/highslide/graphics/zoomin.cur)というふうにするのでしょうか?


質問その2
highslideのスタイル設定は「小粋空間」さんのページにあったものをコピペして使ったんですが、それで大丈夫でしょうか?

質問その3
記事編集についてなんですが、下記のようにしてみました。一度ファイルマネージャーにアップロードした画像を(画像URL)の部分に入れればいいんですよね?
そして△△△の部分には下記の例でいくと「DSCN1993」でいいんでしょうか?

まったくのど素人で大変情けなく、ご迷惑をおかけしますがよろしくお願いします。
僕もあのカッコイイ感じにしてみたいです。
お返事は時間があいたときで結構です。

<a href="https://imakane.up.seesaa.net/(<img src="https://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="https://imakane.up.seesaa.net/<a href="https://imakane.up.seesaa.net/(image/DSCN1993.jpg" target="_blank"><img src="https://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>
Posted by kenji at 2008年06月13日 19:29
kenji さま
【質問その1】
「https://○○○.up.seesaa.net/highslide/graphics/zoomin.cur」です。
ちなみにhttp://から始まるアドレスを使ってファイルの場所を指定することを「絶対パス」と言います。

該当箇所は以下のように記述します。
.highslide {
cursor: url(https://imakane.up.seesaa.net/highslide/graphics/zoomin.cur), pointer;
outline: none;


background-image: url(https://imakane.up.seesaa.net/highslide/graphics/loader.gif);

【質問その2】
YES!このブログと同じでよろしかったら
「Drop shadow and no border(ボーダーなし・影つき)」のCSSをコピペしてください。
ただし私の場合は画像の枠線の色と太さの指定を変更しています。(gray→blue 2px→1px)

【質問その3】
タグに無用な括弧()があります。修正しました。

<a href="https://imakane.up.seesaa.net/image/DSCN1993.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="https://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とサイズの部分のみちょこちょこ修正しています(笑)

では再チャレンジしてみてください。
Posted by Masako at 2008年06月13日 21:44
ありがとうございます。
本当にありがとうございます<(_ _)>

おかげさまで僕のブログにも導入できました。というかほとんどMasakoさんに導いてもらいました。

いや〜かっこいいですね。
こうなったらゆっくりとこれまでの記事の写真を全部highslide使用にしますよ(^o^)丿

親切・丁寧に手順を解説していただき感謝しています。

北海道は初夏の気持ちのいい季節です。
山開きが続々と始まっています。

Masakoさんが今年も楽しい登山ライフを過ごせますように<(_ _)>

どうもお世話になりました!!
失礼いたします。
Posted by kenji at 2008年06月14日 09:34
highslideを使いたくて、このサイトにたどり着きました。
質問なのですが、画像を単体で表示するものとスライドショーの様に複数の画像を表示するものを併記するにはどういう設定にすれば良いのでしょうか?
また、HTMLの文章の場合の設定の仕方も教えていただければありがたいです。
Posted by hisahata at 2008年09月26日 10:13
hisahataさま
初めのご質問は、ひとつの同じページで2種類のhighslideCSSを使いたいということだと思うのですが…

無料サービスのブログの場合は、全ての記事ページで同一のスタイルシート、HTMLを適用しているので、まず不可能だと思います。

ブログじゃないサイトではページごとにJavascriptやCSSを適用できますが、私の知識レベルでは同一ページでというのは、やはり無理だという気がします。
highslideは、そのページの画像をクリックしたらサブウィンドウを開くというアクションをJavascriptで指示し、サブウィンドウやボタンのデザインをCSSで指定しています。同じページでJavascriptとCSSの組み合わせを2種類指定するのは複雑過ぎます。
実際、Highslide JS のサイトでも同一ページで併用しているサンプルページはありませんし。
スライドショータイプなら画像を単体で表示するタイプ兼用なので、併用することもないのではないでしょうか。

「HTMLの文章の場合の設定」というのは、上記で言う「ブログじゃないサイト」(いわゆるホームページ)のことでしょうか?だとしたら…
Highslide JS のサンプルページのように、HTMLページの中に全部コピペで大丈夫です。
ちなみに私のホームページの場合は、highslideを複数多数のページで適用したいのとソースの軽減のために、JavascriptファイルとCSSファイルを外部ファイルにしてリンクさせています。

もし「HTMLの文章の場合の設定」というのが、以下のhighslide(テキストを小窓で出すタイプ)のことでしたら…
http://highslide.com/example-inline.html
私はまだやっていないので、説明できません。
ただ、画像用のhighslideができれば、難しくはないかも。

私は説明が下手なので(汗)、理解できなかったら何度でもお気軽にお聞きください。
Posted by Masako at 2008年09月26日 14:58
解説ありがとうございました。少しずつやってみます。

もう1つ、http://www.our-hiking.com/goro/gallery_sketch1.html
の様なページは別CSSで設定しているということですね?
これはどの様な設定をすれば良いのでしょうか?
基本的な質問ですみません。
Posted by hisahata at 2008年09月26日 17:06
何度もすみません。
一応単独の画像の場合の設定は出来た様なのですが、「Expand to actual size」のgifが出ないのです。どうしてなのでしょう?

お願いします。
Posted by hisahata at 2008年09月26日 17:14
hisahataさま
【後の質問の答え】
「Expand to actual size」のgifというのは拡大した画像を実際のサイズにするとき右下に現れる「fullexpand.gif」のことですね。
これは拡大画像のサイズがブラウザの画面ギリギリのサイズか、あるいはブラウザ画面に収まりきれないサイズの場合にのみ出ます。自動です。
用意した画像がブラウザ画面からはみ出さないサイズなら出ません。
この条件でも出ないのでしたら、アップロードしたディレクトリに間違いないか、貼り付けたソースにミスはないか、再確認する以外手立てはありません。

【外部CSSファイルの作成と設定】
(1)「メモ帳」(あなたのPCのOSがウィンドウズでしたら)にhighslideのCSS部分をコピペし、適当な(highslideでいいです)ファイル名を付けてあなたのサイト用フォルダに保存。次にそのファイルの拡張子「txt」を「css」に変更。ちなみに再編集するときは、拡張子をtxtを戻して実行。
(2)HTMLページのソースの<head>と</head>の間に以下のソースを加えます。
<link rel="stylesheet" href="△△△.css" type="text/css">
△△△の箇所はあなたが付けたCSSファイル名。
より詳しく追加位置を知りたければ、サンプルページ「父のスケッチ旅行 (1)」のソースを開いてご覧ください。
(3)CSSファイルとHTMLファイルの両方をアップロード。
これで完了。
もしCSSの知識があるなら、highslide以外にもテキストのフォントや見出しなどのデザイン指定をCSSでしたければ、同じCSSファイルに書き込めます。

※Javascriptの外部ファイルも同じような手順で作成し、HTMLファイルでリンクすればいいのです。私の場合highslideのJavascriptは外部ファイルではなく、HTMLファイルに書き込んでいますが。

ついでですが、CSSやHTML、Javascriptの使い方が初心者でもよくわかる、サイトをご紹介しておきます。

All About [ホームページ作成]
http://allabout.co.jp/internet/hpcreate/
Posted by Masako at 2008年09月26日 18:53
よく判りました。やってみます。
ありがとうございました。
Posted by hisahata at 2008年09月26日 19:33
http://www.our-hiking.com/goro/gallery_sketch1.html
を真似て複数の写真を設定しようとした所、
コントロールバーの画像が出てこないのはどうしてなのでしょう?
CSS等の設定は正しく設定しているはずなのですが? 何かの設定ミスだと思います。
因みにhighslide4.06、ブログはseesaaを使用しています。
お願いします。
Posted by hisahata at 2008年10月02日 09:51
hisahataさま
highslideのバージョンはもう4.06なのですね。
私が利用しているのは3.0ですが、やり方は変らないはずです。

コントロールバーの画像が出てこない原因で私が考えられるのは…
(1)hisahataさんがダウンロードしたhighslideのフォルダの階層と合わせていますか?
このブログ記事ではスライドショーにはならないコントロールバーなしのタイプを例にして説明していますので、フォルダ名も変ってきます。

(2)あとは、作成した highslide/graphics/ のフォルダにちゃんと画像ファイルがアップロードされていないのでは?ということくらいです。

ご自身で何度もやり直して間違っていないと思っていても、往々にして見落としているミスがあることもあります。私も何度もやり直してミスを発見しました。
コントロールバーなしのタイプの方が比較的簡単なので、テスト用のブログを作成して、試験的にコントロールバーなしのタイプでやってみると良いかもしれません。それで成功すれば要領がわかって、コントロールバー付きのも一度で成功すると思いますよ。

けっこうこういう作業は忍耐がいるのですよねえ(笑)
時間があるときに落ち着いてなさると、案外簡単に設置できるかも。
画像を小窓で出す所までできたようですから、あと少しです。頑張ってください。
Posted by Masako at 2008年10月02日 22:38
Masakoさん、ありがとうございます。
もう一度やってみます
Posted by hisahata at 2008年10月03日 09:17
古い記事にコメントして申し訳ありません。
highslideの存在を数日前に知り、こちら様にたどりつきました。
私もseesaaを使っているので、質問させていただきたいのですが。。。
まず、ファイルマネージャーでhigslideフォルダはできますが、その下の階層のフォルダが作れません。
ここでつまづいています。
また、当該スクリプトとcssを搭載できれば、全てのページで拡大が可能になるのでしょうか。あるいは記事をアップするたびに画像に<a>や<img>を使うのでしょうか。

現在はfancyzoomというスクリプトを使っていますが、拡大画像が100%にならないので不満を感じています。

すみませんが、ご返答いただければ幸いです。
Posted by ぼぶ at 2010年02月10日 09:53
ぼぶ 様
【質問その1】『higslideフォルダはできますが、その下の階層のフォルダが作れません』について
記事本文中程に「Seesaaブログのファイルマネージャで新しいディレクトリの作成」という太字見出しがあり、そこで解説しています。赤の☆部分です。

【質問その2】『当該スクリプトとcssを搭載できれば、全てのページで拡大が可能になるのでしょうか。あるいは記事をアップするたびに画像に<a>や<img>を使うのでしょうか』
そうです。記事編集画面にソース(HTML)を書き込みます。
(本文中の「☆ 記事編集画面での指定」部分を参照してください)
Posted by Masako at 2010年02月10日 16:22
遅くなりましたが、ご返答ありがとうございました。

ディレクトリですが、ファイルマネージャーの「オプションを表示する」からhighslide/graphics を貼り付けて「追加」をしても、跳ね返されます。「ディレクトリに使われる文字は 0〜9 a〜z _ となります。」と出ます

貴殿はどのように作成されたのでしょうか。。
すみませんが、よろしくお願いいたします。
Posted by ぼぶ at 2010年03月15日 10:03
ぼぶ 様
そんなはずはない、と思って試してみたら仰るとおりでした。
スラッシュを抜いてみたら今度は『ディレクトリに使われる文字は 15文字以下 となります。』のエラーで跳ね返されました。

私が設定した2007年、コメント欄でアドバイスをしたkenjiさんが設定した2008年6月時点では先の方法で出来ていたので、その後にSeesaaの仕様が変わり不可能になったとしか考えられません。
しかし仕様変更以前に作成済みの下層ディレクトリについては、そのままになっている模様です。
本文中にこの件を追加記載しておかねば。

で、現在下層ディレクトリが作成できなくなった以上、SeesaaブログでHighslide JSを使うのは無理でしょう。
全ての画像をひとつのディレクトリにまとめると、スクリプト・CSSにも手を入れなければならず、面倒だし動くかどうかも疑問ですから。

拡大画像が100%になるJSをお望みなら、「lightbox」は如何でしょうか?
ディレクトリはひとつで済みますし、別ウィンドウが開くのが好きじゃない閲覧者には好まれるかも。
このブログで導入に成功したので解説記事を書くつもりです。
この頃多忙で更新をサボっていますが(笑)
「lightbox」での画像拡大の例は最新記事…といっても1月ですが(^^;…をご覧下さい。
リンクはこちらです。
http://our-hiking.seesaa.net/article/138089556.html
Posted by Masako at 2010年03月15日 17:29
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
最近のトラックバック

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。