シリウス画像をクリックして拡大表示させる方法

lightboxtop

 

 

まずは、画像をクリックしてみてください。

 

matsumoto_castle1 matsumoto_castle2 matsumoto_castle3

 

matsumoto_castle4 matsumoto_castle5 matsumoto_castle6

 

 

小さい画像でしたらあまりよくわからなくても、大きい画像になるととてもよくわかりますね。

 

この方法をあなたのブログにも取り入れてみませんか?
実はとても簡単なんですよ。

 

今回ご紹介するのが「Lightbox」です。

 

Lightboxをダウンロードして設置する方法もありますが、CDN経由で読み込みが可能です。

 

CDNとは、コンテンツ・デリバリー・ネットワーク(Contents Delivery Network)の略です。

ウェブコンテンツをインターネット経由で配信するために最適化されたネットワークのことである。
引用 : Wikipedia

 

CDNは無料で使用でき、設定がとても楽ですのでおすすめです。

 

設定の作業はたったこれだけです。

  • 準備をする
  • 画像を拡大するための構文の記述

 

それでは早速やってみましょう。

 

 

準備をします

 

画像を用意する

 

まず、画像を用意します。
画像は大小用意する必要はありません。
大きめの画像を用意して、小さい画像は挿入する時に大きさを設定すれば大丈夫です。
大きさの設定方法は、後ほど説明します。

 

HTMLを所定の場所に記述する

 

下記の記述をHTMLテンプレートの</head>の前に挿入します。

 

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

 

 

 

html1

 

HTMLテンプレートは、①または②の操作で開けます。

 

 

lightbox1

 

エントリーページ ⇒ </head>の上に挿入し、保存します。

 

なお、WordPress等へは、<body>~</body>内に設置するようですが、シリウスでは<head>~</head>内でないと正しく動作しないようです。

 

 

3行の説明

  • 1行目:Lightbox用CSS (lightbox.css)

    LightboxのスタイルシートをCDNから読み込む記述です。

  • 2行目:jQueryスクリプト (jquery-1.12.4.min.js)

    LightboxはjQueryを利用するJavaScriptですから、Lightboxスクリプトを読み込むよりも前にjQueryを読み込んでおく必要があります。上記は、jQueryのCDNからjQuery Ver 1.12.4を読み込む記述です。自サイト内で既にjQueryを利用している場合は、ここでjQueryを読み込む必要はありません。

  • 3行目:Lightbox本体スクリプト (lightbox.min.js)

    Lightboxのスクリプト本体をCDNから読み込む記述です。

引用 : All About - 画像拡大スクリプトLightboxの簡単な設置方法と使い方

 

 

画像を拡大するための記述

 

画像を拡大するためのHTML構文は以下のようになります。
これを、記事内に記載します。

 

<a href="画像ファイル名" data-lightbox="lightbox[a]" data-title="画像タイトル"><img src="画像ファイル名" alt=""></a>

 

lightbox2

 

 

HTML構文の説明

 

data-lightbox="lightbox[a]"

画像をグループ化します。
左下の「image 2 of 6」と表示されているのは、「画像が6枚ある中の2枚目」ということを表しています。
lightbox[a]は、6枚の画像のグループ名は「a」ということになります。

 

data-title="画像タイトル"

ここで画像タイトルを入れることができます。
左下の「松本城」がそれにあたります。

 

グループ内の画像をみる

画像の右にある矢印をクリックすると、グループ内の次の画像に移動できます。
カーソルを画像の右側に乗せると右向きの矢印「>」、左側に乗せると左向きの矢印「<」が表示されます。

 

最初に見ていただいた画像1枚目の書き方はこのようになります。

<a href="<% pageDepth %>img/img_0318.jpg" data-lightbox="lightbox[a]"data-title="松本城"><img src="<% pageDepth %>img/img_0318.jpg" style="width:200px;" alt="matsumoto_castle1" /></a>

 

画像の挿入

 

<img src="<% pageDepth %>img/img_0318.jpg" style="width:200px;" alt="matsumoto_castle1" />

 

 

これは、シリウスの「画像」より挿入するとこのような構文になります。

 

lightbox3

 

表示画像のサイズ指定方法

 

lightbox4

 

  • 原寸 画像そのままのサイズ
  • 固定 縦横をそれぞれ指定できます
  • 比率固定(横) 横幅のサイズ指定をし、縦は縦横の比率で自動計算されます
  • 比率固定(縦) 縦のサイズ指定をし、横幅は縦横の比率で自動計算されます
  • 横幅固定(パーセント指定) 横幅をパーセントで指定します
  • 最大値の指定 最大のサイズを指定できますが、あまり使用することはないでしょう。

 

 

lightbox5

 

今回は、比率固定(横)でサイズを指定しします。

 

比率固定(横) ⇒ 画像サイズ 横幅を「200px」にします。
すると元画像を大きいけれと、記事内に表示される画像は小さく表示されます。

 

 

画像挿入時の注意点

 

 

<a href="<% pageDepth %>img/img_0318.jpg"

 

この「<% pageDepth %>img/img_0318.jpg」は、先ほど画像を挿入したファイル名をコピー&ペーストします。

 

 

「Lightboxを設置する方法」と検索すると、たくさんの検索結果が出てきます。
その内容は、ほとんど同じ内容になっていますが、画像のファイル名は「〇〇〇.jpg」と記載されています。

 

しかし、シリウスでは「<% pageDepth %>img-img_〇〇〇.jpg」となっていないと画像は表示されません。

 

あとは、構文を写真の枚数分コピー&ペーストして、画像ファイル名・画像タイトル・altをそれぞれの画像にあったものに変更するだけです。

 

 

まとめ

 

今回は、Lighboxで画像をクリックして大きく表示させる方法をご紹介しました。

 

実は、最初はLighboxをダウンロードする方法を試してみたのですが、キチンと表示されませんでした。
しかし諦めきれず調べた結果、今回の方法にたどりつきました。

 

Lighboxをダウンロードする方法よりも簡単にできると思います。

 

ぜひお試しくださいね。

 

 

これまでお読みいただき、ありがとうございました。

 

 

 


アフィリエイトランキング  <<<ポチッと押していただけると嬉しいです♪



ホーム RSS購読 サイトマップ