引用タグの引用符をcssで完璧にデザインする方法

引用タグの引用符「”」をcssで表現する方法をメモ。

ブログだと引用タグ（blockquote）を使うことは多いんじゃないかなと思いますが画像でデザインしているサイトを多くみます。
ですがレスポンシブサイトを作成するときはcssで作ってしまったほうが利点が大きいと思います。

引用タグの引用符をcssで完璧にデザインする方法

blockquote{
    position: relative;
    margin: 0 1em 1.5em;
    padding-top: 45px;
　　padding-right: 15px;
　　padding-bottom: 15px;
　　padding-left: 15px;	
    border: 2px solid #CCCCCC;
    background-color: #F2F2F2;
    z-index: 1;
}
 
blockquote p{
    position: relative;
    z-index: 3;
}
 
blockquote:before{
    content: "“";
    font-size: 1000%;
    line-height: 0.8em;
    font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif;
    color: #CCCCCC;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
blockquote:after{
    content: "”";
    font-size: 1000%;
    line-height: 0em;
    font-family: 'Times New Roman' ,"ＭＳ Ｐゴシック" ,sans-serif;
    color: #CCCCCC;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
}

これで

paddingなどはお好みに合わせて調節してくださいね。
それではまたxD

Tweet

関連記事:

Font Awesomeで簡単にアイコンをデザインに組み込もう【フラットデザインに最適】 wordpressにいいねボタン設置方法 wordpressのメニューで外部リンクを新しいウィンドウで開く　target=”_blank”を設定する方法 cssのpositionでdivの範囲外を指定した場合に見切れて表示されない問題の修正点 cssのみでスマホサイトのリンク矢印を作成する方法 clearfixを使用しているとwordpressの下部に空白ができるのを修正する方法