古都で働く、プリングルズ大好き似非システム管理者が、お仕事関係の備忘録を書いたり、日々のあれこれを書いたり。
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
忍者ブログでcolorboxを使う
このブログは無料で利用できる「忍者ブログ」を借りている。デザインテンプレートが沢山公開されており、ある程度カスタマイズも可能なので少しずつ手を入れているのだが、どうしても気になるのが拡大画像をリンクで開く方法だった。そこで、jQueryのプラグインであるcolorboxを導入する。
colorboxは、jQueryで利用可能なLightboxのクローンで、画像をクリックするとページ内にリンクされた画像が開かれる。定番のプラグインなので、どこかで一度は目にした事があるはずだ。しかもLightboxよりも高機能になっており、画像だけでなくwebページやpdfファイル、さらにはyoutubeの動画も表示させる事が可能だ。それに、他のLightboxクローンに比べてスマートフォン上での表示も安定している。
忍者ブログのテンプレート部を見てみると、jQuery1.6.1を読み込んでいるのが分かる。colorboxはjquery1.3.2以上に対応しているので、忍者ブログでも動作してくれるだろう。
※このブログで使用しているテンプレートではJQuery1.6.1をリンクしているが、他のテンプレートだとバージョンが違うかもしれない(10/31追記)。
まずは、colorbox本体をダウンロードする。colorboxの本家サイトを開くと、すぐに「Download」のリンクが目につくはずだ。ファイルをダウンロードし、次にダウンロードしたファイルを解凍しよう。解凍されたフォルダ（手元の環境では、colorbox-masterという名前のフォルダが出来た）の中を見ると、
まずは、example1から5のフォルダ内を見てみる。フォルダの中には index.html、colorbox.css、そしてimagesフォルダがあるはずだ。それぞれのindex.htmlを開くと、colorboxの動作サンプルを見る事ができる。5つのパターンの中から、好きなものを選ぶとよいだろう。今回はexample1を元に設定を進めていく。
colorboxを動作させるために必要なファイルは、example1フォルダ内のcolorbox.css、そしてimagesフォルダ内にある画像。それから、解凍したフォルダ直下にあるjquery.colorbox.jsか、jquery.colorbox-min.js。そしてこれは必須ではないけれども、i18nフォルダ内にあるjquery.colorbox-ja.jsも用意しておくとよい。
jquery.colorbox.jsとjquery.colorbox-min.jsとでは、動作に差はない。しかし、jquery.colorbox-min.jsの方がファイルサイズが小さくなっているので、読み込みが速くなる利点がある。まずjquery.colorbox-min.jsを設置してみて、ダメだったらjquery.colorbox.jsに変更すればよいだろう。
jquery.colorbox-ja.jsは、colorboxの中で使われているナビゲーションなどの文字を日本語にしてくれる。next、prevといった文字を次、前といった風にしてくれるのだ。無くても動作はするが、あった方がよいだろう。
これらのファイルをアップロードする前に、colorbox.cssの中を編集しておく。ダウンロードした状態のcolorbox.cssでは、画像がimagesフォルダに入っている事を前提にした記述になっているが、忍者ブログではcolorbox.cssも画像も同じディレクトリに並ぶことになるからだ。
colorbox.css内には、画像に関する記述が幾つかある。全て、画像へのリンクを相対アドレスで記述しているので、images/ という文字列を検索し削除していけばよい。連続置換が可能なエディタを使えばすぐに編集できるはずだ。後でアップしてみて上手く動作しなかった場合は、相対アドレスでの記述を絶対アドレスでの記述に変更してみるとよいかもしれない（うちの場合は、相対アドレスで上手く動作している）。
例えば、
こうしてcolorbox.cssを修正したら、次に必要なファイルを全てファイルアップローダーでアップする。画像をアップするのと同じように、ブラウザへのドラッグ＆ドロップでアップして構わない。アップされたファイルは、file.domain.name/ （domain.nameはお使いのブログのドメイン名）に配置される。このブログの場合、colorbox.cssは http://file.sourcream.iku4.co/colorbox.css が配置された場所という事になる。colorbox、jquery.colorbox.js、jquery.colorbox-ja.js の３つのファイルの場所を念のため調べておこう。
ファイルがアップできたら、colorboxが使えるように忍者ブログのテンプレートを編集する。忍者ブログのテンプレートエディタを使えば簡単だ。PC用テンプレートの修正をクリックし、テンプレートエディタが開いたら、HTML編集フォーム内のhtmlコードに記述を追記していく。アップロードしたファイルのうち、上記の３ファイルについて記述を追記し、更にcolorboxを動作させるjavascriptのコードを書く。このブログの場合、下記のような記述を<head></head>内に追記した。file.domain.nameの部分は、お使いのブログに合わせて記述を変更してもらいたい。
テンプレートが保存できれば、colorboxは動作するはずだ。新しい記事でもいいし、以前の記事でもいいので、画像にリンクを貼った状態にしよう。忍者ブログなら、記事の編集画面で画像の挿入を行い、サムネイルで挿入すれば、拡大画像へのリンクが貼られた状態でタグが挿入される。画像が挿入されたら、ソースコードのタブへ移り、ソースコードを直接編集しよう。
この画像の場合、実際のソースコードでは
上の画像は、colorboxで開くはずだ。実はこの記事の一番最初の画像も、colorboxで開くようにclassの記述を追記している。
画像を挿入する度に毎回ソースを編集してclassを追記しないといけないのは少し面倒だが、colorboxで画像が開くか開かないかは大きな違いだと思う。colorboxの設置ができたので、以前の記事中の画像リンクを、少しずつcolorboxで開くよう変更していこう。
忍者ブログのテンプレート部を見てみると、jQuery1.6.1を読み込んでいるのが分かる。colorboxはjquery1.3.2以上に対応しているので、忍者ブログでも動作してくれるだろう。
※このブログで使用しているテンプレートではJQuery1.6.1をリンクしているが、他のテンプレートだとバージョンが違うかもしれない(10/31追記)。
まずは、colorbox本体をダウンロードする。colorboxの本家サイトを開くと、すぐに「Download」のリンクが目につくはずだ。ファイルをダウンロードし、次にダウンロードしたファイルを解凍しよう。解凍されたフォルダ（手元の環境では、colorbox-masterという名前のフォルダが出来た）の中を見ると、
というフォルダと、contentexample1example2example3example4example5i18n
bower.jsonというファイルがあるはずだ（今後バージョンが上がれば、ファイルやフォルダの構成は変わるかもしれない）。
colorbox.ai
colorbox.jquery.json
jquery.colorbox.js
jquery.colorbox-min.js
README.md
まずは、example1から5のフォルダ内を見てみる。フォルダの中には index.html、colorbox.css、そしてimagesフォルダがあるはずだ。それぞれのindex.htmlを開くと、colorboxの動作サンプルを見る事ができる。5つのパターンの中から、好きなものを選ぶとよいだろう。今回はexample1を元に設定を進めていく。
colorboxを動作させるために必要なファイルは、example1フォルダ内のcolorbox.css、そしてimagesフォルダ内にある画像。それから、解凍したフォルダ直下にあるjquery.colorbox.jsか、jquery.colorbox-min.js。そしてこれは必須ではないけれども、i18nフォルダ内にあるjquery.colorbox-ja.jsも用意しておくとよい。
jquery.colorbox.jsとjquery.colorbox-min.jsとでは、動作に差はない。しかし、jquery.colorbox-min.jsの方がファイルサイズが小さくなっているので、読み込みが速くなる利点がある。まずjquery.colorbox-min.jsを設置してみて、ダメだったらjquery.colorbox.jsに変更すればよいだろう。
jquery.colorbox-ja.jsは、colorboxの中で使われているナビゲーションなどの文字を日本語にしてくれる。next、prevといった文字を次、前といった風にしてくれるのだ。無くても動作はするが、あった方がよいだろう。
これらのファイルをアップロードする前に、colorbox.cssの中を編集しておく。ダウンロードした状態のcolorbox.cssでは、画像がimagesフォルダに入っている事を前提にした記述になっているが、忍者ブログではcolorbox.cssも画像も同じディレクトリに並ぶことになるからだ。
colorbox.css内には、画像に関する記述が幾つかある。全て、画像へのリンクを相対アドレスで記述しているので、images/ という文字列を検索し削除していけばよい。連続置換が可能なエディタを使えばすぐに編集できるはずだ。後でアップしてみて上手く動作しなかった場合は、相対アドレスでの記述を絶対アドレスでの記述に変更してみるとよいかもしれない（うちの場合は、相対アドレスで上手く動作している）。
例えば、
#cboxOverlay{background:url(images/overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}という記述であれば、
#cboxOverlay{background:url(overlay.png) repeat 0 0; opacity: 0.9; filter: alpha(opacity = 90);}といった具合に変更する。
こうしてcolorbox.cssを修正したら、次に必要なファイルを全てファイルアップローダーでアップする。画像をアップするのと同じように、ブラウザへのドラッグ＆ドロップでアップして構わない。アップされたファイルは、file.domain.name/ （domain.nameはお使いのブログのドメイン名）に配置される。このブログの場合、colorbox.cssは http://file.sourcream.iku4.co/colorbox.css が配置された場所という事になる。colorbox、jquery.colorbox.js、jquery.colorbox-ja.js の３つのファイルの場所を念のため調べておこう。
ファイルがアップできたら、colorboxが使えるように忍者ブログのテンプレートを編集する。忍者ブログのテンプレートエディタを使えば簡単だ。PC用テンプレートの修正をクリックし、テンプレートエディタが開いたら、HTML編集フォーム内のhtmlコードに記述を追記していく。アップロードしたファイルのうち、上記の３ファイルについて記述を追記し、更にcolorboxを動作させるjavascriptのコードを書く。このブログの場合、下記のような記述を<head></head>内に追記した。file.domain.nameの部分は、お使いのブログに合わせて記述を変更してもらいたい。
<!-- colorbox用に追加で読み込む -->colorboxを動作させるためのjavascriptのコードを直接書いているが、これは実際にリンクを貼る際に使うclass属性についての設定になっている。単に画像をcolorboxで開くだけであれば、 $(".group1").colorbox({rel:'group1'}); の記述だけでもよいだろう。
<link rel="stylesheet" href="http://file.domain.name/colorbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://file.domain.name/jquery.colorbox.js"></script>
<script type="text/javascript" src="http://file.domain.name/jquery.colorbox-ja.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Examples of how to assign the Colorbox event to elements
$(".group1").colorbox({rel:'group1'});
$(".group2").colorbox({rel:'group2', transition:"fade"});
$(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
$(".group4").colorbox({rel:'group4', slideshow:true});
$(".ajax").colorbox();
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:390});
$(".vimeo").colorbox({iframe:true, innerWidth:500, innerHeight:409});
$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
$(".inline").colorbox({inline:true, width:"50%"});
$(".callbacks").colorbox({
onOpen:function(){ alert('onOpen: colorbox is about to open'); },
onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
onClosed:function(){ alert('onClosed: colorbox has completely closed'); }
});
$('.non-retina').colorbox({rel:'group5', transition:'none'})
$('.retina').colorbox({rel:'group5', transition:'none', retinaImage:true, retinaUrl:true});
//Example of preserving a JavaScript event for inline calls.
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
<!-- colorbox用の追加はここまで -->
テンプレートが保存できれば、colorboxは動作するはずだ。新しい記事でもいいし、以前の記事でもいいので、画像にリンクを貼った状態にしよう。忍者ブログなら、記事の編集画面で画像の挿入を行い、サムネイルで挿入すれば、拡大画像へのリンクが貼られた状態でタグが挿入される。画像が挿入されたら、ソースコードのタブへ移り、ソースコードを直接編集しよう。
この画像の場合、実際のソースコードでは
<a target="_blank" href="http://blog.cnobi.jp/v1/blog/user/ceb67911627e43da346c8ec0f9ad8e90/1409092207" title=""><img src="http://blog.cnobi.jp/v1/blog/user/ceb67911627e43da346c8ec0f9ad8e90/1409092207?w=400&h=375" alt="" height="197" width="210" /></a>のようになっている。そこで、このコードの<a>タグに、class="group1"を追記する。つまり、
<a target="_blank" href="http://blog.cnobi.jp/v1/blog/user/ceb67911627e43da346c8ec0f9ad8e90/1409092207" title="" class="group1"><img src="http://blog.cnobi.jp/v1/blog/user/ceb67911627e43da346c8ec0f9ad8e90/1409092207?w=400&h=375" alt="" height="197" width="210" /></a>としてやる。これで記事を保存し、colorboxが動作していれば、記事内に画像が開くはずだ。
上の画像は、colorboxで開くはずだ。実はこの記事の一番最初の画像も、colorboxで開くようにclassの記述を追記している。
画像を挿入する度に毎回ソースを編集してclassを追記しないといけないのは少し面倒だが、colorboxで画像が開くか開かないかは大きな違いだと思う。colorboxの設置ができたので、以前の記事中の画像リンクを、少しずつcolorboxで開くよう変更していこう。
PR