引用文（blockquote 要素）を画像を使って装飾

CATEGORY: HTML/CSS | TAG: ショートコード

2013年4月26日

引用文として定義するには blockquote 要素を使用する。

blockquote 要素はブロックレベル要素だが、直接インライン要素をやテキストを含むことができないので、p 要素などの他のブロックレベル要素を含まなければならない。（HTML5ではブロックレベル要素とインライン要素の分類はない）

WordPress では、blockquote 要素を記述すると自動的に p 要素などで内容がマークアップされる。

cite 属性で引用もとの URI を明示しておくとよい。
<blockquote cite="http://example.com">
書籍などの場合は、ISBN コードを指定（urn:isbn: を使用）できる。
<blockquote cite="urn:isbn:0-xxxx-xxxx-x">
title 属性で引用もとのタイトルや書名、補足情報などを指定することもできる。

画像を使って装飾

次のような2つの透過 PNG 画像を用意する。

左の画像を blockquote 要素を囲む div 要素の背景画像に、右の画像を子要素である blockquote 要素の背景画像に指定して、引用文が2つの画像で囲まれるように CSS で設定する。

<div class="bq" cite="http://example.com">
  <blockquote class="imgbq">
    ここに引用文が入る
  </blockquote>
</div>

それぞれの要素にクラスを指定して background プロパティで画像を呼び出し、繰り返しなしでそれぞれ左上、右下に指定する。

div.bq {
  margin: 10px;
  padding: 0;
  background: url(images/quote_begin-trans.png) no-repeat top left;
}

blockquote.imgbq {
  padding: 1.0em;
  font-size: 12px; font-size: 1.2rem;
  line-height: 1.2em;
  color: #333;
  background: url(images/quote_end-trans.png) no-repeat bottom right;
  border: 1px solid #CCC;
}

ショートコードの作成（WordPress の場合）

毎回 div 要素と blockquote 要素にクラスを指定して記述するのが面倒なので、ショートコードにして［imgbq cite=”http//…” title=”test”］引用文［/imgbq］で呼び出せるようにするため、以下を functions.php に記述。

function imgbq_func($atts, $content = null) {
  extract(shortcode_atts(array(
    'cite' => '',  //cite 属性
    'title' => '',  //title 属性
    'divclass' => 'bq',  //クラスを指定しなければデフォルトのクラスを使用
    'bqclass' => 'imgbq',
  ), $atts));
  if(isset($content)) {
    $html = '<div class="'. esc_attr($divclass) . '">';
    $html .= '<blockquote class="' . esc_attr($bqclass) . '" cite="'. esc_attr($cite). '" title="'. esc_attr($title). '"><p>';
    $html .= $content.'</p></blockquote></div>';
    return $html; 
  }else{
    return '';
  }
}
add_shortcode('imgbq', 'imgbq_func');

以下を記述した場合の表示例（実際には”［ ” は半角で記述）
［imgbq cite=”http://wpdocs.sourceforge.jp/” title=”ショートコード API”］WordPress 2.5で新しく追加されたショートコード API機能は、コンテンツ記事投稿に用いるマクロコードの作成する機能を備えています。［/imgbq］

WordPress 2.5で新しく追加されたショートコード API機能は、コンテンツ記事投稿に用いるマクロコードの作成する機能を備えています。

Web Design Leaves