Lightbox系のワードプレスプラグインを比較＆サンプルサイト - キーワードノート
ワードプレスのプラグインで、画像をクリックした際にポップアップ表示（ふわっと浮き上がるような感じで）してくれるLightbox系のプラグインを一覧にしました。 探してみると結構な数のプラグインがあって、それぞれ動きや見た目も違います。 1つ1つインストールして確認するのも手間もかかりますので、導入しているサンプルサイトへのリンクも付け、実際の動作も確認しながら比較できるようにしてみました。 jQuery Colorbox 背景は暗くなってストライプが見えます。細かい設定で動作を調整できますが、デフォルトのままでもいい感じに動作します。 導入サイト：TOPICK WP SexyLightBox とても面白い動きで、画面上から画像が落っこちてきます。 導入サイト：フリードメインNAVI WP-Slimbox2 Plugin 背景が少し暗くなって縦から横に画像が拡大されます。 導入サイト：CMS
WordPressのLightboxプラグイン「WP jQuery Lightbox」にしてみました | 佐賀でふらふり
数多く出ているLightbox系のスクリプトですが、WordPressに設置するのはどれがいいのか悩んでいました。 これまでは「Lightbox-2 for WordPress」を使っていることが多かったんですが、カスタムフィールドに値が入るのが気持ち悪くて…。 そして今回「WP jQuery Lightbox」を使ってみているわけです。 WP jQuery Lightboxにした理由 「シンプル」 ただこれだけです。 大元の設定でイメージリンクが付くものには勝手にライトボックス効果を与えてくれるようにできるし、もちろんその逆も。 グループ化も簡単だったのでこれにしたんです。 もちろん、他のプラグインでも、もしかすると「Lightbox-2 for WordPress」でも出来たのかもしれないんですが、カスタムフィールドに… グループ化とかはちょっとだけ手間はかかるけど、それは投稿の際にや
Google Mapのレスポンシブ ウェブ デザイン対策
Googleではレスポンシブ ウェブ デザインの推奨していますので、Google Mapも画面サイズ（PC Tablet smartphone)によって表示サイズが変わると便利だと思います。 そこで今回はGoogle Mapのレスポンシブ ウェブ デザイン対策を紹介します。対策はとっても簡単で単純なことです。 Google Mapよりウェブサイトへの地図埋め込み用 HTML コードを取得すると<iframe width=”425″ height=”350″ frameborder=”0″・・・みたいなコードを取得することが出来ます。この取得したコードのwidth=”425″をwidth=”100%”に書き換えるでけです。 これでGoogle Mapが画面サイズ（PC Tablet smartphone)によって表示サイズが変わります。 次はアメブロの記事のサイズに合わせてGoogle Ma
スマートフォンでiframeが伸びる件の対策 - ambergrisの日記
Andoroid携帯でもiPhoneでも、 iframeが中身の分だけ高さとかoverflow:hiddenとか全無視して伸びるので iframe下のコンテンツに被ってるということが判明。 こことか http://javascript-memo2.seesaa.net/article/200710596.html ここを参考に http://ameblo.jp/bofb/entry-10631465099.html １．<head>～</head>の間に↓を追加して、 <script> (function(){ var _UA = navigator.userAgent; if (_UA.indexOf('iPhone') > -1 || _UA.indexOf('iPod') > -1) { document.write('<link rel="stylesheet" href="css
Android4.0とiframe
Android4.0とiframe iframe内でコンテンツを展開するとAndroid4.0でシビレルくらい様々なバグが発生します。 弊社松田の調べによると見つけただけでも以下のような不具合があるようです(Galaxy Nexus調べ)。シビレますね。 a要素に display:block を指定しても、必ずインラインになる position:fixed で配置した要素そのものがタップできない document.body.scrollTop が取得できない -webkit-tap-hightlight-color の指定が効かない ページ内のアンカーリンクが効かない ページの最下部に配置したa要素はタップはできるが、リンク遷移せず、イベントも発火しない z-indexで下に重なる要素が、pointer-events の指定が全く効かなくタップできてしまう js等で要素を位置移動しても、要
スマートフォンでのiframeを使うときに気にしておくこと
iframeをandroidとiPhoneで表示した場合の相違点 ■android iframe の表示される スクロールはできない ■iPhone ifameの表示される 2本指でスクロールする iPhoneを常時使用しているユーザーでも、2本指でスクロールすることは まずないでしょう。 使うとしたら、必ず注意書きを入れないとまずそうです。 総合すると、iframeは使えないですね… 見せ方として同様なdivタグを固定幅にして、overflow:scrollを付け加えるやり方があります。 divタグにoverflowをつける [code language="html"] <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .overbox{ width:200px; height:200px; overflow:scrol
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
