figure+

この投稿は4年半前の記事です。 情報が古くなっている可能性があるので、その点ご了承ください。
2013 年 3 月 28 日 1,493日前)
1,886文字 (読了時間4分)

SPONSORED LINK

画像につけられるキャプションというのはなかな味わい深く、つまらない写真でもクスリと笑わせることができてしまいます。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

 

フォローしてください

ここで会ったのもなにかの縁。
高橋文樹.comの最新情報を見逃さないためにもフォローをお願いします。
めったに送らないメルマガもあります。

SPONSORED LINK

この記事について

この記事はが2013 年 3 月 28 日にプログラミングの記事として公開しました。

高橋先生の電子書籍

高橋先生の電子書籍

Amazonで電子書籍も買えます。

好きな言葉

許そう、だが忘れんぞ

— エミール・クストリッツァ

高橋先生の処女作

『途中下車』高橋文樹

2001年幻冬舎NET学生文学大賞受賞作です。

Web制作やります

Web制作やります

Web制作のご依頼は株式会社破滅派へ

不定期メルマガ

高橋文樹.comでは、不定期でニュースレターを配信しています。滅多に送らないので是非購読してください。

高橋文樹.comではプライバシーポリシーに準じて登録情報を取り扱います。