K.Iwahashiが語るラグジュアリー論

ライブドアブログでFlickr画像をLightboxというプラグインを使って画面内拡大表示する方法【設定編】

WRITER
 







この記事を書いている人 - WRITER -
'79年生まれ。1浪2留の追加モラトリアムを経て'05年に早稲田大学商学部卒業。 現在は金融セクターのIT部門にて(マジメに)勤務。 時計や車などのラグジュアリー、服飾、DTM、それらにまつわる書籍の記事が得意です。

スクリーンショット 2015-10-03 23.05.31


やりたいこと。
 

ブログの写真をクリックすると、ブラウザ内にニョキッと拡大されて表示されるプラグインをライブドアブログに導入しましたので、方法を公開します。特にFlickrからShare機能を使って転送しているブロガーには役立つと思います。ライブドアブログでも導入できるよ〜というのは他の複数のブロガーさんの記事見てわかったんですが、どれも説明を端折っていて(失礼!)わかりにくいので、スクリーンショットを大量に貼って解説していきたいと思います。
スクリーンショット 2015-10-03 23.13.42


使用するLightboxのバージョンは2.8.1です。
 

まずはLightBox をダウンロードします。これをやんなきゃ始まらない!英語だからと尻込みせずGetting Startedをよく読むこと。ふむふむ。自分のアタマで考えることも大切ですね。
 
スクリーンショット 2015-10-03 23.14.24
スクリーンショット 2015-10-03 23.14.48
ダウンロードしたファイルのdistというディレクトリにある3フォルダをライブドアブログにコピーすることになります。


ライブドアブログの管理画面の「画像/ファイル」からファイル管理タグを選択してフォルダを作成します。親フォルダを「lightbox」、子フォルダに先ほどの3フォルダの名前と同じものを作成します。
 スクリーンショット 2015-10-03 23.19.18スクリーンショット 2015-10-03 23.19.38スクリーンショット 2015-10-03 23.39.59

フォルダを作成したら、先ほどダウンロードしたファイルをひとつひとつアップロードします。例えばjsフォルダには6個のファイルがあるので、これらを全てアップロードします。FTPがあれば一括アップできるみたいですが、数も知れているのでうだうだ言わずにひとつずつアップロードしてください。
スクリーンショット 2015-10-03 23.43.52スクリーンショット 2015-10-03 23.53.42スクリーンショット 2015-10-03 23.54.08
次に管理画面からカスタムJSを選択し、「カスタマイズ」タグを選択。そして「トップページ」「個別記事」「カテゴリーアーカイブ」「月別アーカイブ」の全てのhtmlに次のように記述します。

<head>
<!–lightbox–>
<link href=”http://blog.livedoor.jp/koichi_iwahashi/Lightbox/css/lightbox.css” rel=”stylesheet” />
<!–lightbox end–>
<script src=”http://blog.livedoor.jp/koichi_iwahashi/Lightbox/js/lightbox-plus-jquery.min.js”></script></body> 

 追記部分は赤文字です。もともと記述されている<head>の後、</body>の前にスクリプトを書いてください。あと、太字部分のhttp://はライブドアから発行されたURLを記述してください。独自ドメインを利用している方は要注意です(僕はここで躓きました)。

とりあえずこれでライブドアブログ側の設定は終了です。お疲れさまでした。
次(明日)のエントリーに記事作成する際の手順について紹介します。 

この記事を書いている人 - WRITER -
'79年生まれ。1浪2留の追加モラトリアムを経て'05年に早稲田大学商学部卒業。 現在は金融セクターのIT部門にて(マジメに)勤務。 時計や車などのラグジュアリー、服飾、DTM、それらにまつわる書籍の記事が得意です。
スポンサーリンク












Sponsered by



Copyright© 鰯の飽くなき収集癖 , 2015 All Rights Reserved.