[Js] レスポンシブ&スマホ向けな「Image LightBox」の設置方法

ImageLightbox

画像をポップアップ表示するLightbox系の「Image Lightbox」は、レスポンシブデザイン対応でタッチフレンドリーな操作が可能です。様々な表示方法があり、スワイプで画像を切り替えることができるのでスマホ対応サイトなどにも幅広く使用できます。(表示デモ

実装はかなり簡単で、1つのjsファイルとjQueryをヘッダーで読み込んで、CSSを追加するだけなので、FC2などの無料ブログサービスにも最適です。

ここでは一例としてFC2ブログへの実装を紹介しています。

続きを読む →

[グラフ] リストタグで簡単にパイチャートを実装できるPizza Pie Charts

Pizzachart

リストタグを入力するだけで、ビジュアル感のあるパイチャート(円グラフ)を貼り付けることができるPizza Pie Charts。マウスで%がポップアップするアクション付き。

画像を貼り付けるのではなく、動きのあるグラフが欲しい場合に最適。
導入も簡単(スクリプトをアップロードしてヘッダーで読み込み、HTMLタグを入力するだけ)なのでおすすめ。

[WP] 「Lightbox Plus ColorBox」を使って、YouTube動画をポップアップ表示させる

テキストリンクや画像からのリンクを開くとYouTube動画をポップアップ再生・・・こういう風にするには、Lightbox系のプラグインで行えます。

とにかくすぐに導入するなら「Lightbox 2」と「WP Video Lightbox」がお手軽です。Lightbox 2は設定が要らず、WP Video LightboxはYouTubeのリンクタグに rel=”wp-video-lightbox” を記入するだけ。ですが、WP Video Lightboxは動画の大きさを設定できないようなので、その点ではイマイチなプラグインです。

というわけで、Lightbox系のプラグインで主流となっているのが「Lightbox Plus ColorBox」です。若干の設定が必要になりますが、デザインや大きさが細かく設定できるのでこだわりたい人には最適でしょう。

続きを読む →