引用blockquoteタグの引用符「”」を非表示にする方法

【この記事を読むのに必要な時間は約 2 分です。】

自分のブログに参考になる文章を引用することは多い。通常、長文を引用する場合は、<blockquote>タグを用いる。このタグを使用するとデフォルトで、引用符「”」が表示される。引用部分は、その文章をハイライトできれば足りるので、引用符「”」を非表示にしたい。

引用部分の装飾

CSSによる装飾は多くの方が紹介しているので、詳細は省略する。
私は、引用部分を「角丸枠線、色付き背景」でカスタマイズした。カスタマイズするCSSファイルには、デフォルトでは<blockquote>について何も指定されていないことが多い(要確認)ので、そのまま、以下のようにCSSファイルに追記した。

引用符「”」を非表示にする

引用符「”」を非表示にする方法は、下記ハイライトした行番号12~14を追記すれば良い。これで、引用符は非表示になる。

/*blockquoteの装飾*/
blockquote{
   -moz-border-radius: 20px;    /* Firefox */
   -webkit-border-radius: 20px; /* Safari,Chrome */
   border-radius: 20px;         /* CSS3 */

   border: 1px green solid;     /* 枠線の装飾 */
   background-color: #faf0e6;   /* 背景色 */
   padding: 10px;         /* 枠と文字の距離 */
}
/* 引用符「”」を非表示 */
blockquote:before {
    content: none;        /* 引用符「”」を非表示に */
}

「”」を非表示にした<blockquote>のサンプル

簡単だが、以上。

Related Posts Plugin for WordPress, Blogger...

もし良ければお願いします。

  • このエントリーをはてなブックマークに追加

良かったらフォローお願いします。