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

      2016/03/21

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

【Twenty Fourteen変更メモ】

 

Sponsored Links

 

【参考サイト】

下記エントリーを参考にさせて頂きました。

引用タグ(blockquote)をCSSのみで装飾する | 賢威カスタマイズ研究所

 

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

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

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

150131 blockquote setting 2 

 

修正するのは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: "MS Pゴシック",sans-serif;
    color: #999;
    position: absolute;
    left: 0;
    top: 0;
}
 
blockquote:after{
    content: "”";
    font-size: 400%;
    line-height: 0em;
    font-family: "MS Pゴシック",sans-serif;
    color: #999;
    position: absolute;
    right: 0;
    bottom: 0;
}

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

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

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

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

via:Wikipedia 「ブログ」より

 

まとめ

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

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

 

Sponsored Links

 

 - TwentyFourteen
 -