初めてのホームページ作成で見る動画

 

便利な無料ソフトと便利サイト一覧サイト作成ソフトシリウス、最短HPテンプレートの使い方解説お店、企業用ホームページの作り方ホームページで集客し、売り上げを延ばす方法グーグルの無料サービス一覧
HP作成 超初心者、高齢者講座サイト作成のFAQ記事一覧SEO対策実践編SEO対策基本編トップバナー用無料下地画像素材集

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

ライトボックスを導入する方法

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

 

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

サイト作成ソフトシリウス最短ホームページテンプレートワードプレステンプレート賢威

[グループA]

ホームページV3ドリームウィーバーホームページビルダー

[グループB]

 

このコンテンツはシリウスである程度操作経験がある方のみ実践してください。特にサイト生成のご経験がない方は、ご遠慮願います。また申し訳ございませんがライトボックスについてのご質問は、サポート時間の公平を規するため、お受けする事ができません。操作される方は慎重に導入して下さい。自信のない方はまずサイトをひとつ完成させてからにしましょう。

 

ライトボックスの説明

上記画像をクリックしますと、拡大画像が表示されます。[NEXT]ボタンをクリックすると次の画像に進み、[PREVボタン]をおすと前の画像に戻ります。

 

画面を元に戻すには[CLOSEボタン]か、または画面の黒い部分をクリックします。

 

画面左下には、「画像の説明文」とそれぞれのグループの「画像総枚数」とそのグループで何枚目の画像であるかを表示させいます。

 

なお、上記の画像群はABグループ分けしています。ライトボックスでは、このようなグループ分けは後でも簡単に変更する事ができます。

 

作業自体は簡単ですが、少しでも間違いがあるとまったく機能しません!

 

今回このシステムを取り入れる方は、階層というホームページ親子関係の原理をこれを機会にしっかり理解しましょう。後に必ず役に立ちます。

 

シリウスカスタマイズ-3

ライトボックスを簡単に設置する方法
[この動画は18分で見れます]

 

 

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

上記の作成ソフトの画像のようにサムネイル画像何枚にするかまず決めて下さい。サムネイル画像が3枚なら、そのサムネイル画像に対応した拡大画像3枚用意してください

 

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

 

1、ライトボックスをダウンロード
ライトボックスというシステムを手に入れる

まずは、ライトボックスのファイルを下記からダウンロードして下さい。zipファイルでダウンロードされますので、解凍できない方はLhaplus(ラプラス)をダウンロードして下さい。

 

ライトボックス [Lightbox]

スクリプトのWEBパーツ

 

zipファイルなので圧縮を解凍する必要があります。)
ファイルの圧縮と解凍ソフト・・・Lhaplus(ラプラス)

 

ライトボックス解凍ライトボックス解凍ライトボックス解凍

 

2、ライトボックスをサーバーにアップロード

システムをアップロードする

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

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

ライトボックスアップロード

今回のご説明は、[css][images][js]フォルダをFTPでサイト最上階層にアップロードします。なので、カテゴリーページを作成したその中のエントリーページでは、機能しません。

 

「トップページのindex.htmlファイル」と、同じ階層にある最上階層のエントリーページで機能するという事です。カテゴリー内のページで機能させるには、拡大画像と共にカテゴリーの最上階層にアップして下さい。

シリウスの最上階層にも、[css]と[js]という同じ名前のフォルダが存在します。この事からライトボックスをアップロードすると、ライトボックの[js]と同じフォルダ名であるシリウスの[js]、この2っのフォルダは一緒になり統合されます。

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

 

最上階層とは

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

 

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

 

最上階層

 

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

 

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

 

ライトボックをサイト生成フォルダに置く

 

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

 

ライトボックをサイト生成フォルダに置く

 

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

 

3、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ヘッダー

 

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

 

4、管理画面でリンクサムネイル(画像)タグの貼り付け

表示したいページにリンクタグを貼る

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

<a href="拡大画像のソース" rel="lightbox[グループ]" title="メッセージ">サムネイル画像</a>

上記タグの赤字の部分を変更していきますが、それぞれについて次で解説していきます。

 

拡大画像のソース

最上階層にアップロードする拡大される画像のソースです。サムネイル画像に対応した画像をデスクトップに用意するのですが次のコンテンツで詳しく解説します。

 

スマホなど携帯端末で最適表示させるには横幅が320pxまでの画像を用意します。しかし320pxではパソコンの表示では少し小さく感じられます。パソコン表示を優先させる場合は、700pxくらいの画像を用意しますと迫力ある表現が可能です。

 

グループ

このページのトップに作成ソフトの画像を2っのグループに分けて置いています。このグループというテキストの替わりに、小文字英数字でグループ名を記述します。

 

仮にaと記述しますと、aグループだけの拡大画像が順番に見れるという事です。

 

メッセージ

拡大画像が表示された場合に、その左下に画像の説明文として表示されます。SEOでも重要なので、画像を的確に表現した文章にして下さい。

 

サムネイル画像

通常の状態でホームページで閲覧できる画像です。このサムネイル画像クリックすると、拡大画像が見れるようにしているわけです。

 

例を挙げますとこのページトップの6っの作成ソフトの画像になります。サムネイルの画像のタグの貼り方は通常シリウスで画像を貼る場合の操作と同じです。

 

・・・いつもの画像ソース

<img src="<% pageDepth %>img/sirius.jpg" style="width:120px;" alt="シリウス" />

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

 

5、最上階層に拡大画像アップロード

拡大画像の記述とアップロード

拡大画像アップロードする場所は最上階層です。絶対にいつものようにイメージフォルダ取り込まないで下さい!激注意!

 

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

 

シリウスライトボックス拡大画像設置シリウス

 

前述しましたが、拡大画像の横幅を決める場合でスマホ対応を気にされる方は、横幅を320px程度までにした方が良いです。スマホをに向けた場合はもっと大きくできますが、ユーザビリティが悪くなるので止めた方が良いです。

 

拡大画像のソースを管理画面で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の記述を紹介します。

下記ソースは複雑に見えますが、このソースをコピーしてご自身のシリウスの管理画面に貼り付けて改行して下さい。長いソースは改行して整理すると理解しやすくなります。

  • サムネイル画像「3枚でa「3枚でbの2っのグループに分けている。
  • 各グループでセンタリング(中央寄せ)を記述。

 

<p class="txt-img" style="text-align:center"><a href="rbx-11.jpg" rel="lightbox[a]" title="サイト作成ソフトシリウス"><img src="<% pageDepth %>img/rbx-1.jpg" style="width:93px;" alt="サイト作成ソフトシリウス" /></a><a href="rbx-22.jpg" rel="lightbox[a]" title="最短ホームページテンプレート"><img src="<% pageDepth %>img/rbx-2.jpg" style="width:105px;" alt="最短ホームページテンプレート" /></a><a href="rbx-33.jpg" rel="lightbox[a]" title="ワードプレステンプレート賢威"><img src="<% pageDepth %>img/rbx-3.jpg" style="width:95px;" alt="ワードプレステンプレート賢威" /></a></p>
<p style="text-align:center;"><b>[グループA]</b></p>

 

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

 

 

 

 

 

TOPへ