Original Update by: m_besser
引用文や引用元の表示デザインなど、気に入らなくてもそのままになっていたりしていませんか??
毎日ワクワクしてますか!?AllSync.jpへようこそ。Sync.(@AllSync.jp)です!
この頃はブログの魅力的な無料テーマがたくさんあって、色々使ったことがある人も多いと思います。
僕は、ブログの情報収集に色々なサイトやブログを覗いているのですが、他のブロガーのデザインにいつも驚かされて、「これ、ええな〜」ってすぐに真似したくなります。
そこで、以前から気になっていた引用文の表示を変更したのですが、ブログのテーマの初期設定のまま使っていたので、いざ引用のCSSをいじろうとしたら、今更過ぎるような知らないこともあったので、シェアしたいと思います。
このブログの引用文の表示とCSS
[code:html] /*本文記述しているHTML*/
このサイトで引用文の表示はこんな感じになっています。via: AllSync
[/code]
このサイトで引用文の表示はこんな感じになっています。 via: AllSync
うちのブログでは上記のような表示と記述になっています。
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>タグの意味は下記にリンクを貼っておきますので、なんとなく知っているって人や、おさらいしたい人は見ておいて下さいね。
CSSはほとんど触らないっていうブロガーも多いと思います。こういった記事がたまには役に立つ人もいるはず。