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

   2019/05/26

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

FC2ブログでの導入方法です。

これ導入してすぐに備忘録で書こうと思いながら、記事作成の手間を考えると面倒で放置してた。色々他ブログを参考にさせて貰ったんだけど、どこを参考にしてもなかなか上手く行かなかったのである(汗)ってことでもう1度自分で振り返りながら方法を書いておこうと思う。

まずColorboxとは画像をクリックすると、アニメーションで画像が拡大なり縮小されるプラグイン。

FC2ブログでは、何もいじらない状態で画像をクリックすると別窓で画像が表示されるはずだ。それがなんか物足りなくて導入したのだが、導入時にかなりてこずったので忘れた時の為に記事として残しておく。以下、導入までの手順。




Colorboxのダウンロード

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

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

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

example1からexample5までは、画像をクリックした際のパターンがそれぞれ違うので好きなものを選べば良いが、今回は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/までをコピペすればいい。

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

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

ファイルを選択してF2を押し、jquery_colorbox-min.jsにファイル名を変える。変わった箇所はjqueryの後のドットをアンダーハイフンにしただけだ。

普通のハイフンでも構わない。変える理由はFC2ブログではファイル名にピリオドやスラッシュが含まれているとアップロード出来ないから。

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

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



追記するソースの編集

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

 

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

 

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

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

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

ここからが1番てこずったのだが、解決して見ればなんてことはなく、HTMLやjavascriptのド素人ゆえに起きた問題だった。

例えば他のプラグインなどを先に導入していると、追記する位置に気をつける。テンプレートの編集は管理画面左のテンプレートの設定から出来る。

おそらくcolorboxの導入手順を書いてあるブログにはソースを、<head>と</head>の間に追記すると書いてあるはずだ。

間と言っても追記箇所は色々あるので初心者はよく分からない。

私の場合、他にjqueryのプラグインを先に導入していたのもややこしくなった原因だった。よく分からないまま<head>のすぐ下に追記ソースをコピペしていた。

それで動作しないので、何回も導入手順に誤りがないか確認し、1からやり直しなどもしたが動作しない。追記位置を変えたら今度は動作はするけど他のプラグインが動作しない。

もうお手上げ状態で最後に</head>の真上に追記したら他のプラグインもcolorboxも動作して解決した。

今動作している限り、</head>の真上に追記で問題ない。ただ他のプラグインを入れている人は、そのプラグインソースの位置によって試行錯誤が必要かも知れない。おそらく他のプラグインを導入していなければ、ここまで時間がかかる羽目にはならなかっただろう。


colorboxの使い方

これは簡単。記事本文などに画像を挿入したら、class=”clb” title=”sample”に書き換えるだけ。

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

 

 

書き換えが面倒ならIMEの辞書ツールに登録しておけば手間も省ける。使い方は以上だ。

あとがき

この記事を書いただけでクラクラしてきた。長い。記事途中で止めようかと思ったがなんとか備忘録として書けた。

なお「位置通り追記したけど動作しないぞ!」と言われても私には分かりません。私も動作しているのが奇跡的な感じと思ってますので(汗)

あと、画像をクリックした際の拡大幅や縮小幅などはソースの編集で数値をいじれば変えれる。とりあえずは今の数値で問題ないし、もうこれ以上いじってややこしくなるのも嫌なのでいじらない(笑)いじりたい方はググって下さい。以上。

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

関連記事