【CSS】blockquoteの引用文のデザインを変更してみた。意外といじったことがない人が多いかも。

CSS20160305

Original Update by: m_besser


引用文や引用元の表示デザインなど、気に入らなくてもそのままになっていたりしていませんか??

毎日ワクワクしてますか!?AllSync.jpへようこそ。Sync.(@AllSync.jp)です!

この頃はブログの魅力的な無料テーマがたくさんあって、色々使ったことがある人も多いと思います。

僕は、ブログの情報収集に色々なサイトやブログを覗いているのですが、他のブロガーのデザインにいつも驚かされて、「これ、ええな〜」ってすぐに真似したくなります。

そこで、以前から気になっていた引用文の表示を変更したのですが、ブログのテーマの初期設定のまま使っていたので、いざ引用のCSSをいじろうとしたら、今更過ぎるような知らないこともあったので、シェアしたいと思います。


このブログの引用文の表示とCSS



このサイトで引用文の表示はこんな感じになっています。via: AllSync
[code:html] /*本文記述しているHTML*/

このサイトで引用文の表示はこんな感じになっています。 via: AllSync
[/code]

うちのブログでは上記のような表示と記述になっています。


CSSに記述しているblockquote

[code:css] /*引用文の囲み*/ blockquote { position: relative; width: 100%; margin: 0 0 2rem; padding: 1rem 1rem 1rem 1.5rem; font-size: 1.0rem; line-height: 1.8rem; box-sizing: border-box; border: 1px dashed #2b2b2b; } blockquote:before{ content: """; font-size: 600%; line-height: 1em; font-family: "MS Pゴシック", sans-serif; color: #999; position: absolute; top: -15px; left: -20px; width: 40px; height: 40px; background: #fff; } [/code] [code:css] /*引用元(サイト)の表示*/ blockquote cite { display: block; text-align: right; font-size: smaller; } [/code]

デザインはネタフルさんの引用文を見てきめました。(だいたい同じっぽくなています)



引用元のリンクに使用する<cite>タグ

このブログでは引用文をあまり使っていないのもあって、引用元の表示を<cite>タグで囲むことを実は知らなかったんですよね。

以前にバンドの紹介記事を書いて引用文で紹介する際に、「はて??引用文内の引用元の表示はどうやっているんだっけ??」と、他ブロガーさんのサイトを見たりして、やっと<cite>タグの意味を知りました。(笑)

<cite>タグの意味は下記にリンクを貼っておきますので、なんとなく知っているって人や、おさらいしたい人は見ておいて下さいね。


AllSync

CSSはほとんど触らないっていうブロガーも多いと思います。こういった記事がたまには役に立つ人もいるはず。