Facebook
RSS Feed
Mar 5, 2012

WordPress初心者講座・Q&A:写真をクリックするとポップアップで拡大表示するにはどうしたら良いですか?

こんなご質問をいただきました。

写真をクリックするとポップアップで拡大表示するようにしたいです。
どうすれば出来ますか?

いわゆるlightbox系エフェクトと言うやつですかね。
これは「Fancybox」というプラグインを使うとスーパー簡単です。

使い方の説明は以下の通りです。

写真を拡大ポップアップ表示する方法(作業時間1分)

ダッシュボード > プラグイン > 新規追加

って進んで「FancyBox」を検索します。
出て来たら「いますぐインストール」ボタンを押します。
これで準備はOKです。

記事本文の写真を貼たい部分には以下のような感じで書きます。

<a href=”http://hogehoge.com/wp-content/uploads/ほげほげ大.jpg(拡大表示したい画像のURL)”><img src=”http://hogehoge.com/wp-content/uploads/ほげほげ小.jpg(本文に表示したいサムネイル画像のURL)” alt=”ほげほげの写真(キャプション)” /></a>

*<>はホントは半角でね!

サムネイル画像にでっかい画像へのリンクを貼るだけです。
あーら簡単!

他にも似たようなプラグインはいっぱいあって、
ポップアップさせつつスライドショーにしたりとか、
ホワーって拡大する動きがにゅるーんってやつとかにょきーんってやつとかぐわしってやつとか、
探すと楽しいのが色々ありますよ。

Posted in Blog, WordPress初心者講座Comments Closed 

関連記事

今月の人気のワードプレステンプレートBEST 3

WordPressテーマ(スマホ対応レスポンシブデザイン)「Slauson」
公式サイト/マガジン/ビジネス・企業
WordPressテーマ(スマホ対応レスポンシブデザイン)White Studio
ビジネス・企業/コーポレートサイト/公式サイト
WordPressテーマ(スマホ対応レスポンシブデザイン)「Pantomime」
ギャラリー・ポートフォリオ / 公式サイト