このブログで「Highslide JS の設置説明」ページが一番人気のため、調子にのって自分の「設定 & 使い方」の記事を書いてみた。 （＾∀＾）
これをそのまま説明通りに設定（コピペ）すれば非常に簡単に設置ができ、「jun」と同じ使い方ができる・・・・・・・・と思う。 ﾍ(__ﾍ)☆＼(^^;)オイオイ ・・・すべて理解するのはちょっと難しいので使えれば良いと言う人におすすめ！
※この設定説明で使用できるものは、下記になります。
- 画像表示
- コントロールバー表示 （画像内）
- コントロールバー表示 （キャプション内）
- web表示
- inline表示
※オリジナルで頑張りたい方は、「Highslide JS の設置説明」 と 「Highslide JS の カスタマイズ」のページをご覧ください。
下準備
※ファイルの置き場を下記の状態で説明します。 （もちろん同じじゃなくても、以降の説明のアドレスをすべて置き換えてくれれば問題ないです。）- example.com
- wp-content 「フォルダ」
- js 「フォルダ」
- highslide 「フォルダ」
- highslide-with-html.js 「ファイル」
- highslide.css 「ファイル」
- graphics 「フォルダ」
- 各種画像ファイル 「ファイル」
- js 「フォルダ」
- wp-content 「フォルダ」
下準備 其の一 「highslide-with-html.js」の入手
こちらの「Highslide JS の カスタマイズページ」のオプションも使用できるように、「コンフィギュレータページ」で「highslide-with-html.js」を作成します。
右の画像と同じになるようにチェックして「Update」をクリック、表示されたら「Download highslide.js」をクリックし、下段にある「Highslide Download」の「Yes」をクリックしてダウンロードします。 「highslide-with-html.js」という名前で保存（又はリネーム）してください。 ※商業的に使用する場合は「有料」になります。・・・面倒だ！！と言う方は、「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide-full.packed.js」をご使用ください・・・※サイズがちょっと大きいです。 この場合、下記の説明文の「highslide-with-html.js」を「highslide-full.packed.js」に置き換えてください。
または、「オプション」は必要ない！！という方は「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide-with-html.js」をご使用ください。・・・※この場合、同じ名前ですがオプションは何個か使えません。
または、「inline表示」 & 「web表示」 & 「オプション」は必要ない！！という方は「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide.js」をご使用ください。・・・※この場合、下記の説明文の「highslide-with-html.js」を「highslidel.js」に置き換えてください。
または、「jun」が使用している、「highslide-with-html.js」を使用する・・・ﾍ(__ﾍ)☆＼(^^;)オイオイ
または、「オプション」は必要ない！！という方は「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide-with-html.js」をご使用ください。・・・※この場合、同じ名前ですがオプションは何個か使えません。
または、「inline表示」 & 「web表示」 & 「オプション」は必要ない！！という方は「Highslide JS」からダウンロードし解凍したものの中に入っている「highslide.js」をご使用ください。・・・※この場合、下記の説明文の「highslide-with-html.js」を「highslidel.js」に置き換えてください。
または、「jun」が使用している、「highslide-with-html.js」を使用する・・・ﾍ(__ﾍ)☆＼(^^;)オイオイ
下準備 其の弐 「highslide.css」の入手
下記をコピーして「highslide.css」で保存してください。※「jun」が使っているファイルですが・・・不要部分は削除したと思うのですが、もし不具合があったら言ってください。
σ(^◇^;)ヒヤアセ
※細かな指定は、ご自分の環境に合わせて行ってください。 ペコリ(o_ _)ｏ))
※6ヶ所ある画像アドレスは各自必ず指定してください。
下準備 其の参 「各種画像ファイル」の入手
「Highslide JS」からダウンロードして、解凍したフォルダの中にある「graphics」フォルダを使用します。・・・これで下準備は終了です。 (￣▽￣)ゞ
設定方法
<head>～</head>部分の記述※3ヶ所あるアドレスは各自必ず指定してください。
各自のテーマの「footer.php」の</body>より上の部分に下記を記述
（これは、コントロールバー（画像内）を簡単に使用するための記述です。）
使用方法
※記述例は、すべてテキストリンクですが画像リンクも、もちろん使えます。・・・下記の水色文字を<img>タグに変更してください。※「title="～"」などは、紛らわしくなるので省かせていただきました。 ・・・もちろん使えます。
※黄色文字は、各自アドレスを指定してください。
※緑色文字は各自お好きなようにしてください。
※白色文字 & 赤色文字は変更不可です。
<a class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス">「画像表示」</a>
<a id="thumb" class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス">コントロールバー表示 （画像内）</a>
※赤色文字（id）を付けることにより「画像内コントロールバー」が表示されるようになっています。 （※ id名、変更不可・・・どうしても変えたい場合は、設定部分も変更が必要です。）<a class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス">コントロールバー表示 （キャプション内）</a>
<div class="highslide-caption">
<a style="float: left; display: block;" class="control" onclick="return hs.previous(this)" title="戻る" href="#"> Previous <br />
<small style="font-weight: normal; text-transform: none;">left arrow key</small></a>
<a style="float: left; display: block; text-align: right; margin-left: 50px;" class="control" onclick="return hs.next(this)" title="次へ" href="#"> Next <br />
<small style="font-weight: normal; text-transform: none;">right arrow key</small> </a>
<a class="control" onclick="return hs.close(this)" title="閉じる" href="#">Close</a>
<a class="highslide-move control" onclick="return false" title="ドラッグで移動" href="#">Move</a><br />
<div style="clear:both">ここに、キャプションを入れることも可能です。 w(￣o￣)w オオー!</div></div>
<div style="clear: both;"> </div>
※キャプションが必要ない場合は、灰色背景部分の記述はいりません。<div class="highslide-caption">
<a style="float: left; display: block;" class="control" onclick="return hs.previous(this)" title="戻る" href="#"> Previous <br />
<small style="font-weight: normal; text-transform: none;">left arrow key</small></a>
<a style="float: left; display: block; text-align: right; margin-left: 50px;" class="control" onclick="return hs.next(this)" title="次へ" href="#"> Next <br />
<small style="font-weight: normal; text-transform: none;">right arrow key</small> </a>
<a class="control" onclick="return hs.close(this)" title="閉じる" href="#">Close</a>
<a class="highslide-move control" onclick="return false" title="ドラッグで移動" href="#">Move</a><br />
<div style="clear:both">ここに、キャプションを入れることも可能です。 w(￣o￣)w オオー!</div></div>
<div style="clear: both;"> </div>
<a href="#" class="highslide" onclick="return hs.htmlExpand(this, { contentId: 'id名' } )">「inline表示」</a><br />
<br />
<div style="width: 200px; height: 200px;" id="id名" class="highslide-html-content">
<div class="highslide-header">
<ul>
<li class="highslide-move"><a title="ドラッグで移動" href="#" onclick="return false">Move</a></li>
<li class="highslide-close"><a title="閉じる" href="#" onclick="return hs.close(this)">Close</a></li>
</ul>
</div>
<div class="highslide-body"><br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br /></div>
<div class="highslide-footer">
<div><span title="リサイズ" class="highslide-resize"> </span></div>
</div>
</div>
<div style="clear: both;"> </div>
※2ヶ所の桃色文字の名称は同じにしてください。<br />
<div style="width: 200px; height: 200px;" id="id名" class="highslide-html-content">
<div class="highslide-header">
<ul>
<li class="highslide-move"><a title="ドラッグで移動" href="#" onclick="return false">Move</a></li>
<li class="highslide-close"><a title="閉じる" href="#" onclick="return hs.close(this)">Close</a></li>
</ul>
</div>
<div class="highslide-body"><br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br />
ここが本文記入場所になります。<br />
<br /></div>
<div class="highslide-footer">
<div><span title="リサイズ" class="highslide-resize"> </span></div>
</div>
</div>
<div style="clear: both;"> </div>
※橙色文字で表示されるサイズを指定できます。
「web表示」
<a href="リンク先アドレス" onclick="return hs.htmlExpand(this, { objectType: 'iframe' } )">「web表示」</a>
オプション 使用方法
「jun」が良く使う「オプション」をいくつか記述しておきます。 ・・・自分の場合、すべて個別指定で使用しています。上記の例すべて指定方法は同じです。 下記を例に説明します。
<a class="highslide" onclick="return hs.expand(this)" href="リンク先画像のアドレス">テキストリンク</a>
上記の赤文字部分の「this」の後に「{ }」を付けて、その中に指定したいオプションを「 , 」で区切って追加していくだけです。
- 背景を黒く透過したい場合
- dimmingOpacity: '0.60'
- dimmingDuration: '0'
- 表示位置を中央にしたい場合
- align: 'center'
- 表示方法をフェードイン ・ フェードアウトさせたい場合
- transitions: ['fade']
<a class="highslide" onclick="return hs.expand(this, { align: 'center' })" href="リンク先画像のアドレス">テキストリンク</a>
1個だけの指定の場合は、こんな感じ・・・<a class="highslide" onclick="return hs.expand(this, { dimmingOpacity: '0.60', dimmingDuration: '0', align: 'center', transitions: ['fade'] })" href="リンク先画像のアドレス">テキストリンク</a>
複数指定の場合は、こんな感じ・・・※最後のオプション記述の後に「 , 」はいりません。
そうそう、ちなみに「web表示」のサイズの指定方法は・・・
<a onclick="return hs.htmlExpand(this, { objectType: 'iframe', width: 600, height:400 })" href="リンク先アドレス">こちら</a>
こんな感じで指定します。・・・「inline表示」 & 「web表示」の場合は、見た人が閉じるとき面倒なので、背景を黒く透過することをおすすめします。 （背景をクリックすると閉じれるようになります。 （＾∀＾） ・・・ただし、副作用として同時表示はできなくなりますが・・・(T^T) ）
その他の使い方は、「Highslide JS の カスタマイズ」のページを参考にしてください。 （こちらのページは、個別指定は載っていませんが・・・判ると思います。 σ(^◇^;)ヒヤアセ）
以上、終了です。
・・・おかしい・・・おかしすぎる！！ ・・・簡単にコピペで、あっさり作る記事のはずが ・・・なんでこんなに時間がかかってしまったのだろうか？？ 全然コピペじゃないし！！ ・・・・・・・・・・・「パトラッシュ・・・僕、もう疲れたよ・・・・」
(2 投票, 平均値/最大値: 5 / 5)人気度 : 61 %
