元CAバンビのずぼら日記

元国際線乗務員の情報発信ブログ。海外、旅行、料理、ワイン、美容のお話など。

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

2018/03/16-追記 スマホでのやり方追加しました!

 

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

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

 

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

 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; } /*引用デザイン--ここまで↑↑--*/

 

 

 ❺さっき開いた{}デザインCSSにペーストする。

f:id:zuboraca:20180127141335p:plain

  

❻「変更を保存」を忘れずに!!

f:id:zuboraca:20180127141341p:plain

 

❼ほらっ!こんな風に〜できました♡

 

エルメスのブティックの中に吹き抜けの素敵なカフェがあります。お食事もできます。エルメスの素敵な雰囲気の中でのティータイムは優雅です。(お値段もそれなりです...)

紅茶 10€~15€ シャンパンが13€~に対して

お煎茶が2700円ですってよ、奥様
雰囲気のお値段です♡

引用元:パリ★モノプリ→エルメス→ボンマルシェ移動ルート

 

❽スマホにも同じようにペースト

「レスポンシブ」 ではない人は、スマホの方にもさっきのコードを入れないといけないんです。

ただ、こちらに入れる時にさっきのタグをそのままペーストするのではなく、
<style type="text/css">〜ここにコード〜</style>で囲まないといけないんです!

入れる場所はここ↓↓

f:id:zuboraca:20180316070514j:plain

デザイン→スマホマーク→記事 から 記事上のここ。

 

 

応用編(やらなくても大丈夫なんだけど)

上のように引用部分を右の方に寄せたい場合には

html編集で

<cite>引用〜〜〜</cite>と囲むと右側寄せになります。 

こんな風に!

f:id:zuboraca:20180211195831p:plain 

 

一応、自分なりにコード解説。 

別にこれが理解できなくても、コピペすればできます。わからなくて大丈夫です。
私もネット検索したり、自分で数値変えて試してみたりして、こんな感じかなぁ...程度にしかわかっていません(笑)

f:id:zuboraca:20180211195009p:plain

f:id:zuboraca:20180211195017p:plain

  

ちなみに色を変えるとこんなのも出来ます♪♪
サイトに合わせてやってみてください^^

f:id:zuboraca:20180211171809p:plain

f:id:zuboraca:20180211171817p:plain

 

初心者用(自分用)コピペでOKな枠のやり方

 

何回も見て脳に刷り込まれてしまったエルメスの2700円もするお煎茶の記事が読みたくなっちゃった方はこちら↓↓(笑)バンビの弾丸パリ旅行記です♪♪


初心者向けの(ほぼ自分用メモ)ブログカスタマイズ方法

 

 

 

参考にしたサイト★★-----------------
Special Thanks to 

id:tasukujpさん

 

更にもっと凝ったものにしたい場合は↓↓にたくさんコピペ素材あります^^


はてなブログにコードを貼り付けたい時のやり方は
たかのりうむ (id:takanorium) さん。