別窓を開かずに拡大画像を表示する方法

ホーム > ブログカスタマイズ > プラグイン > 別窓を開かずに拡大画像を表示する方法

別窓を開かずに拡大画像を表示する方法

2014.09.07

前の記事でサムネイルについて書いてたら、このサムネイルをもっとイイ感じで生かしたいと思い、
色々調べてみると「Colorbox」と言うプラグインを見つけたので早速導入してみた♪

これはサムネイルをクリックした際にページを移動したり、別窓で開くのではなく
その場で拡大画像をカッコよく開けるプラグインです。

こんな感じです♪（画像をクリックすると拡大画像が表示されます）→

※画像は前回の記事の使い回しですｗ
※この記事より以前の記事にもすでに適用済みなので、
　前の記事のサムネイルをクリックしてもこんな感じで開きます。
※背景や枠などのデザインは他にも用意されており、自分でも変更可能

FC2ブログで「Colorbox」導入の手順

１.ファイルをダウンロードする

まずはサイトから必要なファイルをダウンロードする。
「Colorbox」トップページは こちら

右の画像は「Colorbox」のトップページで “View Demos”1～5
の数字をクリックするとそれぞれのサンプルを見る事が出来ます。
その下の“Download”をクリックでファイルをダウンロード出来ます。

「Colorbox」トップページへ

このページのトップへ

２.ファイルの修正とアップロード

ダウンロードした“colorbox-master.zip”を解凍（展開）すると、
“colorbox-master”と言う名前のフォルダが出来て、
中には13個のファイルがある。

この中で使うのは本体であるjsファイルの「jquery.colorbox.js」
もしくは「jquery.colorbox-min.js」のどちらかと、
「example1」～「example5」フォルダのいずれかになります。

※この「example」フォルダは「Colorbox」トップページの
“View Demos”1～5のサンプルの数字なので使いたいサンプルと
同じ番号のフォルダを使います。

今回は私が選んだ「example5」を元に進めます。

まずは「example5」フォルダ内の「images」フォルダの中にある
４つの画像をFC2ブログにアップロードします。
border.png、controls.png、loading_background.png、loading.gif

その後に「example5」フォルダ内の「colorbox.css」を
メモ帳などで開きます。
※ワードパッドやホームページ作成ソフトがある方は
それを使って開いた方がわかり易いです。
メモ帳で開くとソースコードが読み難いです。

「colorbox-master」の中身　

「images」フォルダ内の画像　

FC2ブログへ画像アップロード

※ファイル内の一部の文字を「置換」するだけの作業なので、ソースが読めなくても何の問題もないです。
　でもソースを見ながら編集したい方はワードパッドもしくはホームページ作成ソフトで開いて下さい。

今回は、ソフト等が何も無くても誰でも出来るようにあえてメモ帳で開いた場合を元に進めます。
これからの手順はcssファイル「colorbox.css」の画像URLを相対パスから絶対パスへの書き換えです。
なので、先程アップロードした画像のURLを今一度確認しておいて下さい。

例えば私の場合、先程アップロードした画像の「border.png」のURLは下記のようになります。
「http://blog-imgs-68.fc2.com/i/n/t/interest2014/border.png」 ←（絶対パス）

そしてメモ帳で開いた「colorbox.css」の中で、この画像は「images/border.png」 ←（相対パス）
となってるので、この赤字の部分を「置換」を使って相対パスから絶対パスに書き換えます。

「colorbox.css」を開いているメモ帳の「編集(E)」から「置換(R)」をクリックし検索する文字列に
「images/」と入力して置換後の文字列に「http://blog-imgs-68.fc2.com/i/n/t/interest2014/」を
入力します。※これは私の場合のURLなので、http://～の後は各自のURLにして下さい。

※間違えないようにコピペでやった方がいいです。
※必ず赤字の部分のみ入力して下さい。
（上記の例で言うと“border.png”の部分は入力しない）
※この手順で「colorbox.css」内の全ての画像URLを書き換えてます
（「example5」内の「colorbox.css」の場合は全部で11箇所）

そして「すべて置換」をクリックすると一瞬で全ての画像の
相対パスが絶対パスに置き換えられます。
これで保存してファイルの修正は完了です。

画像URLを「置換」で変更　　

「colorbox.css」の修正が完了したら、本体であるjsファイルの「jquery.colorbox.js」もしくは「jquery.colorbox-min.js」のどちらかと一緒にアップロードします。

２つのjsファイルの違いは、ソースが読みやすい「jquery.colorbox.js」とソースが読みにくい代わりにサイズが小さい「jquery.colorbox-min.js」って感じです。

※今回は「jquery.colorbox-min.js」を使います。

しかし、その「jquery.colorbox-min.js」をFC2ブログにアップロードしようとすると
“ファイル名にスラッシュやピリオドを含めることは出来ません。”と出てしまうので
ファイル名の「.（ピリオド）」の部分を「-（ハイフン）」に変更します。

変更後のファイル名→「jquery-colorbox-min.js」

これで先程修正した「colorbox.css」と一緒にアップロードして
必要なファイルのアップロードは完了です。

■ここまででアップロードしたファイル（合計６つ）
「jquery-colorbox-min.js」　本体のjsファイル
「colorbox.css」　デザイン等を構成してるcssファイル

js、cssファイルのアップロード

「border.png」「controls.png」「loading_background.png」「loading.gif」画像ファイル４つ
※画像ファイルの数は選んだ「example」フォルダによって異なります。

このページのトップへ

３.HTMLソースを追記する

ファイルの修正とアップロードが完了したら、
今度はHTMLソースを追記します。
FC2ブログの「テンプレートの設定」から現在適用中のテンプレートの
HTML編集へ行き、その中の<head> ～ </head>の間に
下記のソースを追記します。

<head>の開始位置はすぐ見えるようなとこにあると思います。
※右の画像は参考までに私のFC2ブログの場合の表示です。

テンプレートのHTML編集　　

追記する場所がよく分からない場合は、「<head>タグの開始位置」のすぐ下で大丈夫です。

※念の為、編集前にテンプレートを複製するか、メモ帳等にHTMLとCSSのソースをそれぞれ全て
　コピペして保存する等、バックアップを行ってから作業する事をお勧めします。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/
jquery/2.0.3/jquery.min.js"></script>
<script type="text/javascript" src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/
jquery-colorbox-min.js"></script>
<link rel="stylesheet" type="text/css" href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/
colorbox.css" />

※緑の部分は jQueryを使う為にGoogleがCDN(Content Delivery Network)に用意している
　jQueryファイルを読み込んで使用する為の記述です。（これが無いと正常に動作しません＾＾；）
※赤の部分は先程アップロードしたjsファイルの「jquery-colorbox-min.js」と
　cssファイルの「colorbox.css」なので、それぞれご自分のアドレスに書き換えて下さい。
　（上記は私の場合のアドレスになってます）

上記のソースを追記するとこんな感じになります（右の画像参照） →

※追記した部分が分かり易いようにソースの上下に
1行ずつ間隔を空けてますが実際は不要です。

※例として<head>タグのすぐ下に追記した場合の表示ですが
<head> ～ </head>の間であれば大丈夫です。

テンプレートにソースを追記.1

そしてさらに、その下に動作を定義する為の記述を追記します。

追記するソースの例

<script type="text/javascript">
$(function(){
$("a.open").colorbox();　/*　<a>タグにclass="open"と指定した場合ColorBoxを適用　*/
});
</script>

※上記はあくまでも１つの例で、ここでどんな記述をするかで色んな事が出来ます。
※分かり易いようにコメントアウトを付けてますが不要なら消して下さい。（ /*　～この部分～　*/ ）
※赤字のクラス名は任意で変更可能です。（今回は分かり易いように“open”としてるだけです）

最初に追記したソース(赤い枠)と合わせて、
今回のソース(青い枠)も追記するとこんな感じになります。→

ここまで記載したらテンプレートの更新をクリックして保存して下さい

この青い枠の部分は定義する動作を追加すると増えて行く事になります
スライドショーで画像を表示したいとか、エフェクトを付けたいとか
表示領域を固定したい等など...

それについては別の記事でサンプルを載せてます（ページ末尾を参照）

テンプレートにソースを追記.2

ここまで出来たら、後はその場でカッコよく拡大画像を表示するようにサムネイルの<a>タグに上記で指定したclassを指定するだけです。

サムネイル部分の記述例

<a href="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017.jpg" class="open" 
title="サムネイル1"><img src="http://blog-imgs-68.fc2.com/i/n/t/interest2014/blog0017s.jpg" 
alt="サムネイル画像のタイトル" border="0" />

※緑の部分はリンク先の原画像のURL
※赤の部分は上記で追記したソースのクラス名
※オレンジの部分は開いた画像の下にタイトルとして表示されます
（サムネイルにマウスを乗せた時に表示されるタイトルにもなります）
※ピンクの部分はサムネイル画像のURL

上記のソースで表示したサムネイル（画像はまた使い回しｗ） →

このページのトップへ

４.表示を確認・その他オプション

上記の手順でご自分のブログでもちゃんと表示されるかチェックして問題無ければ導入は完了です。
もし、ちゃんと表示されない場合は下記のチェック項目をご確認下さい。

その他オプションや表示のサンプルは下記のページをご覧下さい。
「 Colorboxの応用編 」

■うまく表示出来ない場合に確認する項目
1．ファイルアップロードで各種ファイルがちゃんとアップロードされてるか確認する。
2．「colorbox.css」の内容を修正(置換)した際に正しいURLで置換えが出来てるか確認する。
3．HTMLに追記したソースに間違いは無いか確認する。
4．サムネイルに指定したクラス名と、HTMLに追記したソース内のクラス名が同じか確認する。
5．原画像のURLが間違ってないか確認する。
　（この「サムネイルで記事を書く」からコピペして来た場合など、リンク先が異なってます）

ブログランキングに参加中♪
良かったらポチっとお願いします

この記事にトラックバックする(FC2ブログユーザー) トラックバックって何！？って場合はこちら: http://interest2014.blog.fc2.com/tb.php/5-ec1cc7af