GoogleのBloggerは非常に便利で
容量も気にすることなくBlogの投稿が出来るのは便利なんですが
Wordpress等と違ってプラグインの追加が非常に不便な所があります。
今回はFancyBoxというLightbox風スクリプトを導入の仕方を簡単に紹介したいと思います
下の画像をクリックすれば、どんなスクリプトか分かります。
ページを戻ること無く投稿を見ることが出来るので非常に有効かと思います
他にLightboxやShadowboxと画像のポップアップスクリプトは沢山ありますが
Fancyboxが一番軽快にBloggerに実装出来たので
これを使ってみたいと思います。
手順としては
１、FancyBoxのダウンロードとソースをフリースペースや外部からアクセスできるサーバにコピー
２、Bloggerのページデザインの所でHtml編集をしてFancyboxのスクリプトの読み込み
これだけです。
まず、
Fancyboxのダウンロード先をご紹介しようとリンクを貼ろうと思ったのですが
今現在Fancyboxの公式ページが繋がらないようで、
繋がったらまた更新します。
２、Bloggerのページデザインのコード編集
ダッシュボードから「デザイン」を選択
Htmlの編集を選択して
テンプレートを編集
の中のコードがズラズラ並んでいる中で
</head>の前に下記を記述
①
<link href=’http://設置したサーバ/jquery.fancybox-1.3.1.css‘ media=’screen’ rel=’stylesheet’ type=’text/css’/>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js‘ type=’text/javascript’/>
<script src=’http://設置したサーバ/jquery.fancybox-1.3.1.pack.js‘ type=’text/javascript’/>
<script src=’http://設置したサーバ/jquery.easing-1.3.pack.js‘ type=’text/javascript’/>
②
<script type=’text/javascript’>
$(function(){
$("a[href*=ggpht.com]").each(function(idx,elem){
elem.href = elem.href.replace('/s1600/','/s1600/');
$(elem).fancybox();
});
});
③
$(function(){
$("a[href*=bp.blogspot.com]").each(function(idx,elem){
elem.href = elem.href.replace('/s1600/','/s1600/');
$(elem).fancybox();
});
});
</script>
①②③に分けましたが
①はFancyBoxのスクリプトの読み込みの部分です
②③はFancyBoxやLightboxでも共通の部分の話なのですが
Bloggerに写真を投稿時にPicasaWebアルバムに投稿されるのですが
このリンクが直接画像では無く画像ページにリンクを貼った形でBloggerに投稿されます。
FancyboxやLightboxのスクリプトは画像を指定しないと動かないので
Bloggerの画像のリンクをちょっと変換してあげるだけで見えるようになります。
その部分が②③です。
②
ggpht.comの含まれるリンクの中のアドレスの
/s1600/ 部分を /s1600/に変換
③
bp.blogspot.comの含まれるリンクの中のアドレスの
/s1600/ 部分を /s1600/に変換
これで無事に見れる様になります。
如何ですか？
画像がちゃんとポップアップされますでしょうか？
オススメのスクリプトです。
コメント