うにょーん、じゃ分からんかも知れませんが。
だけど、そのうにょーんがどうしてもやりたくて仕方無いので調べていたら、これまたまさにヒットな記事を見つけましたので挑戦してみます。
どうやらうにょーんを実現してくれるのは、Lightboxとか言う外部機能(プラグイン!?)らしいです。今回は見つけてきた記事通り、Lightbox 2をマイブロガーであるkdpogに導入してみようと思います。
before (うにょーんせず)
- まずLightbox 2のサイトから、Lightbox 2の本体をダウンロードしてきます。
(私の場合、ダウンロード時点では「lightbox2.05.zip」でした) - ダウンロードしたzipファイルを解凍します。
さて、ここで問題なのですが、ブロガーには外部機能を呼び出すにあたって必要なファイルを保存しておく領域が用意されていません。なので、外部の領域に必要なファイルを保存して、ブロガーからその領域を読みに行くような動作をさせるようです。
今回は記事通り、Googleサイトに適当なサイト名で領域を作って、ルートにファイルを保存します。以降は私が作ったGoogleサイトが「https://sites.google.com/site/forlightbox2/」であることを前提に話を進めます。
- 「images」フォルダ内のgifファイルのうち、サンプル(image-1.gif, thumb-1.gif)を除いて全てのgifファイルをGoogleサイトのルートへアップロードします。
- アップロードしたファイルのURLを確認します。GoogleサイトのURLが上記の前提だと、アップロードしたファイルはそれぞれ、「https://sites.google.com/site/forlightbox2/xxxxx.gif」のようになると思います。
- 「js」フォルダ内の「lightbox.js」をテキストエディタ等で開き、gifファイルの記載がある部分を2で確認したURLにそれぞれ書き換えます。
(Lightbox 2.05の場合、4箇所ありました) - 「css」フォルダ内の「lightbox.css」をテキストエディタ等で開き、gifファイルの記載がある部分を2で確認したURLにそれぞれ書き換えます。3と同じ要領ですね。
(Lightbox 2.05の場合、2箇所ありました) - 3と4で編集したファイルを保存し、「js」フォルダと「css」フォルダ内の全てのファイルをGoogleサイトのルートへアップロードします。これでLightbox 2側の準備は完了です。
- 最後にブロガー側の準備です。ブロガーのメニューから「デザイン」 --> 「HTMLの編集」を選択します。
- テンプレートの内容を確認し、<head> ～ </head>の中に、以下の記述をし、保存します。
<head> <!--Lightbox2用の記述--> <script src='https://sites.google.com/site/forlightbox2/prototype.js' type='text/javascript'/> <script src='https://sites.google.com/site/forlightbox2/scriptaculous.js?load=effects,builder' type='text/javascript'/> <script src='https://sites.google.com/site/forlightbox2/lightbox.js' type='text/javascript'/> <link href='https://sites.google.com/site/forlightbox2/lightbox.css' media='screen' rel='stylesheet' type='text/css'/> <!--Lightbox2用の記述-->
これで、全ての準備が整いました。
あとは、投稿内で設置した画像を「HTMLの編集」で表示し、画像へのリンクタグ内を以下のように書き換えます。
(変更前) <a href="https://~~/s1600/xxxxx.JPG" ～ > (変更後) <a href="https://~~/xxxxx.JPG" ～ rel="lightbox">
さて、Lightbox 2導入結果がコレ。
after (うにょーん版)
ややこしかったけど、スムーズに導入出来ました。良かった良かった。単に画像を表示するだけでなく、動きがある方がやっぱり楽しいですね。今後の投稿ではどんどん活用して行こうと思います。
0 件のコメント:
コメントを投稿