www.wanichan.com

Web > Expression > Tips > Webページの作成

Expression WebでLightbox.jsを使ったWebページを作成する方法

最終更新日時:2020/07/20 07:57:05
  • このエントリーをはてなブックマークに追加
サムネイル画像をクリックすると元の画像を簡単にポップアップするには、Lightboxを利用するとよいでしょう。Expression Webのオートサムネイル機能を利用し、元画像をポップアップ表示するように実装する方法について説明します。

はじめに

自分の旅行記サイトや英語サイトでのPicture Galleryサイトでは、FrontPageやExpression Webでのオートサムネイル機能を利用して作成してきました。

「オートサムネイル」とは、とりあえず元画像をWebページに挿入したあとにその機能を実行すると、自動的にサムネイルを作成して元画像にリンクするというものです。

しかし、オートサムネイル機能では、ポップアップではなく、直接元画像に表示するという感じになり、ブラウザの[戻る]をクリックしないと元に戻れません。

昨今ではデスクトップに限らずスマホやタブレットなど、あらゆるデバイスからの閲覧が主流になっています。マルチデバイスに対応するには、jQueryを利用すると簡単です。

ここでは、Lightbox.jsを使った画像のポップアップ表示ができるWebページをExpression Webで作成する方法を紹介します。

STEP 1:Lightbox.jsが利用できるように設定する

あいにく外部JSファイルをWebページにリンクする方法はコードビューに切り替えないとだめです。<head>と</head>の間に以下のコードを挿入します。

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>

STEP 2:オートサムネイル機能を使ったWebページを作成する

準備ができたら、Expression Webのオートサムネイル機能を使って写真ギャラリーページを作成します。

STEP 3:検索と置換機能でLightbox.jsが動作するように処理する

検索と置換機能を使ってlightbox.jsが動くように属性値を設定します。

  1. 対象となるWebページを、[フォルダ一覧]作業ウィンドウからファイル単位、もしくはフォルダ単位で選択しておきます。
  2. [編集]→[置換]をクリック、もしくは[Ctrl]+[H]キーを押します。
  3. [検索と置換]ダイアログボックスの[HTMLタグ]タブをクリックします。
  4. [検索するタグ]には「a」を選択します。
  5. [置換の処理]には「属性値の設定」を選択します。
  6. [属性]には「data-lightbox」を指定し、[属性値]には「group」と入力します。
  7. [検索対象]では「選択したページ」を選択します。
  8. [HTMLのルール]ボタンをクリックします。
  9. [HTMLのルール]ダイアログボックスの[次のタグを検索 <a>]の下の「新しいルール」をクリックします。
     
  10. 下のボックスには下の図のように左側から
    [次の属性]、[href]、[次の値を含む]、[.jpg]と指定して、[OK]ボタンをクリックします。
  11. 最後に[すべて置換]ボタンをクリックします。
  12. この置き換え処理は元に戻せません。続けてもよろしいですか?のメッセージが表示されるので、[はい]ボタンをクリックします。
スポンサーリンク
INDEX
  • このエントリーをはてなブックマークに追加

問題は解決しましたか?

操作方法、設定方法等で困ったら、 Expression Web Users Forum に投稿してください!

▲このページのトップへ