【Twenty Fourteen】引用タグの設定⇒style.css編集メモ

引用タグ「blockquote」の見た目を変更するため、style.cssを編集しました。

【Twenty Fourteen変更メモ】

デフォルトの状態では見た目がよろしくなかったので、引用タグに変更を加えました

下記がデフォルトの状態。

これではサイトとのフォントとも合っていないので、修正することにしました。

修正するのはstyle.cssです。

ここでは冒頭に紹介したエントリーを参考に、画像ファイルを使わずにCSSのみで見た目を変えてみました。

下記のコードを追加します。

追加する場所は、hタグなどを宣言している場所の一番下に追加します。

/*引用タグのデザイン指定*/
blockquote{
    font-family: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    background-color: #ddd;
    padding: 1.5em 1em 0.5em;
    position: relative;
    border: 3px solid #d7d7d7;
    margin: 0 1em 1.5em;
}
 
blockquote:before{
    content: "“";
    font-size: 400%;
    line-height: 1em;
    font-family: "ＭＳ Ｐゴシック",sans-serif;
    color: #999;
    position: absolute;
    left: 0;
    top: 0;
}
 
blockquote:after{
    content: "”";
    font-size: 400%;
    line-height: 0em;
    font-family: "ＭＳ Ｐゴシック",sans-serif;
    color: #999;
    position: absolute;
    right: 0;
    bottom: 0;
}

最初の「font-***」の4行はサイト全体のフォントと合わせるために追加しました。

変更後の引用文が下記。（Wikipediaより「ブログ」の項目冒頭を参考に載せてみました。）

バランスが良くなりました。よかった。

ブログ(blog)は、狭義にはWorld Wide Web上のウェブページのURLとともに覚え書きや論評などを加えログ（記録）しているウェブサイトの一種である。「WebをLogする」という意味でWeblog（ウェブログ）と名付けられ、それが略されてBlog（ブログ）と呼ばれるようになった。

via：Wikipedia 「ブログ」より

まとめ

今までは引用文の部分をデフォルトのままで載せていました。

やはり引用文はちゃんとサイトに合わせた方がいいですね。。引用させてもらっている身ですし。