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

メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にその設定したテキストが表示されます。

今回、キャプションをあらかじめ非表示にしておいてマウスオーバーすると表示されるような実装をしてみました。プラグインを探してみたのですがいい感じのものが見つけれなかった。(ご存知であれば、ご教授いただければと)

まずはキャプションの表示のされ方

ショートコードは以下のようなフォーマットになります。

[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');
  • このエントリーをはてなブックマークに追加

関連記事

「Contact Form 7」 メッセージの送信に失敗~

この修正はWordPress 3.5で行われているようです。(~3.4.2) Contact Form 7で以下のエラーメッセージが出る場合は、確認してみて下さい。 「メッセージの送信に失敗

no image

Google+ プラスワン(+1)ボタンの設置

Google+の+1ボタンの設置はプラグインを使用しなくても容易に実装できるようです。ソーシャルボタン設置のプラグインはこちらにいちおうまとめています。 プラスワン(+1)ボタンの設置コード 公式

新年早々やらかした

あけましておめでとうございます。 タイトルどおり、新年早々やらかしてしまいましたのでご報告まで。どうやらかしたかというと、確認用サイトとこのブログを間違えてしまいWordpress 3.5にアップグ

Twenty Fourteen "コメントをどうぞ"の非表示と変更方法

Twenty Fourteenでは、デフォルトで投稿ページと各アーカイブページの各投稿のメタ情報欄に「コメントをどうぞ」というコメントフォームへのリンクが設置されます。 それぞれ、コメントが0件の場

"コメントを残す" 削除・文言を変更する方法

コメントフォームに表示される「コメントを残す」はWordPress標準で翻訳される要素です。テーマ側でカスタマイズしていない限り表示されます。 ここでは、この要素を削除したり、文言を変更する方法を紹

Twenty Ten カスタマイズ

Twenty Tenのカスタマイズについてのまとめです。 目次 コンテンツナビゲーション 非表示 「投稿日」を非表示 「作成者(投稿者)」を非表示 "コメントをどうぞ"("leave a

独自のCSSやJSを読み込む

WordPressで、プラグインではなく自作したりダウンロードしてきたCSSやJS(プラグイン)を読み込んだりするケースがあると思います。今回は、その際のCSSやJSファイルの使用方法をまとめてみまし

no image

「最近の投稿」ウィジェット カスタマイズ

目次 ウィジェットを削除 標準の設定 特定のカテゴリーに属する投稿を除外 カスタマイズ プラグイン 「最近の投稿」ウィジェットを削除 「最近の投稿」ウィジェット

Twenty Fourteen 「投稿者」を非表示

TwentyFourteenでは、シングルページやアーカイブページにそれぞれ「投稿者」が表示されます。投稿者を非表示にさせる方法を投稿してみます。表示させる場合は、以下を参考に表示名などを変更してみて

Google Code Prettifyを使用してソースコードを表示をしてくれる「Prettify Code Syntax」

Prettify Code Syntaxは、WordPressでGoogle Code Prettifyを使用してソースコードを表示してくれるプラグインです。 プラグインダウンロード Google

Comment

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

    メディアをアップロードした際に、「キャプション」項目にテキストを設定された画像を挿入した場合はキャプションショートコードが生成され、ページ内の各画像下にそ... http://t.co/3nzrJDbAqf

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

PAGE TOP ↑