画像マウスオーバーでキャプションを表示

メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にその設定したテキストが表示されます。
今回、キャプションをあらかじめ非表示にしておいてマウスオーバーすると表示されるような実装をしてみました。プラグインを探してみたのですがいい感じのものが見つけれなかった。(ご存知であれば、ご教授いただければと)
まずはキャプションの表示のされ方
ショートコードは以下のようなフォーマットになります。
[caption id="attachment_25" align="alignnone" width="300"] <a href="画像URL"> <img src="画像URL" alt="キャプション" width="画像幅" height="画像高" class="size-medium wp-image-[id]" /> </a> キャプション [/caption]
このショートコードからデフォルトでは以下のように出力されます。
<div id="attachment_[id]" style="width: [画像幅+10px]" class="wp-caption alignnone"> <a href="画像URL" data-slb-group="66" data-slb-active="1" data-slb-internal="0"> <img src="画像URL" alt="キャプション" width="画像幅" height="画像高" class="size-medium wp-image-[id]" /> </a> <p class="wp-caption-text">キャプション</p> </div>
3.9からはHTML5対応され、以下のように出力することも可能になりました。
<figure id="attachment_[id]" style="width: [画像幅];" class="wp-caption alignnone"> <a href="画像URL" data-slb-group="66" data-slb-active="1" data-slb-internal="0"> <img src="画像URL" alt="キャプション" width="画像幅" height="画像高" class="size-medium wp-image-[id]" /> </a> <figcaption class="wp-caption-text">キャプション</figcaption> </figure>
figureタグの説明と対応ブラウザのバージョンはこちら HTML <figure> Tag
キャプションショートコードをHTML5対応にする
テーマによっては、(functions.phpなどで)追加してくれているものが増えてきています。
追加する場合は、finctions.phpに以下を追加して下さい。
add_action( 'after_setup_theme', 'my_theme_support'); function my_theme_support(){ add_theme_support( 'html5', array( 'caption', )); }
+10pxの余白を除去
キャプション挿入のショートコードを使用した際に画像の右側に10pxついてしまうのでつけないようにしました。気になるようであれば、以下そのまま子テーマのfunctions.phpに追記してください。
function remove_caption_padding( $width) { return $width - 10; } add_filter( 'img_caption_shortcode_width', 'remove_caption_padding');
本題ですが、2パターン試してみました。
それぞれデモを用意してので試してみて下さい。
1.画像をずらしてキャプションを挿入
画像にマウスオーバーすると全体が上にスライドしてキャプションが見えるようになります。デモ
/* caption.css */ .wp-caption { position: relative; overflow: hidden; } .wp-caption p.wp-caption-text { background-color: #111; color: #EEE; padding: 5px 10px; margin: 0px; }
// caption.js jQuery(document).ready(function($) { $('div.wp-caption').each(function(i) { var img_ = $('img', this); var img_height = img_.attr('height'); var p_height = $('p', this).outerHeight(); $(this).height(img_height); $(this).hover(function() { img_.animate({marginTop : -p_height}, 500); }, function() { img_.animate({marginTop : '0'}, 500); }); }); });
2.画像上にキャプションを挿入
画像にマウスオーバーすると、画像上にキャプションを表示します。デモ
/* caption.css */ .wp-caption { position: relative; overflow: hidden; } .wp-caption p.wp-caption-text { background: none repeat scroll 0 0 #111111; color: #EEE; opacity: 0.8; padding: 5px 10px; margin: 0; }
// caption.js jQuery(document).ready(function($) { $('div.wp-caption').each(function(i) { var p_ = $('p', this); var img_ = $('img', this); var img_height = img_.attr('height'); var p_height = $('p', this).outerHeight(); $(this).height(img_height); $(this).hover(function() { p_.animate({marginTop : -p_height}, 500); }, function() { p_.animate({marginTop : '0'}, 500); }); }); });
実装方法
以下は、caption1.cssとcaption1.jsをそれぞれテーマフォルダ下/cssフォルダ、/jsフォルダに配置したファイルを読み込む例です。functions.phpに追記して下さい。独自のCSSやJSを読み込む
CSSの方は、中身をstyle.cssに追加する方法でもいいです。
function wp_caption_scripts() { wp_enqueue_style( 'caption-slide-css', get_stylesheet_directory_uri() . '/css/caption1.css', false, null ); wp_enqueue_script( 'caption-slide-js', get_stylesheet_directory_uri() . '/js/caption1.js', null, null, true ); } add_action( 'wp_print_scripts', 'wp_caption_scripts');
関連記事
-
-
テーブル実装プラグイン「TablePress」 + レスポンシブ対応
「TablePress」は、WordPressにテーブルを実装できるプラグインです。専用のレスポンシブ化のプラグインもリリースされています。ダウンロード デモ (PCの場合はブラウザの幅狭めてみたり
-
-
投稿タイトル(entry-title)を非表示にする
表題通り「投稿タイトルを表示しない」ことは、"投稿ページ"ではあまりないと思いますが、"固定ページ"では意外とあったりします。 編集画面でTitleを入力しないでおけば、それで済むのですが、ペー
-
-
「タグクラウド」ウィジェット カスタマイズ
タグクラウドは、管理画面ではあまりカスタマイズできません。必要であれば、フィルターフックやプラグインを用いて表示設定や概観の変更を行うことができます。 目次 出力をカスタマイズ 各タグの
-
-
Twenty Twelve 投稿日・投稿者を非表示に
TwentyTwelveのちょっとした部分をカスタマイズする方法を紹介していきます。 また、子テーマで出力部分を変更する際に、翻訳が必要な部分//_()の部分がでてきますので、以下の投稿も参考に
-
-
プラグイン関連のJSやCSSの読み込みをフィルター
プラグインをインストールしていくとheadやfooter内がCSSやJSで溢れていきます。できるだけ、自分で書けるものに関しては、余計なコールが少なくなるので可能な場合はそうしていますが(そうもいかず
-
-
新年早々やらかした
あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ
-
-
テーマ 「Responsive」 カスタマイズ
デモ | ダウンロード 目次 投稿日 非表示 作成者 非表示 "Responsive Theme powered by WordPress" 削除 投稿日 非表示 オリ
-
-
ナビゲーションメニューに検索フォームを追加
メニュー内に検索フォームを追加したいという問い合わせをいただいたので試してみました。 メニューのつくられかた まずは、WordPressでメニューがつくられる手順を説明します。 箱をつく
-
-
「最近のコメント」ウィジェットをカスタマイズ
「最近のコメント」ウィジェットは、サイトに投稿されたコメントを新しい日付順に表示してくれます。件数も「ウィジェット」ページで設定できます。(管理画面の「外観」→「ウィジェット」) (削除
-
-
Tumblrの投稿をウィジェットに表示できる「Tumblr Widget」
このブログでは、サイドバーウィジェットに「Tumblr」に投稿したブックマーク一覧を表示させています。プラグインは「Tumblr Widget」を使用しています。ダウンロード 「This plugi
Comment
WordPress | 画像マウスオーバーでキャプションを表示
メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にそ... http://t.co/3nzrJDbAqf