RSS2.0

BloggerでLightbox2を文字のリンクに対して使う

2012/08/16

Bloggerの最新テンプレートでは「ライトボックスで画像をアピール」(設定/投稿とコメント)が「はい」になっているので、標準でLightboxが使える。
lightbox

それでは文字のリンク先を画像にしたときも、Lightbox形式にするのにはどうしたら良いか検討してみた。
Lightbox2にアクセス(Ver2.51)すると英語だが説明文がある。
それによると必要なファイルは
jquery-1.7.2.min.js
lightbox.js
lightbox.css
close.png
loading.gif
next.png
prev.png
の7つ。
先ず、これらを適当なサーバーにアップしなければならない。
ここでは無料クラウドDropboxのPublicにlightboxフォルダを作成し、その中に7つのファイルをアップした。
image

そして、jquery-1.7.2.min.js、lightbox.js、lightbox.cssのパブリックリンクを取得すると、Javascriptは
<script src="http://dl.dropbox.com/u/********/lightbox/jquery-1.7.2.min.js"></script>
<script src="http://dl.dropbox.com/u/********/lightbox/lightbox.js"></script>
CSSへのリンクは
<link href="http://dl.dropbox.com/u/********/lightbox/lightbox.css" rel="stylesheet" />
但し、********は各ユーザに割り当てられた数字。
これらの3つはBloggerのレイアウト「HTML/JavaScript」に挿入して置かねばならない。
image

これで準備完了。後は実際に使って見るだけ。
例えば画像をDropboxにアップしそれにリンクして見よう。

ここをクリックすると「Dropbox/Public/lightbox」内のファイル全体が大きく表示されます。

を作りたいときは先ずリンクしたい文字に対して、普通にリンクを作成(図はWindows Live Writer2011の時)。
image
次にソースを開いて、 文字にリンクを張った画像(lightbox2.jpg)のあとにrel=”lightbox”を追加します。 
image

またここをクリックするとBloggerの「HTML/Javascript」の大きな画面が表示されます。 も同様にできます。

もし、連続して画像を表示させたいときはrel=”lightbox[kakudai]”のようにします。 連続画像1連続画像2 
連続画像1をクリックし画像の上にマウスを当てると次の画像を示すアイコンが右端に出ます。


画像にタイトルを入れたいときは同様にtitle=”ライトボックス画像” のようにします。
タイトルを入れたサンプルはこちら

●尚、このブログはライトボックスに対応していないため、画像をクリックすると大きな画像は今まで通り次のページに表示されます。試して見ると違いが分かります。もし、このブログの様にライトボックス非対応の場合、画像に対してrel=”lightbox”を追加すると文字のリンクと同様になります。

※関連ページ:無料クラウドDropboxでWindowsとLinux(Ubuntu)を同期

Bloggerにカレンダー式アーカイブを追加

2010/04/09

ブログのサイドバーにあるカレンダーの太字の数字をクリックして過去に投稿したブログを表示させると言うのは良く見かける方法だが、なぜかBloggerにはない。これをBloggerで実現させるには「クリボウ式カレンダー」のウィジェットが簡単に出来ていい。以下はその導入方法です。
(1)クリボウの Blogger Tips: Blogger beta にもカレンダー にアクセスし「カレンダーを追加」をクリック
 image
(2)Bloggerにログイン(Bloggerに自動ログインしている時は出ない)
image
(3)ブログを選択して「ウィジェットを追加」をクリック
image
(4)Bloggerのレイアウトで挿入場所を編集
image
※このカレンダーを追加したブログ例はこちら

Picasaウェブアルバムの画像をBloggerやLive Writer等に挿入する方法

2009/12/15

ホームページやブログの容量が少なくなって来たら、Picasaウェブアルバムを利用すると延命できます。
手順:
(1)Picasa3でアップする画像を選択したら、右クリックし「ウェブアルバムにアップロード」を選択
image
※複数枚の画像をPicasaウェブにアップするにはトレイから「アップロード」をクリック
image

(2)アップロード先のアルバム名やアップロードするサイズを決めて「アップロード」をクリック
image
※自由なサイズ(800X600等)にしたい時は一度エクスポートしてからPicasaウェブにアップロードする。

(3)「オンライン表示」をクリック
image
※一度、「完了」させてから、ウェブアルバムにログインしてもいい。

(4)Picasaウェブにログインし、画像が表示されたら、画像の上で右クリックし「プロパティ」を選択
image
(5)アドレスを選択し、「コピー」を選択
image
もし、ブラウザがFirefoxならば「画像のURLをコピー」を選択
image

(6)画像の挿入
Windows Live Writerに挿入
「挿入/画像/Webから画像を挿入」を選択し、「画像のURL」に貼り付けて「挿入」をクリック
image
挿入された画像

Bloggerに挿入
「画像を挿入」をクリック、ウェブアドレス(URL)にチェックを入れ、「画像のURL」に貼り付けて「OK]をクリック
但し、下の画像は「新しいエディタ」のとき
image
Blogger作成画面に挿入されたとき

image
alphaEDITに挿入
「挿入/画像」で
image
KompoZerに挿入
「挿入/画像」で
image

xfy Blog Editorに挿入
「画像/挿入」より
image
※関連ページ
・「甘酒の作りかた