【FC2ブログ】画像をクリックするとポップアップで表示されるColorboxの導入方法

   2020/02/15

この記事のURLをコピーする

FC2ブログでの「Colorbox」導入方法と使い方を解説します。

「Colorbox」とは画像をクリックすると、アニメーションで画像が拡大されるプラグインです。

FC2ブログでは、デフォルトの状態で画像をクリックするとブラウザの別ページで画像が表示されます。

画像での説明など、画像を拡大できるようにした方が見やすい記事もありますので、導入までの手順を書いておきます。




Colorboxのダウンロード

公式サイトからダウンロードできます。下画像の赤枠部分をクリックして好きな場所に保存します。

ダウンロードしたファイルを解凍&展開

ダウンロードしたZipファイルを解凍すると下の様なフォルダとファイルがあります。今回使うのは赤枠部分の2つです。

example1フォルダからexample5フォルダまでは、画像をクリックした時のアニメーションパターンが5つ用意されています。今回はexample1を選びます。

colorbox.cssとjquery_colorbox-min.jsの編集

まずはexample1フォルダimegeフォルダを開き、5個の画像をFC2ブログ管理画面からファイルアップロードします。

次に、example1フォルダの赤枠のcolorbox.cssをメモ帳などで開きます。

編集→置換と進み、検索する文字列の箇所にimages/置換後の文字列の箇所に自身のアップロード画像のパスを書く。

アップロード画像のパスはファイル管理画面から確認できます。

下の画像ではborder.pngを選んでいますが、

https://blog-imgs-xx.fc2.com/x/x/x/xxxxxxxx/

までをコピペすればOKです。

全て置換したら上書き保存します。これでcolorbox.cssの編集は終了です。

続いてトップフォルダにあるjquery.colorbox-min.jsの編集ですが、これはファイル名をリネームするだけでOK。

ファイルを選択してキーボードのF2を押し、jqueryの後のドットをアンダーハイフンにします。

jquery.colorbox-min.js

jquery_colorbox-min.js

記号を変える理由は、FC2ブログではファイル名にピリオドやスラッシュが含まれているとアップロード出来ないからです。

そして編集したcolorbox.cssjquery_colorbox-min.jsをファイルアップロードします。

ここまでの作業で、画像ファイルを合わせて合計7個のファイルをアップロードしているか確認します。



追記するソースの編集

まずメモ帳などを開き、次のソースをコピペします。3行目の画像URL部分は自身のファイルパスに変えます(colorbox.cssを編集した時に使ったパス)。

 
続いて以下の構文をコピペします。4行目のclbの部分は自分の分かりやすい任意の文字列に変えても良いです。

 
最後に以下を追記します。画像URL部分は自身のファイルパスに変えます。これで追記するソースの編集は終了です。そして編集したソースを全て選択しコピーします。

テンプレートにソースを追記する際の位置

※テンプレートを編集する際はまずバックアップを取って置くことをおすすめします。途中でどこに追記したか分からなくなったり、必要なソースを誤って削除してしまった時の為です。

例えば他のプラグインなどを先に導入していると、追記する位置に気をつけます。その理由は、導入しているプラグインによっては追記する位置によっては上手く動作しない場合があるからです。

テンプレートの編集は管理画面左のテンプレートの設定から出来ます。

追記する位置は、

 
の直前です。


colorboxの使い方

簡単です。記事本文などに画像を挿入したら、

 
に書き換えるだけです。

clbはクラス名なので自分で変えるならソースも編集する必要があります。sampleの箇所はその画像に任意のタイトルを付けたい時に書きます。何もタイトルを付けないならsampleを消せばいいだけです。

 

書き換えが面倒ならIMEの辞書ツールに登録しておけば手間も省けます。

以上がColorboxの導入方法と使い方になります。

この記事のURLをコピーする
  • このエントリーをはてなブックマークに追加
  • Pocket

関連記事