LightBox風ポップアップ表示をアメブロに組み込む方法～YOUTUBE動画、メールフォーム～
アメブロでテキストリンク、画像リンクなどをクリックした際にLightBox風のポップ
アップ画面でYOUTUBEなどの画像やメールフォーム、あるいはあなたの写真ライブラリ
などをスタイリッシュに表示することができる方法を紹介します。
この目的を果たすために「CeeBox」というスクリプトを利用することができます。
アメブロでこのスクリプトを動かすには以下の各コードをプラグインに書き込んでおく
必要があります。
【１】アメブロでJavaScriptを動かすためのコード
以下のコードをプラグインに書き込みます。
------------------------------------------------------
<script type="text/javascript">
(function() {
var codes = document.body.innerHTML.match(/<pre [\w\s:;"=]*class="?eval"?[\w\s:;"=]*>((.|\n)*)<\/pre>/gi);
if (codes == null) return;
for (var i = 0; i < codes.length; i++) {
eval(codes[i].replace(/<\/pre>/i, "").replace(/<pre [\w\s:;"=]*class="?eval"?[\w\s:;"=]*>/i, ""));
}
})();
</script>
------------------------------------------------------
【２】CeeBoxを動かすためのコード
①「CeeBox」スクリプトの入手先はこちらのサイトです。
上記のテキストリンクをクリックいただくと該当ファイル（圧縮）をダウンロード
することができますので、適当な場所に保存後、解凍して下さい。
②解凍したファイルを、あなたのサーバー上にアップロードしてURLを控えて
おいて下さい。
③アメブロのプラグインに以下のコードを書き込んでおきます。
------------------------------------------------------
<link rel="stylesheet" href="ceebox.cssのURL" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.3.2.jsのURL"></script>
<script type="text/javascript" src="jquery.swfobject.jsのURL"></script>
<script type="text/javascript" src="jquery.ceebox.jsのURL"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".class名").ceebox();
});
</script>
------------------------------------------------------
※各スクリプトのURLは手順１．でアップロードした
際に控えておいたURLを入力します。
※".class名"の部分には、例えば".cbox"などの任意の
クラス名を入力します。
上記【１】【２】の設定が済んだらアメブロでポップアップ表示を行う準備は完了です。
それでは、早速、いくつかのサンプルでポップアップ表示をしてみます。
＜アメブロでYOUTUBE動画をポップアップ表示＞
テキストリンクの場合、以下のように記述します。
---------------------------------------------------
<a class="class名" href="http://www.youtube.com/watch?v=*****" title="タイトル" >テキスト</a>
---------------------------------------------------
ceeboxの設定でclass名をcboxとした場合には、
---------------------------------------------------
<a class="cbox" href="http://www.youtube.com/watch?v=*****" title="タイトル" >テキスト</a>
---------------------------------------------------
YOUTUBE動画サイトからポップアップ表示したい動画を探してきて、
"http://www.youtube.com/watch?v=*****"の部分に書き込みます。
今回、岡村孝子さんの名曲「夢をあきらめないで」のYOUTUBE動画を使って実例を
示しますね。
以下のテキストリンクをクリックしてみて下さい。
【夢をあきらめないで～岡村孝子】
あるいは、以下のサムネイル画像をクリックしてもポップアップ表示でYOUTUBEが再生されます。
＜アメブロでメールフォームをポップアップ表示＞
基本的に記述は上記のYOUTUBEの場合と同じように記述します。
---------------------------------------------------
<a class="class名" href="表示したいメールフォームのURL" title="タイトル" >テキスト</a>
---------------------------------------------------
ceeboxの設定でclass名をcboxとした場合には、
---------------------------------------------------
<a class="cbox" href="表示したいメールフォームのURL" title="タイトル" >テキスト</a>
---------------------------------------------------
メールフォームとして無料でありながらも広告表示がなく、また商用利用も可能な
プロフェッショナルなフォームがありますので、それをまずは紹介しておきます。
それは「mailformPRO」というものです。
詳細は以下の姉妹ブログで紹介していますので参照下さい。
アメブロカスタマイズ－無料・高機能・商用利用可能なMailformPRO2
その「mailformPRO」をポップアップ表示してみます。
以下のテキストリンクをクリックしてみて下さい。
ペガサスへの問い合わせ
その他のメールフォームであっても、設置したURLを上記の記述に従って書いておく
ことでceeboxで同じようにポップアップ表示させることができます。
メルマガ購読フォーム、問い合わせフォームなどをポップアップ表示させると、
他のサイトとは違ったインパクトも与えられますし、効果も期待できます。
これを機会に、あなたもアメブロヲカスタマイズしてポップアップ表示を
活用されてみては如何でしょうか？
アップ画面でYOUTUBEなどの画像やメールフォーム、あるいはあなたの写真ライブラリ
などをスタイリッシュに表示することができる方法を紹介します。
この目的を果たすために「CeeBox」というスクリプトを利用することができます。
アメブロでこのスクリプトを動かすには以下の各コードをプラグインに書き込んでおく
必要があります。
【１】アメブロでJavaScriptを動かすためのコード
以下のコードをプラグインに書き込みます。
------------------------------------------------------
<script type="text/javascript">
(function() {
var codes = document.body.innerHTML.match(/<pre [\w\s:;"=]*class="?eval"?[\w\s:;"=]*>((.|\n)*)<\/pre>/gi);
if (codes == null) return;
for (var i = 0; i < codes.length; i++) {
eval(codes[i].replace(/<\/pre>/i, "").replace(/<pre [\w\s:;"=]*class="?eval"?[\w\s:;"=]*>/i, ""));
}
})();
</script>
------------------------------------------------------
【２】CeeBoxを動かすためのコード
①「CeeBox」スクリプトの入手先はこちらのサイトです。
上記のテキストリンクをクリックいただくと該当ファイル（圧縮）をダウンロード
することができますので、適当な場所に保存後、解凍して下さい。
②解凍したファイルを、あなたのサーバー上にアップロードしてURLを控えて
おいて下さい。
③アメブロのプラグインに以下のコードを書き込んでおきます。
------------------------------------------------------
<link rel="stylesheet" href="ceebox.cssのURL" type="text/css" media="screen">
<script type="text/javascript" src="jquery-1.3.2.jsのURL"></script>
<script type="text/javascript" src="jquery.swfobject.jsのURL"></script>
<script type="text/javascript" src="jquery.ceebox.jsのURL"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".class名").ceebox();
});
</script>
------------------------------------------------------
※各スクリプトのURLは手順１．でアップロードした
際に控えておいたURLを入力します。
※".class名"の部分には、例えば".cbox"などの任意の
クラス名を入力します。
上記【１】【２】の設定が済んだらアメブロでポップアップ表示を行う準備は完了です。
それでは、早速、いくつかのサンプルでポップアップ表示をしてみます。
＜アメブロでYOUTUBE動画をポップアップ表示＞
テキストリンクの場合、以下のように記述します。
---------------------------------------------------
<a class="class名" href="http://www.youtube.com/watch?v=*****" title="タイトル" >テキスト</a>
---------------------------------------------------
ceeboxの設定でclass名をcboxとした場合には、
---------------------------------------------------
<a class="cbox" href="http://www.youtube.com/watch?v=*****" title="タイトル" >テキスト</a>
---------------------------------------------------
YOUTUBE動画サイトからポップアップ表示したい動画を探してきて、
"http://www.youtube.com/watch?v=*****"の部分に書き込みます。
今回、岡村孝子さんの名曲「夢をあきらめないで」のYOUTUBE動画を使って実例を
示しますね。
以下のテキストリンクをクリックしてみて下さい。
【夢をあきらめないで～岡村孝子】
あるいは、以下のサムネイル画像をクリックしてもポップアップ表示でYOUTUBEが再生されます。
＜アメブロでメールフォームをポップアップ表示＞
基本的に記述は上記のYOUTUBEの場合と同じように記述します。
---------------------------------------------------
<a class="class名" href="表示したいメールフォームのURL" title="タイトル" >テキスト</a>
---------------------------------------------------
ceeboxの設定でclass名をcboxとした場合には、
---------------------------------------------------
<a class="cbox" href="表示したいメールフォームのURL" title="タイトル" >テキスト</a>
---------------------------------------------------
メールフォームとして無料でありながらも広告表示がなく、また商用利用も可能な
プロフェッショナルなフォームがありますので、それをまずは紹介しておきます。
それは「mailformPRO」というものです。
詳細は以下の姉妹ブログで紹介していますので参照下さい。
アメブロカスタマイズ－無料・高機能・商用利用可能なMailformPRO2
その「mailformPRO」をポップアップ表示してみます。
以下のテキストリンクをクリックしてみて下さい。
ペガサスへの問い合わせ
その他のメールフォームであっても、設置したURLを上記の記述に従って書いておく
ことでceeboxで同じようにポップアップ表示させることができます。
メルマガ購読フォーム、問い合わせフォームなどをポップアップ表示させると、
他のサイトとは違ったインパクトも与えられますし、効果も期待できます。
これを機会に、あなたもアメブロヲカスタマイズしてポップアップ表示を
活用されてみては如何でしょうか？