はじめてのブログデザイン

ホームページ制作の経験を活かしてブログテンプレートのデザインに挑戦!

スポンサーサイト

--/--/-- -- [Edit]

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

写真・画像を格好良く見せる JavaScript

2007/05/27 Sun [Edit]

人様のブログをウロウロしている最中、写真・画像のサムネイルをクリックした後、ブラウザのウィンドウが暗くなり格好良く大きい写真・画像が登場するのを見かけたことはありませんか?

今回はその格好良く写真・画像を見せつける JavaScript(ジャバスクリプト)をFC2ブログで使用する方法のご紹介です。

なるべく多くの方が使用できるように、できるかぎり細かく説明いたしますので、かなりの長文になると思います。ゆっくりしていってください( ^-^)_旦~

まずは JavaScript のサンプルページをご覧下さい。

いかがでしたでしょうか?
格好良く写真・画像が表示された方は続きを読むからお進みください。

もしもサンプルページで、写真・画像をクリックしても何も起こらなかった方は、ブラウザの JavaScript の設定をご確認ください。確認のしかたはブラウザやバージョンで異なりますので、「 JavaScript 設定 ● ● ●」などの検索ワードで Google や Yahoo! などで検索し、JavaScriptON にしてから、もう1度サンプルページの写真・画像をクリックしてみてください。

● ● ●にはお使いのブラウザの名前・バージョン・OSなどを入れると欲しい情報に辿り着けると思います。

JavaScript の設定が ON なのに正しく動作されない方は、お使いのブラウザには非対応なのだと思います。新しい OS や他のブラウザに乗り換えた時に、また遊びに来てください(*´∇`)ノシ マタネ~♪
※新しいブラウザでも Netscape だと正しく表示されませんでした。LunascapeFirefox など他のブラウザでお試しください。

問題無く表示された方は続きをどうぞ☆

長文になるので気合いを入れていきましょう!

●STEP1
それでは早速必要なものをダウンロードしに行きます。
ダウンロードするものは Lightbox 2 です。海外サイトなので英語ですが Download(ダウンロード)と Lightbox 2 が分かれば簡単にダウンロードできると思います。『いただきます』と言う感謝の気持ちを込めてダウンロードさせて頂きましょう^^
念のため、キャプチャーを貼っておきます。ご参考にしてください。

Lightbox2 Download
※ Lightbox のバージョンやキャプチャー画像は2007年5月のものです。バージョンの更新やサイトのリニューアルでキャプチャーや説明と異なる場合があります。

Lightbox 2 ダウンロードはこちら>>>

ダウンロードが完了しましたら、ファイルが Zip(ジップ)形式で圧縮されているので解凍しましょう。
解凍に成功したら STEP2 へお進みください。

上の説明の意味が分からない方は、「zipとは」で検索すればなんとなく何のことか分かると思います。
解凍できない方は「zip 解凍 ソフト」で検索すればフリーソフト(無料で使えるソフトウェア)が見つかると思います。 頑張ってゲットしてください^^
解凍に成功すると「 lightbox ●●」という名前のフォルダが作成されます。
※●●にはバージョンの数字が入ります。

●STEP2
次に、解凍されたフォルダの中身を確認しましょう。

  • index.html(ファイル)
  • css(フォルダ)
  • images(フォルダ)
  • js(フォルダ)

FC2ブログで Lightbox を使うには、ダウンロードしたファイルのソース(内容)を数カ所変更します。ソースの変更にはテキストエディタなどが必要になります。

上の説明で不安の無い方、多少なりとも HTML などに触れたことのある方は下のSTEP3へお進みください。

それ以外の方は当ブログのカスタマイズの基礎知識にある HTML の基礎知識CSS の基礎知識を1度ご覧頂いたほうが、今後の説明に戸惑うことが少なくなるかも知れません。

●STEP3
それではまず、解凍されたフォルダの中の css フォルダの中にある lightbox.css を開いてください。css ファイルは1つだけです。もしも、2つ以上のファイルがある方はこれから下の説明では対応できない可能性があります。
※Web ブラウザで開いて閲覧すると言う意味ではなく、テキストエディタなど css ファイルを編集できるソフトウェアで開くと言う意味です。

44 行目付近の ID セレクタ「 #prevLink, #nextLink 」を見つけてください。
見つかりましたら、下の赤い部分を削除してください。

background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */

削除すると下のようになります。 ※私はいつものくせで「 "" 」で画像名を囲っておきました。

background: transparent url("blank.gif") no-repeat; /* Trick IE into showing hover */

次に 54 行目付近の ID セレクタ「 #prevLink:hover, #prevLink:visited:hover 」と、おそらくその下の行にある「 #nextLink:hover, #nextLink:visited:hover 」を見つけてください。
見つかりましたら、先ほどと同じように下の赤い部分を削除(2カ所)してください。

background: url(../images/prevlabel.gif) left 15% no-repeat;
background: url(../images/nextlabel.gif) right 15% no-repeat;

削除すると下のようになります。

background: url("prevlabel.gif") left 15% no-repeat;
background: url("nextlabel.gif") right 15% no-repeat;

削除(3カ所)が済みましたら、ファイルを保存し閉じてください。

●STEP4
続いて解凍したフォルダの中にある js フォルダを開いてください。

  • effects.js
  • lightbox.js
  • prototype.js
  • scriptaculous.js

上記した4つの js ファイルがあることを確認してください。もしも、4つ以外でしたり、ファイル名が異なるとこれから下の説明では対応できない可能性があります。 その js ファイルの中から「 lightbox.js 」を開きます。

64 行目付近にある変数「 var fileLoadingImage 」を見つけてください。エディタの検索機能を使うと簡単に見つけられると思います。 その変数の下に変数「 var fileBottomNavCloseImage 」も見つかると思います。
見つかりましたら下の赤い部分「 images 」を2カ所「 file 」に置換(書き換え)してください。

var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

置換後は下のようになります。

var fileLoadingImage = "file/loading.gif";
var fileBottomNavCloseImage = "file/closelabel.gif";

置換(2カ所)が済みましたらファイルを保存し閉じてください。ファイルへの編集作業は以上です。

●STEP5
次に必要なファイルのアップロードを行います。
FC2ブログへログインし、ログイン画面の左メニューにあるツールの項目から「ファイルアップロード」をクリックし下記のファイルを全てアップロードしてください。

  • lightbox.css
  • js フォルダの中にある js ファイル4ファイル
  • images フォルダの中にある gif や jpg 全部

※もし js ファイルの「 prototype.js 」を他の機能拡張でお使いの方は、prototype.js ファイルを開きバージョンを確認し、これからアップロードしようとしている prototype.js より、既存の prototype.js の方がバージョンが新しいようでしたらアップロードの必要はありません。
お使いのテンプレートによっては HTML の head 内で既に読み込んでいる可能性もありますのでご確認ください。 ちなみにバージョンはソースの1番上に書かれているのですぐに分かると思います。
※当ブログで配布しているテンプレートの中には既に上で記述したように head 内で prototype.js を読み込んでいるものがあります。

●STEP6
必要なファイルのアップロードが完了しましたら、次に HTML の head 内で下記のソースを使い、js ファイルと css ファイルを読み込みます。

<script type="text/javascript" charset="EUC-JP" src="http://★.fc2.com/★/★/file/prototype.js"></script>
<script type="text/javascript" charset="EUC-JP" src="http://★.fc2.com/★/★/file/scriptaculous.js? load=effects"></script>
<script type="text/javascript" charset="EUC-JP" src="http://★.fc2.com/★/★/file/lightbox.js"></script>
<link rel="stylesheet" href="http://★.fc2.com/★/★/file/lightbox.css" type="text/css" media="screen,tv" charset="EUC-JP"></link>

★部分はお使いのサーバーなどにより個々に変更する箇所です。先ほどアップロードしたファイルをアップロード画面で表示すると URL が簡単に確認できます。
上の必要なソース(URLの部分、つまり src 属性や href 属性の値)を正しく変更し、全てのソースをコピーします。

●STEP7
ログイン画面左メニューの環境設定の項目から「テンプレートの設定」をクリックし、現在設定されている(使用中)PC テンプレートの「編集」をクリックしてください。
※念のためテンプレートを複製しバックアップを取っておくことをお勧めします。

テンプレートの編集画面にある HTML 編集エリアから head の終了タグを探し、その head の終了タグの上に STEP6 でコピーしたソースをペーストします。

…(省略)…
<script type="text/javascript" charset="EUC-JP" src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/prototype.js"></script>
<script type="text/javascript" charset="EUC-JP" src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/scriptaculous.js? load=effects"></script>
<script type="text/javascript" charset="EUC-JP" src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/lightbox.js"></script>
<link rel="stylesheet" href="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/lightbox.css" type="text/css" media="screen,tv" charset="EUC-JP"></link>
</head>

上のソースのように </head> タグの上に全てペーストします。
STEP5 でも記述しましたが、「 prototype.js 」が既に head 内で読み込まれていないか確認しましょう。また、ペーストする時に他のソースを消してしまわないように充分注意してください。

ペーストが済みましたらテンプレート編集画面の「更新」ボタンをクリックし、ソースを保存すれば「写真・画像を格好良く見せる」ための準備は全て完了です。次の STEP ではいよいよ格好良く見せつけるための JavaScript の適用方法を説明いたします!

●STEP8
それでは実際にサムネイルに格好良い動きを適用する方法を説明します。
まず、エントリー(記事)で使いたい画像データを「 STEP5 」と同じ要領でアップロードします。そして、アップロードした画像から「記事を書く(サムネイルを使用)」を選びクリック。
そうしますと「新しく記事を書く」画面が表示され、いつも記事の内容を書き込んでいる部分にサムネイルを表示させるためのソースが貼られています。

<a href="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/hajime.jpg" target="_blank"><img src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/hajimes.jpg" alt="hajime" border="0"></a><br clear="all">

上のソースの赤い部分 a(アンカー)タグのターゲット属性( target="_blank" )を削除し

rel="lightbox" title="写真の下に表示させる文字"

替わりに上のソースを a タグに貼ります。
※ a タグに貼る際は属性と属性の間に半角スペースを空けるように注意してください。
※ title 属性の中身「写真の下に表示させる文字」はお好きな言葉に変更してください。省略も可能です。

ソースの変更が済みましたら、いつも通り記事を保存し、ご自身のブログで保存した記事のサムネイルをクリックしてみてください。格好良くいくはずです。

●STEP9
次にスライドショーのように順々に写真・画像データを格好良く見せる方法です。
まず、格好良く見せたい画像を任意の数(順々に見せたい画像全部)アップロードします。
※今回は3枚の画像をアップロードしたことを前提として説明を進めます。
画像のアップロードが完了しましたら、アップロードした画像から「記事を書く(サムネイルを使用)」を選びクリック。
そうしますと「新しく記事を書く」画面が表示され、いつも記事の内容を書き込んでいる部分にサムネイルを表示させるためのソースが貼られています。使いたい画像のソースを1つの記事にまとめます。

<a href="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample1.jpg" target="_blank"><img src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample1.jpg" alt="sample1" border="0"></a><br clear="all">
<a href="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample2.jpg" target="_blank"><img src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample2.jpg" alt="sample2" border="0"></a><br clear="all">
<a href="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample3.jpg" target="_blank"><img src="http://blog-imgs-27.fc2.com/h/a/j/hajimetedesign/sample3.jpg" alt="sample3" border="0"></a><br clear="all">

上のソースの赤い部分 a(アンカー)タグのターゲット属性( target="_blank" )を削除し

rel="lightbox[同じ名前]" title="写真の下に表示させる文字"

上のソースをそれぞれの a タグの属性として貼ります。lightbox[同じ名前]は半角の英数字とアンダースコアやハイフンなどで、それぞれ同じ名前になるようにします。
例)rel="lightbox[hajime_sample]"

ソースの変更が済みましたら、いつも通り記事を保存しご自身のブログで保存した記事のサムネイルをクリックしてみてください。またしても格好良くいくはずです。画像の上にマウスカーソルを乗せると「 NEXT 」や「 PREV 」と表示されるので、その状態で画面上をクリックすると画像が入れ替わります。また、キーボードの「 N 」キーで次の画像「 P 」キーで前の画像も見られます。

いかがでしたでしょうか?
FC2ブログ運営者で写真や画像を扱う方は、格好良く見せつけてやってください^^
また、サムネイルの写真部分のソースをテキストなどにしてもお洒落なことができそうですよね。たとえば、「当ブログについて」なんて感じのテキストリンクで格好良い画像付きの説明を表示させたり。アイデア次第で使い道も色々あると思いますので、お時間のある方は是非挑戦してみてください。

最後に
Mac の Firefox だと、Close ボタンをクリックした時にスクロールバーが表示され、画面が気持ち良く閉じないことに気がつきました。 言葉で説明するのは難しいのですが、巧くクリックしないと1発では閉じない感じです。気になる方は、「 lightbox.css 」を開き ID セレクタ「 #imageDataContainer 」を探し、その中のプロパティ「 overflow:auto; 」を「 overflow:hidden; 」にして再度 css ファイルをアップロードすると、取り敢えず解決します。
しかし、私のまったくの「勘」に頼った解決方法ですので、極端に画像が大きいものや、古い Web ブラウザなどでは何かしらの不具合が発生するかも知れません。私は上記のように CSS 内を「変更しましたよ」と言う報告だと思ってください。
しかし、Mac の Firefox でも気持ち良く Close ボタンで閉じるようになりましたし、今のところ他のブラウザ( WinMac のモダンブラウザ)でも問題ありません。

Prev
XML宣言でIE6が後方互換モードになるバグ
Top
はじめてのブログデザイン
Next
コメントの修正&削除ができない

Comments

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

 
 
 
 
 
 
 
  非公開コメント
 

Track Backs

TB URL 

javascriptのlightbox(ライトボックス)について。

WEBデザイナーを目指す前からやってみたかったjavascriptのlightbox(写真をクリックしたら動きとともに写真が真ん中に表示されるjavascript) javascriptの...

Top
はじめてのブログデザイン

はじめに・・・

hajime

Author:hajime
はじめまして!齢32を迎えたおっさんです。
当ブログではホームページ制作の経験を活かして、日々ブログテンプレートのデザインを勉強しています。ご意見ご質問アドバイスなどありましたら、お気軽にコメントください!

ブログテンプレートのご使用についてをご覧頂けると注意点などをご確認いただけます。

ブログテンプレート一覧表では、今迄当ブログで制作してきたテンプレートをご覧頂けます。

はじめてのブログデザイン記事一覧で、気になる記事を探してみませんか?

はじめてのブログはFC2ブログで良いと思うに一票。

Mail Address

Google AdSense

RSSフィード

便利なブックマーク

リンク

ロックオン


ドメインが増えてきたので引っ越し検討中のレンタルサーバー。

カテゴリー

タグクラウド

検索フォーム

最近の記事

最近のコメント

最近のトラックバック

お気に入り

EIZOダイレクト
私の中で出ている1つの答え。それは液晶モニターに関しては今も昔もこれからも EIZO(ナナオ)。

ドメイン検索
a
.com .net .info .mobi

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。