シリウスカスタマイズ｜ライトボックスを簡単に設置する方法

ホームページでよく見られるライトボックスをシリウスに設置する方法を解説します。ウェブ上では色々な方法が解説されていますが、一番簡単な方法でご紹介します。

 

ライトボックスをご存じない方は下記サムネイル画像をクリックして見て下さい。

 

 

ライトボックスの説明

►5っの作業でライトボックスを導入します。

 

1. ライトボックスをダウンロード
 
2. ライトボックスをサーバーにアップロード
 
3. HTMLヘッダーへの宣言記述
 
4. ページにリンクサムネイルタグの貼り付け
 
5. 最上階層にライトボックス用画像アップロード
 
6. 上記このページトップの作成ソフト画像のHTML記述公開

まずは、ライトボックスのファイルを下記からダウンロードして下さい。

 

zipファイルでダウンロードされますので、解凍できない方はLhaplus（ラプラス）をダウンロードして下さい。

 

►スクリプトのWEBパーツ・・・ライトボックス [Lightbox]

 

►zipファイルなので圧縮を解凍する必要があります。

ファイルの圧縮と解凍ソフト・・・Lhaplus（ラプラス）

 

フォルダの中身のみをアップロードする

ダウンロードしたフォルダの中には[css][images][js]と3っのフォルダが格納されています。この3っをサーバーにアップロードします。

※ ↑訳がわからない方は、絶対に動画でその意味を確認してくださいね。

 

最上階層とは

►FTPソフトで言うと、WWWフォルダを開くとホームページフォルダがあります。そのホームページフォルダを開いたindex.htmlファイルがある場所です。

 

►サイト作成ソフトシリウスでは、アップロードする前にフォルダを作成し、サイト生成します。そのフォルダを開いた瞬間の、その場所が、そのサイトの最上階層です。

 

 

FTPが解りにくい方は、ライトボックスを上記生成フォルダの最上階層に置いても良いです。後にサイトをアップすれば、ライトボックスも最上階にアップされるわけですから。

 

この際、ライトボックスのアップする3っのフォルダのうち、[css][js]フォルダが、サイト生成フォルダの中にも元々同じ名前のファイルが存在するので、統合するかどうか尋ねられます。これは[全て統合]をクリックして下さい。

 

 

[css][js]の2っのフォルダが統合された状態が下記画像です。

 

 

ココまでの作業でシリウスにライトボックスを導入する事ができました。次はその導入したライトボックスの機能をシリウスで動かすための作業に進みます。

ライトボックスをシリウスで機能させるには、次の記述をhtmlファイルのヘッダー内に記述する必要があります。テンプレートのカスタマイズに入るので慎重に作業して下さい。

 

※ 当サイトでは5行で記述されていますが、実際のコピー貼り付けでは4行になります。

 

上記の4行をシリウスの管理画面から「編集」の「HTMLテンプレート」を開いてHTMLファイルのトップページとエントリーページのヘッダー内に貼り付けます。

 

 

 

スクリプトタグをトップページとエントリーページに貼り付けましたら、左上の保存をクリックして閉じます。これでHTMLテンプレートの編集は完了です。

それではシリウスの管理画面に戻って、サムネイルと拡大画像を表示するためのタグの貼り付けをします。下記をコピーして使ってください。

※ 当サイトでは2行で記述されていますが、実際のコピー貼り付けでは1行になります。

 

上記タグの赤字の部分を変更します。

 

拡大画像のソース

グループ

メッセージ

サムネイル画像

拡大画像のソースは、この時点では未記入で良いです。この記述を間違えると拡大画像が表示されないので、次で詳しく解説します。

超重要

 

FTPではサイトフォルダを開いてすぐの、トップページのindex.htmlがある場所にアップロードします。自信のない方はライトボックス本体を最上階に置いたのと同じ方法を使います。下記画像の例では拡大画像は3枚になっていますが、このように最上階層に置きます。

 

 

前述しましたが、拡大画像の横幅を決める場合でスマホ対応を気にされる方は、横幅を600px程度までにした方が良いです。スマホを横に向けたときの限界値です。

 

拡大画像のソースを管理画面でHTMLに記述するときの注意

 

例でサムネイルと拡大画像の1セットを1行書いてみます。

 

このように拡大画像のファイル rbx-11.jpg は、上記のタグの赤色部分になるのですが、ファイル名そのままを記述します。そしてこのタグ自体はリンクタグですよね！！要するにサムネイル画像をクリックで rbx-11.jpg にリンクして飛ぶって事です。

 

ただリンクで画像に飛ぶだけでなく、ヘッダーで記述したスクリプトに従って、あのようなライトボックスの表現になるわけです。そのスプリプトの内容が、一番最初にアップロードしたライトボックス本体になるわけですね。

 

今回の作業の流れと、その理屈と意味だけを理解していただければ結構です。このような作業を出来るようになると、ネット上で便利なスクリプトはいくらでもありますので、取り入れる事が出来るようになります。

 

またこのような作業に慣れてしまうと、プログラム、PHPなどをホームページのシステムに取り込む事もできるようになります。超基本的に今回のスクリプトみたいに、プログラムもHTML上の指示をどう受け、どう処理し、どのように表示させるのかって事です。

 

・・・そんなに簡単ではないですよね、、、、

►下記ソースをコピーしてテラパッドに貼り付けて、改行してみると解りやすいです。

 

リンクタグの記述が長いので、サムネイル画像を並べると複雑に見えますが、同じ事のくり返しなので、慣れれば簡単です。落ち着いてゆっくり、確実に、順番に、作業して下さい。

 

それでは作業を実践して頂いた方はお疲れ様でした！