シリウスカスタマイズ｜ライトボックスを簡単に設置する方法
ホームページでよく見られるライトボックスをシリウスに設置する方法を解説します。ウェブ上では色々な方法が解説されていますが、一番簡単な方法でご紹介します。
ライトボックスをご存じない方は下記サムネイル画像をクリックして見て下さい。
[グループA]
[グループB]
このコンテンツはシリウスである程度操作経験がある方のみ実践してください。サイト生成のご経験がない方は、ご遠慮願います。申し訳ございませんがライトボックスについてのご質問は、サポートの時間的公平を規するためお受けする事ができません。操作される方は慎重に導入して下さい。自信のない方はまずサイトをひとつ完成させてからにしましょう。
ライトボックスの説明
上記画像をクリックしますと、拡大画像が表示されます。[NEXT]ボタンをクリックすると次の画像に進み、[PREVボタン]をおすと前の画像に戻ります。
画面を元に戻すには[CLOSEボタン]か、または画面の黒い部分をクリックします。
画面左下には、「画像の説明文」とそれぞれのグループの「画像総枚数」とその「グループで何枚目の画像」であるかを表示させいます。
なお、上記の画像群はAとBにグループ分けしています。ライトボックスでは、このようなグループ分けは後でも簡単に変更する事ができます。
作業自体は簡単ですが、少しでも間違いがあるとまったく機能しません！
今回このシステムを取り入れる方は、階層というホームページの親子関係の原理をこれを機会にしっかり理解しましょう。後に必ず役に立ちます。
シリウスカスタマイズ-3 ライトボックスを簡単に設置する方法について
[この動画は18分で見れます]
►5っの作業でライトボックスを導入します。
まずは練習です！上記の作成ソフトの画像のようにサムネイル画像を何枚にするか決めておいて下さい。サムネイル画像を3枚にするなら、そのサムネイル画像に対応した拡大画像を3枚用意してください
ライトボックスをダウンロード
１、ライトボックスというシステムを手に入れる
まずは、ライトボックスのファイルを下記からダウンロードして下さい。
zipファイルでダウンロードされますので、解凍できない方はLhaplus（ラプラス）をダウンロードして下さい。
►スクリプトのWEBパーツ・・・ライトボックス [Lightbox]
►zipファイルなので圧縮を解凍する必要があります。
ファイルの圧縮と解凍ソフト・・・Lhaplus（ラプラス）
ライトボックスをサーバーにアップロード
２、システムをアップロードする
フォルダの中身のみをアップロードする
ダウンロードしたフォルダの中には[css][images][js]と3っのフォルダが格納されています。この3っをサーバーにアップロードします。
今回のご説明は、[css][images][js]フォルダをFTPでサイト最上階層にアップロードします。なので、カテゴリーページを作成したその中のエントリーページでは、機能しません。「トップページのindex.htmlファイル」と、同じ階層にある最上階層のエントリーページで機能するという事です。
シリウスの最上階層にも、[css]と[js]という同じ名前のフォルダが存在します。なのでライトボックスをアップロードすると、ライトボックと同じフォルダ名の、この2っのフォルダは一緒になり統合されます。
※ ↑訳がわからない方は、絶対に動画でその意味を確認してくださいね。
最上階層とは
►FTPソフトで言うと、WWWフォルダを開くとホームページフォルダがあります。そのホームページフォルダを開いたindex.htmlファイルがある場所です。
►サイト作成ソフトシリウスでは、アップロードする前にフォルダを作成し、サイト生成します。そのフォルダを開いた瞬間の、その場所が、そのサイトの最上階層です。
FTPが解りにくい方は、ライトボックスを上記生成フォルダの最上階層に置いても良いです。後にサイトをアップすれば、ライトボックスも最上階にアップされるわけですから。
この際、ライトボックスのアップする3っのフォルダのうち、[css][js]フォルダが、サイト生成フォルダの中にも元々同じ名前のファイルが存在するので、統合するかどうか尋ねられます。これは[全て統合]をクリックして下さい。
[css][js]の2っのフォルダが統合された状態が下記画像です。
ココまでの作業でシリウスにライトボックスを導入する事ができました。次はその導入したライトボックスの機能をシリウスで動かすための作業に進みます。
HTMLヘッダーへのスクリプトタグ4行記述
３、システムが動くようにヘッダーにスクリプトを記述する
ライトボックスをシリウスで機能させるには、次の記述をhtmlファイルのヘッダー内に記述する必要があります。テンプレートのカスタマイズに入るので慎重に作業して下さい。
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
※ 当サイトでは5行で記述されていますが、実際のコピー貼り付けでは4行になります。
上記の4行をシリウスの管理画面から「編集」の「HTMLテンプレート」を開いてHTMLファイルのトップページとエントリーページのヘッダー内に貼り付けます。
スクリプトタグをトップページとエントリーページに貼り付けましたら、左上の保存をクリックして閉じます。これでHTMLテンプレートの編集は完了です。
ブラウザにリンクサムネイルタグの貼り付け
４、表示したいページにリンクタグを貼る
それではシリウスの管理画面に戻って、サムネイルと拡大画像を表示するためのタグの貼り付けをします。下記をコピーして使ってください。
<a href="拡大画像のソース" rel="lightbox[グループ]" title="メッセージ">サムネイル画像</a>
※ 当サイトでは2行で記述されていますが、実際のコピー貼り付けでは1行になります。
上記タグの赤字の部分を変更します。
拡大画像のソース
最上階層にアップロードする拡大される画像のソースです。サムネイル画像に対応した画像をデスクトップに用意するのですが次のコンテンツで詳しく解説します。
大きさはスマホ表示の事を考えると600pxぐらいまででしょう。
グループ
このページのトップに作成ソフトの画像を2っのグループに分けて置いています。このグループというテキストの替わりに、小文字英数字でグループ名を記述します。
仮にaと記述しますと、aグループだけの拡大画像が順番に見れるという事です。
メッセージ
拡大画像が表示された場合に、その左下に画像の説明文として表示されます。SEOでも重要なので、画像を的確に表現した文章にして下さい。
サムネイル画像
通常の状態でホームページで閲覧できる画像です。このサムネイル画像をクリックすると、拡大画像が見れるようにしているわけです。
例を挙げますとこのページトップの7っの作成ソフトの画像になります。サムネイルの画像のタグの貼り方は通常シリウスで画像を貼る場合の操作と同じです。
例・・・いつもの画像ソース
<img src="<% pageDepth %>img/sirius.jpg" style="width:120px;" alt="シリウス" />
拡大画像のソースは、この時点では未記入で良いです。この記述を間違えると拡大画像が表示されないので、次で詳しく解説します。
最上階層にライトボックス用画像アップロード
５、拡大画像の記述とアップロード
超重要
拡大画像をアップロードする場所は最上階層です。絶対にいつものようにイメージフォルダに取り込まないで下さい！激注意！
FTPではサイトフォルダを開いてすぐの、トップページのindex.htmlがある場所にアップロードします。自信のない方はライトボックス本体を最上階に置いたのと同じ方法を使います。下記画像の例では拡大画像は3枚になっていますが、このように最上階層に置きます。
前述しましたが、拡大画像の横幅を決める場合でスマホ対応を気にされる方は、横幅を600px程度までにした方が良いです。スマホを横に向けたときの限界値です。
拡大画像のソースを管理画面でHTMLに記述するときの注意
拡大画像はシリウスのイメージフォルダではなく、最上階層に置くという事でしたので、画像ソースの記述に注意が必要です。HTMLタグへの記述は、普段の画像を取り込んだ場合のソースではなく、画像ファイルの名前そのままになります。
例でサムネイルと拡大画像の1セットを1行書いてみます。
<a href="rbx-11.jpg" rel="lightbox[a]" title="サイト作成ソフトシリウス"><img src="<% pageDepth %>img/rbx-1.jpg" style="width:93px;" alt="サイト作成ソフトシリウス" /></a>
このように拡大画像のファイル rbx-11.jpg は、上記のタグの赤色部分になるのですが、ファイル名そのままを記述します。そしてこのタグ自体はリンクタグですよね！！要するにサムネイル画像をクリックで rbx-11.jpg にリンクして飛ぶって事です。
ただリンクで画像に飛ぶだけでなく、ヘッダーで記述したスクリプトに従って、あのようなライトボックスの表現になるわけです。そのスプリプトの内容が、一番最初にアップロードしたライトボックス本体になるわけですね。
今回の作業の流れと、その理屈と意味だけを理解していただければ結構です。このような作業を出来るようになると、ネット上で便利なスクリプトはいくらでもありますので、取り入れる事が出来るようになります。
またこのような作業に慣れてしまうと、プログラム、PHPなどをホームページのシステムに取り込む事もできるようになります。超基本的に今回のスクリプトみたいに、プログラムもHTML上の指示をどう受け、どう処理し、どのように表示させるのかって事です。
・・・そんなに簡単ではないですよね、、、、
このページトップの作成ソフト画像のHTML記述公開
最後に、このページトップのライトボックスのHTMLの記述を書いておきます。
►下記ソースをコピーしてテラパッドに貼り付けて、改行してみると解りやすいです。
- サムネイル画像「4枚でa」、「3枚でb」の2っのグループに分けている。
- 各グループでセンタリング（中央寄せ）を記述。
リンクタグの記述が長いので、サムネイル画像を並べると複雑に見えますが、同じ事のくり返しなので、慣れれば簡単です。落ち着いてゆっくり、確実に、順番に、作業して下さい。
それでは作業を実践して頂いた方はお疲れ様でした！
ソフトの概要｜使える無料ツール｜ソフトの使い方解説｜企業Hpの作り方解説
HPで集客する方法｜HP作成基礎知識｜グーグルサービス｜よくある質問Q&A
Hp公開の方法｜ＳＥＯ対策基本編｜ＳＥＯ対策実践編｜アクセス解析
シリウスカスタマイズ｜ライトボックスを簡単に設置する方法の関連ページ
- リンク文字をへこませる
- シリウスのカスタマイズでリンクテキストがへこんだように見える方法をご紹介します。カーソルを置いたときに、そのリンクテキストを下、右、に「ずらす」事で表示させます。スタイルシートにソースをコピペ、貼りつけるだけで簡単にできますので挑戦して下さい。
- リンク画像を変化させる
- シリウスのカスタマイズで、リンク画像の上にカーソルを置いたときに、その画像がへこんだり、画像が半透明になる方法をご紹介します。このカズタマイズをしておくと、訪問者さんが「画像がリンクである事」を認識しやすくなり、クリック率があがり、リンク先に誘導するのに効果的です。
- アイフォン、スマホ電話番号簡単発信リンク
- iphone,スマホなど携帯端末の画面で電話番号をタップすると発信画面に番号がコピーされる機能があります。サイトで電話番号を最適表示させるためのテクニックについて解説します。初心者さんでも簡単に設置可能なスクリプトとHTMLの記述！
