おーとえすとさいと

「おーとえす」が「サイト」を作ったり更新したりしてる時に思う事を書いていければ良いなと思います

*

blockquoteタグをCSSだけで格好良いデザインにする【画像不要】

      2013/01/31


こんにちは、面倒臭がりです。

自分は面倒臭がりなので、ちょっとデザインをいじりたいだけの時に画像を使うのとか無理なんです。面倒なんです。
そんな自分にぴったりな画像を使わないCSSのみのカスタマイズで、blockquoteタグを良い感じにデザインしてみたので、いくつかそのサンプルコードとか紹介したいなと思います。

これを読んでる方も面倒臭がりかもしれませんが、多分コピペで使えるはずなので「コピペも面倒だけど、、コピペならやったるか。。面倒くせぇ。。」って呟いたりしながら使ってみてください。あ、でも文字サイズとかmargin、paddingとか調整しないといけないかもです。。面倒臭くてごめんなさい。。。

サンプルコードの概要とか

先に少しだけ説明しておくと、今回はcssで疑似要素とか言われている「:after」とか「:before」とかを使う方法です。サンプルコードはダブルクリックすると全てが選択されるので、その後でコピーして下さい。普通に選択してコピペしない方が良いです。

あと、少し本題からはそれますが、「引用」っていうのは色々決まりがあるので、ちゃんと勉強してから行いましょう。この記事ではサンプルを表示していますが、そのサンプルは引用とは言えない使い方です。なので、サンプルコードをコピペしたり真似するのは良いですが、引用の雰囲気は参考にしないでください。引用についてはちゃんと各々でググってください。

左上に引用符

どうでも良い情報ですが、このブログではこれを使っています。

引用文、引用文、引用文
blockquote{
background-color:#ddd;
padding:1em 1em 1em 3em;
position:relative;
}
blockquote:before{
content:"“";
font-size:600%;
line-height:1em;
font-family:"MS Pゴシック",sans-serif;
color:#999;
position:absolute;
left:0;
top:0;
}

左上に引用符と左にボーダー

引用文、引用文、引用文
blockquote{
background-color:#ddd;
padding:1em 1em 1em 3em;
position:relative;
border-left:3px solid #333;
}
blockquote:before{
content:"“";
font-size:600%;
line-height:1em;
font-family:"MS Pゴシック",sans-serif;
color:#999;
position:absolute;
left:0;
top:0;
}

上左に引用符(左上ではない)

引用文、引用文、引用文
blockquote{
background-color:#ddd;
padding:2.6em 1em 1em;
position:relative;
}
blockquote:before{
content:"“";
font-size:600%;
line-height:1em;
font-family:"MS Pゴシック",sans-serif;
color:#999;
position:absolute;
left:0;
top:0;
}

左上と右上に引用符

「右下」にやりたかったんですが、引用符が割と縦に長くて、bottom:0;だと上にはみ出ちゃうので、しょうがなく右上。。w

引用文、引用文、引用文
blockquote{
background-color:#ddd;
padding:1em 3em;
position:relative;
}
blockquote:before{
content:"“";
font-size:600%;
line-height:1em;
font-family:"MS Pゴシック",sans-serif;
color:#999;
position:absolute;
left:0;
top:0;
}
blockquote:after{
content:"”";
font-size:600%;
line-height:1em;
font-family:"MS Pゴシック",sans-serif;
color:#999;
position:absolute;
right:0;
bottom:0;
}

上左と下右に引用符

さっき「右下」に出来なかった。。って言ってましたけど、:afterの方を「line-height:0em;」として、bottom:0;にすれば、一応右下っぽくなりましたw

引用文、引用文、引用文、引用文、引用文、引用文、引用文、引用文、引用文、引用文、引用文、引用文、引用文、引用文、引用文
blockquote{
background-color:#ddd;
padding:3em 1em;
position:relative;
}
blockquote:before{
content:"“";
font-size:600%;
line-height:1em;
font-family:"MS Pゴシック",sans-serif;
color:#999;
position:absolute;
left:0;
top:0;
}
blockquote:after{
content:"”";
font-size:600%;
line-height:0em;
font-family:"MS Pゴシック",sans-serif;
color:#999;
position:absolute;
right:0;
bottom:0;
}

左上に引用符(引用文の背景に)

疑似要素にz-indexを指定するだけではなく、blockquoteにもz-indexを指定するのがポイントな気がするw

引用文、引用文、引用文
blockquote{
background-color:#ddd;
padding:1em;
position:relative;
z-index:1;
}
blockquote:before{
content:"“";
font-size:600%;
line-height:1em;
font-family:"MS Pゴシック",sans-serif;
color:#fff;
position:absolute;
left:0;
top:0;
z-index:-1;
}

記事の背景が白じゃない人は

今回、記事の背景が白の人向けみたいな感じで紹介しましたが、背景が白じゃない場合は、引用部分の背景を白にするのも良いかもしれません。
参考:blockquote部分デザインをCSSを使用して変更した(WordPress) | バカに毛が生えたブログ

凝るならこんなのもあるけど、、

border-radiusを使って角を丸くしたり、もっと格好良いデザインにするならこんなのもありました。
CSS なにかと便利な「:before, :after擬似要素」の使い方を基本からマスターするためのチュートリアル | コリス

引用符を丸で囲うっていうデザイン。格好良い。
ですが、ここで紹介されているコードの「content: close-quote;」って部分は、IEは対応しておらず、かぎ括弧とかが表示されちゃうので注意して下さい。
普通に、”とか“とか書いてください。

余白がでかい!?【WordPressの人向け】

WordPressの場合、blockquoteタグの中に、自動でpタグが挿入されてたりします。(設定によりますが)
そうすると余白がめっちゃでかくなってしまいます。

解決方法としては色々ありますが、自分は以下の様なコードで対応しました。

blockquote p{
margin:0;
}

最後に

最初にも書きましたが、もしかすると引用符が被ってるとか、サイズを大きくしたいとか、余白が気になるとか、色々あるかもしれません。
そういう場合は各々でmarginとかpaddingとか、font-sizeとか、leftとかtopとか調整してみてください。(面倒かもしれませんが。。)

そんな訳で、あまり凝ってはいませんが、blockquoteタグの飾り付けサンプルコードの紹介でしたー。


 - ブログデザイン

Comment

  1. きのみい より:

    使ってみた!ありがとう♪
    例:http://fanblogs.jp/kinomii/archive/343/0

    余談なんですが
    ファンブログハックから
    この、おーとえすとさいとへのリンクってなかったりする?
    探したんだけど分からなかったです・・万能薬はあったんだけど

  2. おーとえす より:

    >きのみいさん

    いえいえ、コメントありがとうございます!

    おーとえすとさいと、へのリンクは最新記事に貼ってあるだけですね。言われてみれば、リンクとかにはまだ貼ってないですね。

    おーとえすとさいと が良い感じになってきたら貼りますw
    わざわざありがとうございます^^

  3. […] | CSS Lecture blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 | おーとえす… CSSと画像で引用(blockquote)を見栄えよく表示する|web […]

  4. mitsuhirock! より:

    参考にさせて頂きました。

    私も画像を使うのが・・・だったので、非常にありがたい内容でした。

    感謝です!

  5. おーとえす より:

    >mitsuhirock!さん

    コメントありがとうございます!
    参考になった様で何よりです!

  6. tafarocks より:

    活用させてもらいました!ありがとうです。http://www.tafarocks.net

  7. おーとえす より:

    >tafarocksさん

    コメントありがとうございます!

  8. […] blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 […]

  9. growyourown より:

    参考にさせていただきました。ありがとうございました。

  10. モカ より:

    とても分かり易くて参考になりました。
    早速導入しました。

    ありがとうございます。

    http://mocamoca.com/harablog/archives/2014/02/post_3085.html

  11. おーとえす より:

    >growyourownさん
    いえいえ、コメントありがとうございます!

    >モカさん
    いえいえ、コメントありがとうございます!

  12. keita より:

    コピペさせていただきました。ありがとうございます

  13. […] blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 | おーとえすとさいと […]

  14. tafarocks より:

    教えてくださいませんか。Bloggerをつかっているのですが、上記をこぴぺすると必ず「“」という表記が出てバグってしまいます。これはBloggerの問題でしょうか?他のBlogでは問題なくつかえています。

    • おーとえす より:

      >tafarocksさん

      エラーの内容が消えちゃってて分からないですが、Bloggerのどこにコピペしてますか?
      自分も一応Bloggerのブログが1つだけあったので先ほど確認してみましたが、
      CSSの追加のところでコピペして適用してみたら、無事適用出来たっぽいです。

      「ブログに適用」を押した時にエラーが出ますか?
      それとも、別のところで編集しているんですかね?
      そこら辺を教えてもらえると、もしかしたら分かるかもしれないのでよろしくお願いします。

  15. tafarocks より:

    ご返信感謝です。

    エラーは出ないです。
    編集はCSSの追加のところです。

    エラーの内容は、全角で書くと

    “ 

    です。読めるかな。

    • おーとえす より:

      >tafarocksさん

      あ、理解しました。
      『“』って表示されちゃう、ってことですね。
      自分でも確認できました。
      これはちょっと自分には分からないですね^^;

      Bloggerさんの場合、多分記号とかをコードに変換するようにしている様で、
      大文字の”はコードに治されちゃって、8220みたいなのが表示されちゃいますね。(“は、“の文字コードみたいなやつなので)

      半角の”なら一応大丈夫なので、

      content:”“”;

      の部分を

      content:”\””;

      と言う様に変えれば一応半角ですが、コードに変わらずに表示される様ですね。(\は特殊記号の無効化してくれるので半角の”も表示可能)
      ただ、クオーテーション感が弱いですが。。

      なんだか良い解決策を提示出来なくて申し訳ないです^^;

  16. tafarocks より:

    あ、理解しました!ありがとうございました。
    本当に迅速に対応頂き、感謝しております。ありがとうございました。

  17. […] そこで参考にしたサイトがこちら blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 | おーとえす… […]

  18. » 引用タグ”blockquote”とCSSを組み合わせてciteを表示させるようにするタグ。|コワーキングスペース管理人のブログ より:

    […] blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 | おーとえすとさいと […]

  19. […] おーとえすとさいと:blockquoteタグをCSSだけで格好良いデザインにする【画像不要】 […]

  20. ろくへい より:

    引用文についてまとめてあるサイトがないかなと探していたところ、おーとえすさんの記事に辿り着きました!非常に読みやすい記事でした(^^)/

    自分たちのブログでも少し紹介させていただきました!

    • おーとえす より:

      > ろくへいさん
      コメントありがとうございます!
      そう言っていただけると嬉しいです^^

      ブログ訪問させていただきましたが、デザインカッコ良いですね!
      紹介ありがとうございました。

  21. hatena より:

    自分のブログの記事でここで紹介されいるコードを元に加えたものを紹介させていただきました。非常分かりやすくて参考になりました。

    自分のブログにも設置できて、格好良いデザインになって大満足です。

    ありがとうございました。

    引用タグをCSSとFont Awesomeでデザインしてみた – hatena chips
    http://hatenachips.blog34.fc2.com/blog-entry-442.html

    • おーとえす より:

      >hatenaさん
      ご紹介ありがとうございました。
      返答が遅くて申し訳ないです。^^;
      こちらこそありがとうございます!
      コメントいただけて嬉しいです!

  22. hatena より:

    こちらのCSSを少し変更したものを自分のブログの記事に掲載させていただきました。
    格好いい引用デザインになり大満足です。
    ありがとうございました。

    引用タグをCSSとFont Awesomeでデザインしてみた – hatena chips
    http://hatenachips.blog34.fc2.com/blog-entry-442.html

  23. […] 他にもたくさんのCSSがサンプルで紹介されております。 おーとえすとさいと […]

  24. […] 他にもたくさんのCSSがサンプルで紹介されております。 おーとえすとさいと […]

  25. 北のおばちゃん より:

    クォーテーションマークつきのblockquoteがやりたくて探していました。かっこよくできました。ありがとうございます。
    サイトがUnicodeだったので、やっぱりクォーテーションマークが化けました。
    いろいろ探して、「\201C」に変えればいいことがわかりました。ご参考までに。

Message

メールアドレスが公開されることはありません。

  関連記事

no image
アクセスが増えてきたのでブログデザインを改良しました

前回、素人が考えるブログデザインの作り方「え? もしかして時代遅れ?w」という記 …

css_hover_catch
cssの:hoverの色々な使い方

cssで:hoverって言う類似クラスと呼ばれる物があるんですが、こいつの色々な …

no image
記事を読み終えた時に関連記事をさりげなくアピールするスクリプト

自分は、記事を読み終えた時にニョロっと出てくる関連記事とかが苦手です。スクロール …

no image
暇潰しの為のアンテナサイト「6sec.」を少し更新しました

前に、「作成中のアンテナサイトがあって、アイディアだけ紹介しておきます。」みたい …

open_sidemenu
サイドバーって死んだの? 〜STINGER5のスマホ表示をカスタマイズ〜

こんにちは。 社会人1年目で現実の厳しさを知って参っているおーとえすと申しますw …

footer_fixed
フッターの表示をjQueryでほんのちょっと格好良くしてみた

前に、Stocker.jp / diaryのページに行った時に「このサイトのフッ …

qlookblogdesign2
素人が考えるブログデザインの作り方「え? もしかして時代遅れ?w」

時間は万能薬のデザインを少し変更しました! その際、素人ながらに何を考えて、どう …