ブログの画像をその場で拡大する(FC2)

サムネイル画像(縮小された画像)をクリックすると、ポップアップウインドウや別のページで表示することなく、その場で拡大画像を表示させる方法があります。

その場で拡大画像を表示する機能は、「Lightbox_plus」というツールで簡単に作れます。
   
上の画像をクリックすると、拡大画像がその場で表示できます。 
※もちろん、スマホでも問題なく表示できます。 

まず、「Lightbox Plus」の公式サイトからダウンロード してください。


「Lightbox Plus」の必要なのもの

ダウンロードした「lightbox_sample.zip」ファイルには、下記のファイルが必要です。

lightbox000.png 


スクリプトファイルの編集

編集するのは 「lightbox_plus.js」ファイルの中に、「 .../〇〇〇.gif」という記載があるところです。つまり、gif画像ファイルのアドレスを書き換るために、自分HPの画像ファイルのアドレスを調べます。

lightbox001.png 
自分の画像ファイルのアドレスは、下記のように、「http://」からの部分となります。

lightbox005.png 


「lightbox_plus.js」ファイルの中に、「 .../〇〇〇.gif」を、上記の自分の画像ファイルのアドレスに書き換えます。全部で8箇所がありますので、下記のように、それを全部書き換えして保存してください。

lightbox002.png 


スクリプトファイルなどをアップロードする

FC2に、「Lightbox Plus」の必要なのファイルを全部アップロードします。

lightbox006.png 



テンプレートの修正

下記のように、FC2ブログのテンプレートの</head> の1つ上に追記して更新します

<!-- [Lightbox_plus] -->
<link rel="stylesheet" type="text/css" href="http://自分の画像ファイルのアドレス/lightbox.css" media="screen,tv" />
<script type="text/javascript" charset="UTF-8" src="http://自分の画像ファイルのアドレス/lightbox_plus.js"></script>
<!-- /[Lightbox_plus] -->

lightbox0031.png


環境設定の変更

環境設定 - >ブログの設定 -> 画像のリンクを、「元画像にリンクさせて」にしておきます。

lightbox004.png

これで準備完了です。



拡大画像が表示される記事を書く

いつもどおり記事を書きます。

その後、リンクに属性「target="_blank"」を「rel="lightbox"」に変更します。

<a href="画像(拡大)" rel="lightbox">
   <img src="画像" ...>
</a>


複数の拡大画像を連続で表示する

Lightbox Plusには、拡大画像の左右に矢印ボタンを表示して、複数の拡大画像をスライドショーのように次々と表示させる機能もあります。連続閲覧機能を有効にしたい場合は、画像リンクを以下のように記述します。

<a href="./forest1.jpg" rel="lightbox[forest]">
   <img src="./ps1.jpg" width="120" height="96" alt="森">
</a>
<a href="./forest2.jpg" rel="lightbox[forest]">
   <img src="./ps2.jpg" width="120" height="96" alt="林">
</a>
<a href="./forest3.jpg" rel="lightbox[forest]">
   <img src="./ps3.jpg" width="120" height="96" alt="藪">
</a>

上記のように、rel属性の値を、「lightbox[forest]」のようにします。「forest」の部分は任意の名称で、「lightbox」に続いて適当な文字列(名称)を記述すると、同じ名称を付けた拡大画像を連続閲覧できるようになります。※カッコを省略して記述しても構いません。


連続して閲覧できる拡大画像をグループに分ける

 <a href="./forest1.jpg" rel="lightbox[forest]">
 <img src="./pf1.jpg" width="120" height="96" alt="森">
</a>
<a href="./forest2.jpg" rel="lightbox[forest]">
 <img src="./pf2.jpg" width="120" height="96" alt="林">
</a>
<a href="./forest3.jpg" rel="lightbox[forest]">
 <img src="./pf3.jpg" width="120" height="96" alt="藪">
</a>
<a href="./sea1.jpg" rel="lightbox[sea]">
 <img src="./ps1.jpg" width="120" height="96" alt="海">
</a>
<a href="./sea2.jpg" rel="lightbox[sea]">
 <img src="./ps2.jpg" width="120" height="96" alt="波">
</a>
<a href="./sea3.jpg" rel="lightbox[sea]">
 <img src="./ps3.jpg" width="120" height="96" alt="渦">
</a>


関連記事
スポンサーサイト

コメントの投稿

非公開コメント

検索フォーム
最新記事
カテゴリ
スポンサーリンク
RSSリンクの表示
プロフィール

実録FX

Author:実録FX
多通貨・複数時間足を分散することで、相場の流れに対し有利な自動売買EAの構築を目指しております。

基本的なトレード手法はスイングのトレンドフォローです。相場強弱、エントリータイミング、ロスカット、エグジットのトレード精度向上を目指します。取引事績や基礎知識などを随時更新していきますので宜しくお願いいたします。

「相互リンク」、大歓迎です。同ジャンルであれば基本的に、リンクを断ることはありませんので、貴ブログに当ブログのリンクを設置後でも、ご連絡いただければ当ブログで貴ブログのリンクを追加させていただきます。

投資につきましては、各自のご判断で行って頂きますようお願い致します。当ブログで提供している情報は、投資を勧誘する目的で提供しているものではありません。一切責任を負いませんのでご了承ください。

当ブログの詳細は以下の通りです。
・ブログ名:必勝の方程式 「トレードの真実」
・URL:http://thrustbands.blog.fc2.com/
お時間のある方はぜひご覧ください。

カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
月別アーカイブ
経済指標
最新コメント

Top