りさこぶろぐ

主にはてなブログのカスタマイズ方法を紹介してます、

はてなブログで引用枠をカスタマイズする方法

SPONSORED LINK

 

こんにちは!

ちょっとずつブログをカスタマイズしてるりさこです!

 

今回は引用枠の表示を変えてみました!

めっちゃくちゃ簡単なので説明する必要もないかもしれないですが、一応まとめておきます!笑

 

カスタマイズしてない状態

f:id:matsuda_risako:20150903174120p:plain

カスタマイズしてないとこんなかんじ。

引用してるってことがわかりにくい!

 

CSSをコピペするだけ!

デザイン→カスタマイズ→デザインCSSの空欄に

.entry-content blockquote {
    padding: 20px 55px;
    background: rgba(245,245,245,0.8);
    color: #222;
    position: relative;
    border: solid 1px #fff;
    margin: 0.8em 0;
}

.entry-content blockquote:before {
    color: rgba(200, 200, 200, 1);
    content: \"“\";
    font-family: serif;
    font-size: 600%;
    left: 0;
    line-height: 1em;
    position: absolute;
    top: 0;
}

.entry-content blockquote:after {
    content: \"”\";
    font-family: serif;
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 600%;
    color: rgba(200,200,200,1);
    line-height: 0;
}

と書くと…

 

f:id:matsuda_risako:20150903174803p:plain

めっちゃわかりやすく、しかもかわいくなりました!!!!!

 

まとめ

みなさんも引用枠のカスタマイズできたでしょうか!?

コピペするだけ、5秒でできるので、ぜひみなさんも試してみてください!

 

参考にしたのはこちら!

www.task-notes.com

 

 

おわり