Lightbox 2 のプラグインへの追加

よく他のサイトさんの写真とかがビロ~~ンとかっこよく拡大表示されるようなページをよく見かけます。管理人もこんなことができたらいいなと思い「WordPress Ver2.7」の時は「JUN-Hacks Blog」さんのページで見つけました「Lightbox」なるものがあると知り「LightboxV2.04」をインストールしていました。最近「WordPressVer2.8」にバージョンアップしたところ思っている動作ができなくなってしまったので、またまたいろいろ調べました。その結果「Lightbox 2」が良さそうだということが判りました。早速このプラグインを動作させるまでの手順を記録しておこうと思います。(この説明にも所々で使用してます

  
   プラグインに追加するまでの手順  
 
WordPress で 「Lightbox 2」のプラグインを追加していきます。
  1. WordPressのログイン画面を呼び出します。
    Syntax002
    ユーザー名とパスワードを入力して「ログイン」します。
  2. ログインが成功すれば管理画面の「プラグイン」の「インストール済み」の画面を開きます。
    Syntax003 Right Syntax005
    「▼」をクリック 「新規追加」をクリック
  3.  
  4. 下記のような「プラグインのインストール」画面に切り替わります。
    LightBox001
    ここでは、この「Lightbox」をクリックするか、「検索」入力欄に「Lightbox」と直接入力して「プラグインの検索」をクリックしてください。
  5. 表示されたプラグインの中から以下のプラグインを探します。
    LightBox002
    「注意」:この記事作成時のときの「バージョン」が一番高いのもでした。
  6. プラグインを探せれば「インストール」をクリックします。この記事を作成している時は下記のようなメッセージが表示されました
    LightBox002-1
    ここでは「今すぐインストール」をクリックします。
  7. 無事インストールが終われば以下の画面になります。
    LightBox002-2
    ここでは「プラグインを有効化」をクリックします。
  8. プラグインの画面に戻り、「Lightbox 2」が使用中となります。
    LightBox002-3
     
以上で、プラグインを追加できました。
   実際にLightbox 2 を使用する  
 
では、テストも兼ねて実際に使用することにします。 
   イメージを用意する
 
  1. 登録が確認できれば、小さいイメージデータ(bmp,jpg,gif等)、拡大表示させたいイメージデータ(bmp,jpg,gif等)を用意します。
  2.  
  3. イメージデータが用意できれば、Wordpress2.8の「ライブラリ」にて「新規追加」を行います。
    LightBox005 Right LightBox006
    「▼」をクリック 「新規追加」クリック
    LightBox007
    ここで「ファイルを選択」ボタンをクリックすると、ファイル選択画面が表示されます。(こんな画面)↓
     
    LightBox009
    用意したイメージを選択します。上記はイメージを複数選択した例です。
  4.  
  5. ファイルを選択して、「開く」をクリックすると、選択したイメージの一覧が表示されます。
     
    LightBox010
    選択したイメージでよければ、「すべての変更を保存」をクリックします。
  6.  
  7. 保存できれば下記の画面が表示され、選択したイメージが追加されたのが判ります。
     
    LightBox011
    イメージが追加されている。
 
   投稿記事の作成
 
  1. イメージが格納できれば、いよいよ投稿記事内に載せます。まず、投稿の「新規追加」を行います。タイトル等は自由に付けてください。
  2.  
  3. 次に、「HTML」入力欄に以下を入力します。
    <a title="大きい画像のタイトル" rel="lightbox" href="大きい画像の指定" target="_blank">
    <img src="小さい画像の指定" alt="代替え文字" title="小さい画像のタイトル" width="200" height="150" />
    
  4. これが、記事の完成です。

    Sample(小)

カテゴリー: lightbox — admin 08:32  コメント (0)