CSS20160305

Original Update by: m_besser


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

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

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

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

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


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



このサイトで引用文の表示はこんな感じになっています。via: AllSync
/*本文記述しているHTML*/
<blockquote><br />
このサイトで引用文の表示はこんな感じになっています。
<cite>via: <a href="http://allsync.jp">AllSync</a></cite>
</blockquote>

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


CSSに記述しているblockquote

/*引用文の囲み*/
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;
}
/*引用元(サイト)の表示*/
blockquote cite {
   display: block;
   text-align: right;
   font-size: smaller;
}

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



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

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

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

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


AllSync

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