画像を添付する機会はめっきり減ってしまいましたが、今更このブログにcolorboxを追加してみた次第です。
画像サムネイルをクリックすると、今までは新しいウィンドウかタブが開いて表示されていたのが、同じウィンドウ内にフワっと浮き出るように表示される感じになりました。
…自己満足だけど。
参考サイト
「ライブドアブログのカスタマイズ-画像をLightbox風に表示するJqueryプラグインColorboxの設置」
「ライブドアブログにJQUERY＋COLORBOXを導入して画像のオーバーレイ表示を実現する」
覚書のために、それなりにざっくりと書いていきたいと思う。
※
HTMLタグなど多少知識が無いととても難しいと思います。
コピペが出来る
ファイルのダウンロード、展開
ブログのデザイン変更の経験ありでないとつらいと思います。
の４点に注意でしょうか。
手順はまず、colorboxのプラグインを自PCに保存する必要があります。
１．
「Colorbox – a jQuery lightbox」
から、Downloadし展開（圧縮ファイルの解凍）をする。
適用する前に、「View Demos」の丸番号から好みの挙動を探しておいた方がいいです。
私の好みは「example2」で、周囲がホワイトアウトしてクローズボタンが右上に付くデザインです。
今回は「example2」を設置する前提で書いています。
２．
ライブドアブログにログインしマイページにアクセス。
左メニュー「画像/ファイル」→「ファイルの管理」
「フォルダを作る」をクリックします。
３．フォルダ名は半角英数字で「colorbox」と入力し「決定」ボタンをクリック
４．
作成された「colorbox」フォルダのリンクをクリックし、もう一度「フォルダを作る」
「images」と入力して「決定ボタン」をクリック
こんな感じになったら、いよいよプラグインファイルのアップロードです。
５．
「アップロード」ボタンをクリックする
６．手順１で展開したフォルダにある「jquery.colorbox-min.js」をWクリックしてアップロード。
７．
「example2」フォルダの中にある「colorbox.css」をWクリックしてアップロード
８．「images」フォルダー名でクリック
９．画像ファイルを１つずつ計２つをアップロードする。
10.
「１つ上の階層に戻る」をクリックし「colorbox」フォルダ内を表示する。
「jquery.colorbox-min.js」のリンク文字内で右クリックし「リンクのアドレスをコピー」をクリックする。（画面説明はchrome）
メモ帳を起動して、貼り付ける。
可能なら他のファイルリンクもメモ帳に貼り付けておくと便利です。
ファイルの準備は整いました。
次からデザイン変更の準備を行います。
11.
左メニュー「ブログ設定」→「ブログパーツ」
「javascript」（一番下の方にあります）
をエリアＢにドラッグ移動する。
12.
ブログパーツ「javascriptの設定」の中を埋めていきます。
①手順10でコピーした「jquery.colorbox-min.js」のアドレスをコピー。
②
$(‘.pict’).click(function(){
$(this).colorbox({href: $(this).attr(‘src’).replace(“-s.”,”.”)});
});
④「保存する」ボタンをクリックする。
次からデザインのカスタマイズです。
HTMLタグなど多少知識が無いととても難しいと思います。
13.
左メニュー「ブログ設定」→「デザイン設定」→「カスタマイズ」タブにアクセスします。
設定の変化が分かりやすいように、
「個別記事ページ」から変更します。
それぞれを<head>～</head>の間に追加入力（コピペ）します。
①
手順７でアップロードした「colorbox.css」ファイルのリンクアドレスを使ったCSSの記述。
<link href=”http://あなたのブログアドレス/colorbox/colorbox.css” rel=”stylesheet” type=”text/css”>
※「あなたのブログアドレス」部分は適宜正しいアドレスに入力しなおしてください。
②
Googleのjqueryスクリプトタグの追加
<!–Jquery本体 –>
<script type=”text/javascript” src=”https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js”></script>
<!– /Jquery本体 –>
をコピペ。
「保存する」ボタンをクリック。
ここまでで、うまく手順がきちんと追えていると、個別記事の画像サムネイルをクリックしたときの挙動がフワっとなるはず。
うまくいかない時は、参考サイトを確認してください。
上手くいっていたら、同じ手順を「トップページ」「カテゴリアーカイブ」「月別アーカイブ」にも記述して保存して出来上がりです。
