よく他のサイトさんの写真とかがビロ~~ンとかっこよく拡大表示されるようなページをよく見かけます。管理人もこんなことができたらいいなと思い「WordPress Ver2.7」の時は「JUN-Hacks Blog」さんのページで見つけました「Lightbox」なるものがあると知り「LightboxV2.04」をインストールしていました。最近「WordPressVer2.8」にバージョンアップしたところ思っている動作ができなくなってしまったので、またまたいろいろ調べました。その結果「Lightbox 2」が良さそうだということが判りました。早速このプラグインを動作させるまでの手順を記録しておこうと思います。(この説明にも所々で使用してます)
WordPress で 「Lightbox 2」のプラグインを追加していきます。
- WordPressのログイン画面を呼び出します。
 |
| ユーザー名とパスワードを入力して「ログイン」します。 |
- ログインが成功すれば管理画面の「プラグイン」の「インストール済み」の画面を開きます。
- 下記のような「プラグインのインストール」画面に切り替わります。
 |
| ここでは、この「Lightbox」をクリックするか、「検索」入力欄に「Lightbox」と直接入力して「プラグインの検索」をクリックしてください。 |
- 表示されたプラグインの中から以下のプラグインを探します。
 |
| 「注意」:この記事作成時のときの「バージョン」が一番高いのもでした。 |
- プラグインを探せれば「インストール」をクリックします。この記事を作成している時は下記のようなメッセージが表示されました
 |
| ここでは「今すぐインストール」をクリックします。 |
- 無事インストールが終われば以下の画面になります。
 |
| ここでは「プラグインを有効化」をクリックします。 |
- プラグインの画面に戻り、「Lightbox 2」が使用中となります。
以上で、プラグインを追加できました。
では、テストも兼ねて実際に使用することにします。
- 登録が確認できれば、小さいイメージデータ(bmp,jpg,gif等)、拡大表示させたいイメージデータ(bmp,jpg,gif等)を用意します。
- イメージデータが用意できれば、Wordpress2.8の「ライブラリ」にて「新規追加」を行います。
 |
| ここで「ファイルを選択」ボタンをクリックすると、ファイル選択画面が表示されます。(こんな画面)↓ |
 |
| 用意したイメージを選択します。上記はイメージを複数選択した例です。 |
- ファイルを選択して、「開く」をクリックすると、選択したイメージの一覧が表示されます。
 |
| 選択したイメージでよければ、「すべての変更を保存」をクリックします。 |
- 保存できれば下記の画面が表示され、選択したイメージが追加されたのが判ります。
 |
| イメージが追加されている。 |
- イメージが格納できれば、いよいよ投稿記事内に載せます。まず、投稿の「新規追加」を行います。タイトル等は自由に付けてください。
- 次に、「HTML」入力欄に以下を入力します。
<a title="大きい画像のタイトル" rel="lightbox" href="大きい画像の指定" target="_blank">
<img src="小さい画像の指定" alt="代替え文字" title="小さい画像のタイトル" width="200" height="150" />
- これが、記事の完成です。
.jpg)