はてなブログ★引用デザインをかっこ良くカスタマイズ！コピペでOK！

2018/08/02

はてなブログのテーマ「Palette（パレット）」を発表しました♪♪
初心者でもカスタマイズが簡単なテーマです(^-^)
どうぞご利用ください！

他の人の記事を「引用」することありますよね。
そもそも、他人様が書いたものを引用して良いかどうかですが、それが「引用」ときちんと定義できるものであれば大丈夫です！！

一応、引用の定義については「→こちら」に詳しく書いてあるので割愛。

「はてなブログ」には便利な引用の機能がついています！
↓ここから

f:id:zuboraca:20180127135459p:plain
他の記事からコピペして、このボタンを押せば「引用」って感じになります。

こんな感じに。グレーの枠と右下に引用マークみたいのが出てますよね。

f:id:zuboraca:20180127140333p:plain

だけど、この引用ってちょっとカッコ悪くないですか？

こんな風にやりたいんです↓↓

f:id:zuboraca:20180211165102p:plain

次の通りにやれば簡単です！

やりましょう！！
簡単だからついて来てね(^-^)

❶まず、お馴染みの「ダッシュボード」から「デザイン」へ行きます！

f:id:zuboraca:20180127141310p:plain

❷上のスパナのマーク「カスタマイズ」をクリック

f:id:zuboraca:20180127141316p:plain

❸一番下の{}デザインCSSを開く

f:id:zuboraca:20180127141326p:plain

❹この次が一番難しいっぽいところです。
「っぽい」だけで、ただのコピペなので大丈夫！！
このまま行きますよ〜

下のコード/*引用デザイン--ここから↓↓--*/〜/*引用デザイン--ここまで↑↑--*/をコピーします。


/*引用デザイン--ここから↓↓--*/
.entry-content blockquote {
    position: relative;
    padding: 25px 55px;
    border: 0px;
    font-style: oblique;
    color: #2b2b2b;
    background: #f7f6f5;
}
.entry-content blockquote:before{
    display: inline-block;
    position: absolute;
    top: 0;
    left: -10px;
    content: "“";
    font-family: serif;
    color: #dcdcdc;
    font-size: 100px;
    line-height: 1;
}

.entry-content blockquote:after{
    display: inline-block;
    position: absolute;
    bottom: -50px;
    right: 20px;
    content: "”";
    font-family: serif;
    color: #dcdcdc;
    font-size: 100px;
    line-height: 1;
}

.entry-content blockquote cite {
    position: relative;
    padding: 10px;
    z-index: 3;
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
/*引用デザイン--ここまで↑↑--*/