SSブログ
silver week ｜ブログのカスタマイズ
Sunday September 20 2015　category：blog

Lightbox2を導入してみたよ

ものすごーーーーーーーーーーく久しぶりにブログを改造しようと思ったら

なんかいろいろ忘れていて困ったよ(笑)



とりあえず、so-net blogでLightbox2の導入方法です。

まず…一番大事なのが、ソネブロは
CSS　とか　JS　とかアップロードできない
ってことです。

(；´Д｀)＜ここで終了…

っていうのは業腹なので、同じso-netのホームページサービスを利用することにしました。
U-page+
ここにCSSとかJSとかついでに画像とかあげておきます。

※U-page+は接続会員(もしくは家族会員)じゃないと、使えないサービスだと思うので…
それ以外の会員の場合は、Solomonレビュー(Sub)さんの
So-netブログでのLightBoxのような表示(2)
を試してみるのも手かと思います。

Lightbox2で表示するための準備


[1]Lightbox　(公式ページ)
　こちらからダウンロードしてきます。

[2]ダウンロードしてきたzipを解凍します。
　するとこんな構成になっていると思います↓
　60.png

　必要なのはsrcフォルダ内の以下のファイル
  • lightbox.css
  • imagesフォルダ(なかみも)
  • lightbox.js

　61.png

[3]jQueryを用意する
　jQuery 2.x　のいちばん新しいもの
　62.png
　コピーして、メモ帳を開いて貼り付け
　　jquery-2.x.x.min.js　(xはバージョン番号を入れて)
　という名前で保存してもいいし、後述の直接リンクで貼り付けても(多分できるはず)。

※今回はメモ帳でjquery-2.1.4.min.jsを用意しました。


[4]パスの変更
　lightbox.cssをメモ帳か、cssを扱えるエディタで開いて、
　　url(..imges/close.png)　url(../imges/loading.gif)
　　url(../imges/next.png)　url(..imges/prev.png)
　　　↓
　　url(U-page+のURL/imges/close.png)　url(U-page+のURL/imges/loading.gif)
　　url(U-page+のURL/imges/next.png)　url(U-page+のURL/imges/prev.png)
　　　※つまり絶対パス
　に書き換えます。
　書き換える場所は
　　3行目(4か所)、82行目、100行目、113行目、131行目、195行目
　の9か所。


[5]U-page+にアップロードします
　63.png
　こんな構成になっていればOKです。
　※index.htmlはとりあえず置いてみた(笑)


[6]ブログのHTMLの変更
　管理ページ→テンプレート→デザイン管理　から　HTML編集
　(デフォルトしかなかったら、HTMLの追加で増やしておきます)
　64.png

　<head>～</head>間に
<!-- Lightbox -->
<link href="URL/lightbox.css" rel="stylesheet" />
<script src="URL/jquery-2.x.x.min.js" type="text/javascript"></script>
<!-- /Lightbox -->

　</body>のすぐ上に
<script src="URL/lightbox.js" type="text/javascript"></script>
<script>
	lightbox.option({
		'fitImagesInViewport' : true,
		'wrapAround': true
	})
</script>

　って入れて、保存します。
　※x、URLのところは適宜直してくださいネ！

[7]ブログの記事を書く
　サムネイル画像表示、別ウィンドウで原寸大表示　にチェックを入れて画像を挿入します。
　この時、
　　<a href="URL" target="_blank"><img src="URL.png" width="x" height="x" border="0" align="" alt="x.png" /></a>
　の　 target="_blank"　を　data-lightbox="任意の文字"
　に変えます。
　　※任意の文字はなんでも
　　※詳しい使い方はidea Hackerの記事でどうぞ

おそらくこれでソネブロでもLightbox2で画像が表示されるようになるはず！



jQuery　を直接リンクで指定する方法

<!-- Lightbox -->
<link href="URL/lightbox.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- /Lightbox -->

※3行目
　最新版の確認は jQuery で



参考にしたサイト
Lightbox2について
いつか誰かの役に立つかもしれないweb制作屋の忘備録
のびのび通り
idea Hacker

ソースの記述方法について
息子と一緒に Makers
(追加分)
ほんっとにはじめての HTML5
Ingwer Design　-　とにかくやってみるブログ
Web活

ありがとうございました♡


久しぶりに頭を使ったら、なんだかくらくらしてきたので今日はここまで。
wox9xpvj.gif
○ タグ：Ringo ブログカスタマイズ
2015-09-20 Sun 15:16
共通テーマ：blog
silver week ｜ブログのカスタマイズ

link

この広告は前回の更新から一定期間経過したブログに表示されています。更新すると自動で解除されます。