ホームページ作成ソフトのQHM　ホームページビルダーやDreamWeaverで１からホームページを作る前に！ブログ感覚で制作できるホームページ作成ソフト

ライトボックス機能

ライトボックス機能とは？

ライトボックス機能とは画像を拡大する際、ポップアップ表示できる機能のことです。
デモをご覧頂ければどのような機能なのかを確認できます。
この機能を使えばイメージギャラリーなんかも簡単に制作できます。
　

デモ （画像をクリックすると画像がポップアップします）

　ライトボックス機能　ライトボックス機能2　ライトボックス機能3　ライトボックス機能4　ライトボックス機能5

比較

通常のhtmlで記述する場合

まずはライトボックス機能を使うための
Jqueryと言われるJavaScriptファイルをすべてダウンロードしてきます。
次にFTP関連ソフトを使ってサーバーにインストールします。
htmlページの<head>内に以下のものを記述していきます。

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>

　<body>内には表示させたい位置で次のように記述します。

<a href="swfu/d/3340539053_79beed8cf8_o.jpg" title="このように画像の解説もつけることができます" class="lightbox"  rel="group"><img src="swfu/d/3340539053_79beed8cf8_o.jpg" alt="ライトボックス機能" title="ライトボックス機能" width="100" height="100" /></a>

QHMに比べて非常に複雑な上、FTP関連ソフトも必要になり
難易度が非常に高いです。
　

QHMで記述する場合

基本的に記述する必要はありません。コピー&ペーストで実現できます。
詳しくは下記の簡単アップロード機能を使おう！で解説いたします。

&lightbox2(swfu/d/3340539053_79beed8cf8_o.jpg,このように画像の解説もつけることができます,group){&ref2(swfu/d/3340539053_79beed8cf8_o.jpg,nolink,20%,ライトボックス機能);};

　

画像をラク楽アップ！簡単アップロード機能を使おう！

本当に簡単に出来るかチュートリアル式に解説していきます。
FTPなど小難しいことは一切必要ありません。
すべてWeb上で実現できます。

※グレイボックス機能もまったく同じ手順で画像をアップできます。
では、早速見ていきましょう！

１、ユーザー認証を行い編集モードします

ユーザー認証

　

１-２、認証後、画像を貼り付けたいページに移動します

認証完了

　

２、編集ボックス内の「SWFU」をクリックします

画像の説明

　

３、 簡単アップローダを起動し”アップロード”をクリックします

画像の説明

　

４、画面が変わったら”Click” をクリックし、任意の画像を選択します

画像の説明

　

５、 画像のアップロードが完了すると次のようになります

画像の説明

　

６、”*トップへ*”をクリックすると先ほどアップした画像が一覧になっています

画像の説明

　

７、画像やタイトルをクリックすると詳細なコマンドがでてきます

画像の説明

　

８、今回はlightboxを使うので赤枠内のソースを右クリックして”コピー”します

画像の説明

　

９、編集ボックス内の”編集をクリックします”

画像の説明

　

１０、 貼り付けたい位置にカーソルを持っていき”貼り付け”を実行します

画像の説明

　

１１、 画像表示用のソースが貼り付けられました

画像の説明

　

１２、 プレビューを見て大きさを確認します　良ければページを更新して完了です

画像の説明

　
※今回のデモは50％では大きかったので20％まで小さくして、横並びに表示しています。

いかがだったでしょうか？
このように画像のアップロードからホームページに貼り付けまで
QHMは非常に簡単にできます。

QHMの応用１カテゴリ　関連項目


QHMを使うための４つの安心

ホームページ作成ソフト_ライトボックス機能