fbpx

メニュー

Wordfigure+

この投稿は 5年半 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。

画像につけられるキャプションというのはなかな味わい深く、つまらない写真でもクスリと笑わせることができてしまいます。boketeなんかはその極みといった感じでしょうか。

html5からfigure要素とfigcaption要素というのが追加され、まさにこの画像+キャプション芸のためのマークアップが爆誕しました。

WordPressでも画像を挿入した際にキャプションを入れることができるのですが、キャプション付きの画像を挿入した際のマークアップはdivになってしまいます。これはお洒落じゃないですねー。よくないです。

WordPressのキャプションはwp_captionというショートコードで実現されていますが、このショートコードは内部にフィルターを用いています。このため、さくっと乗っ取りが可能です。

/**
 * キャプションを上書き
 * @param string $markup 空文字が渡ってきます
 * @param array $attr ショートコード属性値
 * @param string $content imgタグやaタグ
 * @return string
 */
function _my_caption_shortcode($string, $attr, $content = null) {
     extract(shortcode_atts(array(
          'id'     => '',
          'align'     => 'alignnone',
          'width'     => '',
          'caption' => ''
     ), $attr));
     if ( 1 > (int) $width || empty($caption) ){
          return $content;
     }

     if ( $id ) $id = 'id="' . esc_attr($id) . '" ';

     return '<figure ' . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
     . do_shortcode( $content ) . '<figcaption class="wp-caption-text">' . $caption . '</figcaption></figure>';
}
add_filter('img_caption_shortcode', '_my_caption_shortcode', 10, 3);

最後のreturnのところはもともとの関数img_caption_shortcodeからパクった部分で、これをdivとpからfigureとfigcaptionに変えただけです。

これで皆さんのブログもちょっとお洒落なマークアップに変わりました。よかったですね。ただし、見映えはなにも変わりませんし、figureとfigcaptionだからといって特にどうこうなるわけでもありません。flipboardなんかはfigureとfigcaptionを積極的に見ていくらしいですが、divで包んでもぶっこ抜いていきますしね。

ePub 3とかはHTML5を採用しているので、たとえば教科書で「図1を参照」とか書いてあるページから画像が溢れちゃった場合にfigureでマークアップしてリンクしておけばすぐ見られるとか、そういう機能が実装されるかもしれません。

そんなわけで、やったところであまり変わりませんが、先生は、私の下着に薔薇の花の刺繍のあることさえ、知らないという感じでこっそりマークアップお洒落してみてください。

女生徒 (角川文庫)

女生徒 (角川文庫)書籍

作者太宰 治

クリエーター梅 佳代

発行角川グループパブリッシング

発売日2009 年 5 月 23 日

カテゴリー文庫

ページ数279

ISBN4041099153

Supported by amazon Product Advertising API

すべての投稿を見る

高橋文樹ニュースレター

高橋文樹が最近の活動報告、サイトでパブリックにできない情報などをお伝えするメーリングリストです。 滅多に送りませんので、ぜひご登録お願いいたします。 お得なダウンロードコンテンツなども計画中です。