エキサイトブログの「右クリック禁止」ブログパーツを活用してみる(3)
エキサイトブログの「右クリック禁止」ブログパーツを活用してみる(1)
エキサイトブログの「右クリック禁止」ブログパーツを活用してみる(2) の続きです
「facebox」って意外と高機能で画像だけでなく、オブジェクトやdivで囲んだブロック要素、Ajaxで別ページとかもポップアップできるみたいです。
画像については右クリック禁止のブログパーツを導入すれば自動的に機能します。
Youtubeやニコ動、NAVERまとめなどエキブロの記事中に貼り付け可能なオブジェクトもdivを使ってポップアップ可能っす。
テキストなどもポップアップ可能で、やり方はYoutubeをポップアップさせるよりどっちかというと簡単です。
ソースをみる
※上のボタンをクリックするとCSSのソースコードが表示されます
ポップアップで表示されるCSSは上のボタンを表示させるためのものです。
CSS3を使っているのでIE8以下だと残念な表示になっちゃいますが・・
これはボタンのリンク部分に「href="#source" rel="facebox"」、ポップアップする部分に「div id="source" style="display:none;"」を追加
id要素に「source」って語句を使ってますがコレは任意でOK。1記事中に複数ポップアップさせたいときは末尾に数字を入れとけばなんとかなりそうです。
一応、ポップアップされるんだけど、テキストが右クリックで保存できない(右クリ禁止なので当たり前ですが)ので範囲選択して「ctrl+c」で保存してください。
エキサイトブログの「右クリック禁止」ブログパーツを活用してみる(2) の続きです
「facebox」って意外と高機能で画像だけでなく、オブジェクトやdivで囲んだブロック要素、Ajaxで別ページとかもポップアップできるみたいです。
画像については右クリック禁止のブログパーツを導入すれば自動的に機能します。
Youtubeやニコ動、NAVERまとめなどエキブロの記事中に貼り付け可能なオブジェクトもdivを使ってポップアップ可能っす。
テキストなどもポップアップ可能で、やり方はYoutubeをポップアップさせるよりどっちかというと簡単です。
ソースをみる
※上のボタンをクリックするとCSSのソースコードが表示されます
ポップアップで表示されるCSSは上のボタンを表示させるためのものです。
CSS3を使っているのでIE8以下だと残念な表示になっちゃいますが・・
これはボタンのリンク部分に「href="#source" rel="facebox"」、ポップアップする部分に「div id="source" style="display:none;"」を追加
id要素に「source」って語句を使ってますがコレは任意でOK。1記事中に複数ポップアップさせたいときは末尾に数字を入れとけばなんとかなりそうです。
一応、ポップアップされるんだけど、テキストが右クリックで保存できない(右クリ禁止なので当たり前ですが)ので範囲選択して「ctrl+c」で保存してください。
by killingmoon581
| 2012-04-24 12:31
| エキサイトブログ