米が好き » JavaScript

【WordPress】Twitterでつぶやかれた数を表示するプラグイン【Topsy】

くーさん — Wed, 14 Jul 2010 15:56:18 +0000

Twitterでリンクを貼られた場合、その数を表示させてくれるWEBサービスです。
今では設置しているブログも多くなっています。

以前にも記事を書いたんですが、今まではJavaScriptで表示させていました。
しかしJavaScriptで書くと、ブログの表示速度が遅くなる事に今更ながら気付きました。

直接JavaScriptを書く場合だと、1記事1記事Topsyの数を読み込むようでブログが完全に表示されるまで時間が掛かります。
それをプラグインに変えたら、ブログを一旦全部読み込んでからTopsyを読んでいるようです。
サイドが表示されなくてイライラしていたのが、これでちょっとは緩和されました。

後の問題として、プラグインだと

～～～

の中に勝手に入ってしまうんですが、それ以外の場所にも以下のコードで表示させる事が出来るようです。

大きい画像の場合。

今現在私が置いている場所は

の外なので、これでちょっとは自分好みになりました。

Topsy

WordPress Plugins
Topsy Retweet Button

【WordPress】プラグインを使わずJavaScriptでTwitterを表示させる方法

くーさん — Tue, 29 Jun 2010 18:30:34 +0000

タイトルにWordPressと付けていますが、勿論普通のHTMLサイトでも使えます。
検索すると結構な数がヒットするかと思います。

まず目を付けたのがこのサイト。
Twitterが公式に公開している（？）JavaScriptを使っての表示方法。

Webクリエイターボックス
プラグインを使わずWordPressに6の機能をつける

次に目を付けたのがこのサイト。

Creazy!
第５回：twitter の JavaScript Badge を改造する

どちらも一長一短。
公式の方は時間や曜日表記が公式サイトと同じ。
2つ目の方は時間・曜日はカスタマイズ出来るのに対し、リンクが貼られない。
うーむ。　と迷った後、「じゃ、2つ合体させればよくね？」って事で合体させました。

JavaScriptのコードは最後に書いていますが、今回もダウンロードした方が早いと思います。

ダウンロードはこちらから。　（右クリックで保存してください）

ダウンロードした『twitter.js』を好きな所に放り込んで、フッターにJavaScriptを書き込みます。
以下はWordPressのテンプレート内のjsフォルダ内に置いた例。

赤字の所に自分のアカウント名と表示させる数を入力します。
後は実際にTwitterのTLを表示させたい箇所に以下のコードを書くだけです。

後はCSSで表示形式を整えるだけです。

#twitter {
  margin-bottom: 5px;
}

#twitter li {
}

#twitter li .name {
  border-bottom: 1px dotted #ccc;
}

#twitter li .time {
  text-align: right;
}

上記の例だと、以下のような表示になります。

最後にJavaScriptの全文。
表示方法など変えたい場合は、JavaScriptをいじるだけで簡単に変更出来ます。

function twitterCallback2(twitters) {
  var statusHTML = [];
  for (var i=0; i]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return ''+url+'';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+''+reply.substring(1)+'';
    });
    statusHTML.push(''+status+'
'+relative_time(twitters[i].created_at)+'');
  }
  document.getElementById('twitter').innerHTML = statusHTML.join('');
}

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);
  var dt = new Date();
  dt.setTime(dt.getTime() - (delta*1000));
  yy = dt.getYear();
  mm = dt.getMonth() + 1;
  dd = dt.getDate();
  dy = dt.getDay();
  hh = dt.getHours();
  mi = dt.getMinutes();
  ss = dt.getSeconds();
  if (yy < 2000) { yy += 1900; }
  if (mm < 10) { mm = "0" + mm; }
  if (dd < 10) { dd = "0" + dd; }
  dy = new Array("日","月","火","水","木","金","土")[dy];
  if (hh < 10) { hh = "0" + hh; }
  if (mi < 10) { mi = "0" + mi; }
  if (ss < 10) { ss = "0" + ss; }

  return yy+"/"+mm+"/"+dd+"("+dy+") "+hh+":"+mi+":"+ss;
}

私は秒表示は要らなかったので、赤字のコードは省いています。
もし表示させたい場合は、上記のように書けばOKです。

プラグインも入れすぎると重くなる（？）し、ややこしくなるし、使わずに出来る事は使わない方が良いのかも。

【WordPress 3.0】画像挿入をポップアップでする方法

くーさん — Wed, 23 Jun 2010 16:40:20 +0000

WordPress 3.0 日本語版が6/23にリリースされ、アップデートした方は色々触っている事だと思います。

以前書いた、記事投稿時に画像を挿入する際フラッシュ形式ではなくポップアップにして連続投稿する方法ですが、3.0になって前回の方法では使えなくなってしまいました。
私は画像が1・2枚ならフラッシュ形式、それ以上ならポップアップ形式かFTPに直上げの方法を取っており、私だけではなくこのポップアップ形式を使っている人が少なからずいるので、再度調べてみました。

今回変更箇所多すぎ。

なので、私の変更したファイルを画像込みでZIPにしてアップしてます。
『media-button-image_f.gif』、『media-button-image_p.gif』、『media.php』が中に入っています。
2つの画像は『wp-admin/images/』の中に。
media.php は『wp-admin/includes/』の中に放り込めば一先ず使えます。

投稿画面がこんな感じになります。

左がフラッシュ形式、右がポップアップ形式です。

ダウンロードはこちらから。

「いや、俺は自分で変更する！」
ってな方は、以下に変更箇所を全て書いておりますので頑張ってください。

余計な説明は入れていません。
私も深くは分かっておらず、「こうしたから出来た」ってなだけです。＾＾；

ファイルは言わずもがな、『media.php』の変更後は UTF-8 で保存してください。

ファイル（media.php）の上から順に書いています。
行番号は追加していった場合の番号になります。

【変更前】 wp-admin/includes/media.php　（169行目～）（WordPress 3.0）


　↓

【変更後】 wp-admin/includes/media.php　（169行目～）（WordPress 3.0）
#exit;
}


『#』を追加。





【変更前】 wp-admin/includes/media.php　（353行目～）（WordPress 3.0）
function media_buttons() {
  $do_image = $do_audio = $do_video = true;
  if ( is_multisite() ) {
    $media_buttons = get_site_option( 'mu_media_buttons' );
    if ( empty($media_buttons['image']) )
      $do_image = false;
    if ( empty($media_buttons['audio']) )
      $do_audio = false;
    if ( empty($media_buttons['video']) )
      $do_video = false;
  }
  $out = '';

  if ( $do_image )
    $out .= _media_button(__('Add an Image'), 'images/media-button-image.gif?ver=20100531', 'image');
  if ( $do_video )
    $out .= _media_button(__('Add Video'), 'images/media-button-video.gif?ver=20100531', 'video');
  if ( $do_audio )
    $out .= _media_button(__('Add Audio'), 'images/media-button-music.gif?ver=20100531', 'audio');

  $out .= _media_button(__('Add Media'), 'images/media-button-other.gif?ver=20100531', 'media');

  $context = apply_filters('media_buttons_context', __('Upload/Insert %s'));

  printf($context, $out);
}
add_action( 'media_buttons', 'media_buttons' );

function _media_button($title, $icon, $type) {
  return "";
}
　↓

【変更後】 wp-admin/includes/media.php　（353行目～）（WordPress 3.0）
function media_buttons() {
  $do_image = $do_image2 = $do_audio = $do_video = true;
  if ( is_multisite() ) {
    $media_buttons = get_site_option( 'mu_media_buttons' );
    if ( empty($media_buttons['image']) )
      $do_image = false;
    if ( empty($media_buttons['image2']) )
      $do_image2 = false;
    if ( empty($media_buttons['audio']) )
      $do_audio = false;
    if ( empty($media_buttons['video']) )
      $do_video = false;
  }
  $out = '';

  if ( $do_image )
    $out .= _media_button(__('Add an Image'), 'images/media-button-image_f.gif?ver=20100531', 'image');
  if ( $do_image2 )
    $out .= _media_button(__('Add an Image'), 'images/media-button-image_p.gif?ver=20100531', 'image2');
  if ( $do_video )
    $out .= _media_button(__('Add Video'), 'images/media-button-video.gif?ver=20100531', 'video');
  if ( $do_audio )
    $out .= _media_button(__('Add Audio'), 'images/media-button-music.gif?ver=20100531', 'audio');

  $out .= _media_button(__('Add Media'), 'images/media-button-other.gif?ver=20100531', 'media');

  $context = apply_filters('media_buttons_context', __('Upload/Insert %s'));

  printf($context, $out);
}
add_action( 'media_buttons', 'media_buttons' );

function _media_button($title, $icon, $type) {
  if ($type == "image2") {
    return "";
  } else {
    return "";
  }
}


赤字のコードを追加。





【変更前】 wp-admin/includes/media.php　（499行目～）（WordPress 3.0）
function media_upload_image() {
  $errors = array();
  $id = 0;
　・
　・
　・
  return wp_iframe( 'media_upload_type_form', 'image', $errors, $id );
}
　↓

【変更後】 wp-admin/includes/media.php　（499行目～）（WordPress 3.0）
function media_upload_image() {
  $errors = array();
  $id = 0;
　・
　・
　・
  return wp_iframe( 'media_upload_type_form', 'image', $errors, $id );
}

function media_upload_image2() {
  $errors = array();
  $id = 0;
　・
　・
　・
  return wp_iframe( 'media_upload_type_form', 'image', $errors, $id );
}


499～549行目を551行目に丸々コピーする。

『media_upload_image2()』 ← 2を付ける。





【変更前】 wp-admin/includes/media.php　（2334行目～）（WordPress 3.0）
add_filter('async_upload_image', 'get_media_item', 10, 2);
add_filter('async_upload_audio', 'get_media_item', 10, 2);
add_filter('async_upload_video', 'get_media_item', 10, 2);
add_filter('async_upload_file', 'get_media_item', 10, 2);

add_action('media_upload_image', 'media_upload_image');
add_action('media_upload_audio', 'media_upload_audio');
add_action('media_upload_video', 'media_upload_video');
add_action('media_upload_file', 'media_upload_file');
　↓

【変更後】 wp-admin/includes/media.php　（2334行目～）（WordPress 3.0）
add_filter('async_upload_image', 'get_media_item', 10, 2);
add_filter('async_upload_image2', 'get_media_item', 10, 2);
add_filter('async_upload_audio', 'get_media_item', 10, 2);
add_filter('async_upload_video', 'get_media_item', 10, 2);
add_filter('async_upload_file', 'get_media_item', 10, 2);

add_action('media_upload_image', 'media_upload_image');
add_action('media_upload_image2', 'media_upload_image2');
add_action('media_upload_audio', 'media_upload_audio');
add_action('media_upload_video', 'media_upload_video');
add_action('media_upload_file', 'media_upload_file');


赤字のコードを追加。





これで以前と同じように使えると思います。

何かあったらコメントください。



【WordPress】3.0でのポップアップ表示（前置き編）
くーさん — Tue, 22 Jun 2010 21:55:15 +0000

過去記事、

【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法

【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2

ですが、WordPress 3.0 の『wp-admin/includes/media.php』を見ると少々ややこしく・・・と言うか前よりは簡単になっているんでしょうが、以前のやり方では上手くいきません。



しかし、無事解決方法を解読。

その方法とは！



・・・明日書きまーす。ｗ



【iPhone】誰でも簡単にHTMLでアプリランチャーが作成できる！
くーさん — Wed, 30 Dec 2009 21:30:33 +0000

HTMLの知識だけで誰でも簡単にiPhoneのランチャーが作成出来るようです。



yagutaの日記

Jailbreak不要で iPhoneアプリを起動できるランチャー


上記サイトの説明だけでは分かり難かったので補足。

サイト内に貼られているダウンロード先から『ilauncher.html』をダウンロードする。

何も考えずに、そのファイルをサーバーにアップロードする。



※WordPressを使用している人は、テーマ内にファイルをアップするのではなく必ず一番上の階層にファイルをアップする。

×　wp-contents/themes/テーマ/ilauncher.html

○　ilauncher.html



サーバーにアップしたら、SafariでURLを打ち込む。

このサイトだったら、『http://kome-suki.net/ilauncher.html』になります。

すると、以下の画面が立ち上がります。（URLは自動で変わります）






アプリ名でリスト化されており、タップするとiPhoneに入れているアプリが起動します。

インストールされていないアプリは、Safariで新しいページが開き『ページが開けません』で終わります。

『ilauncher.html』の中身を見ると、JavaScriptを使ってアプリのスキームと呼ばれるコードでアプリを起動させているようです。

スキームが無いアプリは無理でしょうけど、以下のサイト等で色々公開されています。



iBlog

アプリのスキームを調べてみた
matuダイアリー

[iPhone]購入したアプリのURLスキームを整理してみました。iPhoneをより上手に使えるようになるために…


探せばまだまだあるかもしれません。

これの良い所は、HTMLとCSSを自分好みにいじれる点にあります。

例えばこんな事も出来ちゃう訳です。（画像は合成です）






さすがにメールとかのカウント数字は無理でしょうけど。

アプリの画像を自分で作る。

アプリのスキームを調べる。

HTMLとCSSをいじくりまわる。

面白そうですけど、面倒なんでやりません。ｗ



Safariでのページをホーム画面に置いておけば、なお便利なランチャーになりそうですね。



米が好き

【iPhone】ホーム画面に追加した時のアイコンを作成する方法




【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2
くーさん — Fri, 25 Dec 2009 19:21:07 +0000

昨日書いた記事の続きです。



前回は『フラッシュ形式』と『ポップアップ形式』のボタンを2つ設置する方法で行いましたが、画像が同じだと分かりづらいと思うので表示させる画像を分けてみました。

ソースを見ると一目瞭然ですが、画像ファイルは『wp-admin/images/media-button-image.gif』です。

これを新しく2つ作成し、画像リンクを変えるだけで簡単に表示を変えれます。



元の画像は 14×12 ですので、それに合わせて自作するも良しです。

私は只単に文字を乗せただけで作ってみました。


フラッシュ ポップアップ
アイコン 
ファイル名 media-button-image_f.gif media-button-image_p.gif


これをアップロードし、また『wp-admin/includes/media.php』の書き換えを行います。



media.php　366行目～　（2.9の場合）

_f.gif' alt='$image_title (Flash)' />
&flash=0','','scrollbars=yes,Width=650,Height=720,top=0,left=0');w.focus();" id="add_image" title='$image_title (Popup)' onclick="return true;">_p.gif' alt='$image_title (Popup)' />


結果的に、このような表示になります。






ついでに title と alt も変えてみました。

赤の太字で追加したコード（&flash=0）がありますが、これはポップアップ表示した際『Flashアップローダー』ではなく『ブラウザアップローダー』に最初から指定するコードです。

私はFirefoxを使っていて『dragdropupload』のアドオンを入れる事によって、テキストボックスにドラッグ＆ドロップ出来るので多少の時間短縮にはなります。



『動画』『音声』『メディア』は使った事無いので無視してますと書きましたが、この方法で行えば同じような事が出来ると思います。（多分ｗ）



【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法
くーさん — Thu, 24 Dec 2009 18:55:30 +0000

以前から各所で声があり、ちょっと調べてやってみました。



その声とは・・・

「WordPressの投稿画面で画像を挿入する時、一々フラッシュが立ち上がり1枚挿入したら消えてしまう。

連続で挿入する時もの凄く面倒だから、ずっと表示していて欲しい」　との事。



機会があったらやってみようと思ってましたのでやってみました。

いやー、4・5時間かかっちゃったよ。ｗ



結果的に何をしたかと言うと、

・画像挿入画面をポップアップで出す。

・1枚挿入しても、そのまま表示させる。

以上2点だけです。

それだけの為に何時間も・・・。

その何時間もかかった結晶（？）は以下より。



基本的に、画像を挿入する場合以下のような画面になります。

画像を1枚挿入する度に、この画面が消えてしまう。






別ウィンドウで出しても、結局タブなりウィンドウなりを切り替えなきゃいけないので面倒。

なもんでポップアップ表示にしてみました。



結果から言うとこんな感じになります。






画像を挿入しても、ポップアップは残ったまま。

あらステキ。ｗ

やり方は分かってみれば超簡単。

1つのファイルの2箇所を変えるだけです。



では、『wp-admin/includes/media.php』を開きます。

まずはポップアップで表示する方法。



media.php　366行目　（2.9の場合）




以上のコードが、フラッシュで表示させるコードになっています。

これを残しても良いし書き換えても良しです。

以下のコードは“残す”パターンで、2種類のボタンが並ぶようにしてます。



media.php　366行目～





赤字が追加した文です。

1つずつ説明しますと、

『scrollbars=yes』スクロールを表示するようにしています。

これが no だと、下の方が見えなくなってしまいます。

『Width=650,Height=700』ポップアップ表示した時の横幅（Width）と高さ（Height）です。

横幅は600で横スクロールが出たので、コレぐらいが丁度良いかも。

高さは好みの高さ指定をどうぞ。（ピクセル単位です）

『top=0,left=0』デスクトップにポップアップを表示した時の場所を指定しています。

上（top）、下（bottom）、右（right）、左（left）で指定出来ます。（これもピクセル単位です）



ポップアップ表示した時に、表示するページ指定も出来ます。

タブで『コンピューターから』『URLから』『ギャラリー』『メディアライブラリ』と4つに分かれており、最初は『コンピューターから』になっています。

最初から別のタブで表示させたい場合は、以下のようになります。



『コンピューターから』は変更なし。




『URLから』

&tab=type_url','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;">


『ギャラリー』

&tab=gallery','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;">


『メディアライブラリ』

&tab=library','','scrollbars=yes,Width=650,Height=700,top=0,left=0');w.focus();" id="add_image" title='$image_title' onclick="return true;">




後は1番苦労した、ポップアップを閉じない方法。



media.php　169行目～


これを

#exit;
}


コメントアウトなり削除なりをすれば良いだけです。

こ、こ、これだけに数時間も・・・・・・。orz





当然の事ながらWordPressのバージョンアップがあった場合、毎回書き換えなければいけません。

まぁ、たったコレだけの事なのでプラグインに頼る程でもないですね。



『動画』『音声』『メディア』は使った事無いので無視してます。

では、よきWordPress生活をっ！





追記

表示アイコンを変えたい場合などは、『【WordPress】記事投稿時に画像を貼るのをフラッシュではなくポップアップにする方法2』に書きましたので、合わせてどうぞ。



IE6使用者にIE8にバージョンアップしようぜと促すスクリプト
くーさん — Wed, 17 Jun 2009 20:24:20 +0000

まだまだInternet Explorer 6を使っている人は沢山います。

せっかく最新のIE8が出てるんだから、バージョンアップしましょうよ！（建前）



IE6より全然速いんですよ！（建前）



IE6だと、WEBサイトのレイアウトが崩れたりして綺麗に見れないんですよ！（半分本音）



いちいちIE6の表示チェックが鬱陶しいんですよ！（超本音）



そんな頑なまでにIE6にこだわる（？）人向けに開発されたJavaScript。

僅かなコードを入力するだけでサイトの左下に『クマー』が出て、IE8へのバージョンアップを促してくれます。

私も入れよっかなぁ。

ニコニコ動画のRSS、やっぱIE6だと崩れてるみたいだし。



左下のクマをクリックすると…。






しかしMSのIE8じゃなく、何故かフェンリル版。








BearFactory

インターネットエクスプローラー 8 推進スクリプト配布ページ




イメージマップ：複数の画像でリンクオーバーする方法
くーさん — Wed, 27 May 2009 19:38:57 +0000

最近めっきり使用頻度が少なくなってきたと思われる、イメージマップ（クリッカブルマップ）。



イメージマップとは

簡単に言うと、1枚の画像の中に複数のリンクを貼る場合に使用したりします。

例えば、右サムネの赤枠にそれぞれ違ったリンク先を指定したい時など。



で、それぞれのリンクでマウスを乗せた時、マウスオーバーで画像を差し替える方法をご紹介します。

CSSではなく、jQueryを使用します。




イメージマップを作成する方法は割合します。

今回は、四角形や楕円ではなく、多角形を使用しています。



まず『jQuery』の本体がなければ話しにならないので、以下のサイトからダウンロードします。



jQuery


そして、HTML（XHTML）内に記述するコードは以下。



HTML







imgmap">
  map" src="map.jpg" border="0" id="map" usemap="#im_imgmap" alt="イメージマップ" />

im_imgmap" id="im_imgmap">
  10,50,25,65,75,300,40,280" href="リンク先URL" title="タイトル" alt="タイトル" onmouseover="over(10)" onmouseout="out()" />





赤・青・緑の箇所は自由に変更してください。

但し、青＝青、緑＝緑は同じでなければいけません。

一応、その他の箇所も自由に変更できますが、同じコードの所は同じにしてください。



上記の例ですと、『map.jpg』が元の画像になり、リンクオーバーの画像が『map_over_10.jpg』になります。

分かり易い（？）ように、元画像は『div』タグで囲っています。



マウスオーバーする画像は1つ1つ別に用意しなければいけませんが、『map_over_**.jpg』と番号を変えるだけで各リンクに対応するようになります。



Flashで作った方が早いとか何とかありますが、Flashが使えなかったり、持っていなかったり、そこまでする必要がなかったりとかする場合にこの方法が使えると思います。



スライスで分けれれば一番楽なんですけどねー。



リンクをクリックした時に出る破線を消す方法
くーさん — Sat, 09 May 2009 06:16:24 +0000

リンクが貼られたテキストや画像をクリックすると、回りに破線が出ます。

Opera、Safari、Google Chromeはデフォルトで出ません。

これが出るのは、IE、Sleipnir、Firefox、Lunascape（WebKit時以外）です。



デザイン的にも、これを出させない為にCSSを使ってみましょう。



話しはそれますが、画像の枠線を消すのは簡単ですよね。

CSSに以下のコードを付けるだけです。



CSS

img {
  border: none;
}


これをどっかに書いておくだけで、サイト内の画像の枠線が全て消えます。



で、問題のリンク破線を消す方法です。

通常、以下の様に破線が出ます。（HOMEをクリックした時）






この破線を消すのは、CSSに以下のコードを書きます。



CSS

a:focus {
  outline: none;
}


はっはっはー、超簡単だぜー！

・・・と思ったのも束の間、このコードFirefoxには効いてもIEには全く効かないコード。

ちなみにSleipnirやLunascape（WebKit以外）にも効きません。

なん・・・だと・・・？



少々手間ですが、全てのブラウザで破線を消そうと思ったら、1つ1つのリンクに以下のJavaScriptのコードを足せば消せます。



HTML

onFocus="if(this.blur)this.blur()">リンク


一々全てのコードに貼る手間を考えると、どっちでも良いやーってな気持ちになります。

でもまぁ、ヘッダー部のメニューとかだけにするなら便利かな。





Lightbox を導入してみた
くーさん — Fri, 12 Dec 2008 17:06:21 +0000

エントリー内に画像を貼った時、大きい画像で表示さすのに 『Lightbox』 に対応させました。

正確に言えば、『Lightbox』 を元にした 『Lytebox』 。



色んなサイト見た事ある人は分かると思いますが、画像をクリックした時に 「ぶわぁ～」 っと表示されるアレですアレ。




論より証拠って事で、下の画像をクリックしてみてください。



ほら、「ぶわぁ～」 って表示されたでしょ？



従来の 『Lightbox』 だと表示されるまでに時間がかかる。

以前からそれがちょっとネックになってて導入を躊躇っていたんですが、表示速いのを見つけたんで導入しました。

これだとストレスにならずに済みますね。



導入方法は至って簡単。

以下のサイトから 『lytebox_v***.zip』 （***はバージョンNo） をダウンロード。

解凍されたフォルダ 『lytebox_v***』 の 『_v***』 を消して 『lytebox』 にする。

後はサイト内に 『ｌytebox』 フォルダをコピーするだけです。

（トップフォルダ内がお勧め？）



Lytebox – Home


次に HTML を編集。

～内に、以下のコードを付け加えましょう。



WordPress だと、テーマ内の 『header.php』 。

これで下準備は完了。



後は画像を貼ってる場所にリンクを貼るだけです。

（大きい画像とサムネ （小さい画像） が必要です。）

上の例の画像で言うと、以下のコードになります。

rel="lytebox" title="画像タイトル">
A タグに 『rel=”lytebox”』 を入れればOK。



一つ注意しなければいけないのが、ページが完全に読み込まれないと、Lytebox （Lightbox） は作動しません。

只単に別ページで大きい画像が表示されるだけです。



画像が何枚もあって、続けて表示させたい場合は以下のコード。

rel="lytebox[vacation]" title="画像タイトル">
『rel=”lytebox”』 に 『 [vacation] 』 が付きます。



このスクリプトが気に入らない人は、他にも色々あるので自分好みのを探して導入してみてはいかがでしょう。





DesignWalker

Lightboxスクリプトいろいろ

	フラッシュ	ポップアップ
アイコン
ファイル名	media-button-image_f.gif	media-button-image_p.gif