Blogger：『CSSを追加』で引用文&引用符を表示

今まで、引用したい時は、引用サイトの記事を数行コピペするか、
スクリーンショットでアップして、リンク元を記載してたけど、
こういうのも引用らしくて良いかなと思って挑戦してみました！

　 この引用符があるだけで引用らしさがアップしますよね。
この「引用符」の画像は、Creazy!さんのサイトからいただきました☆
配布はされてないそうですが、自由に使ってもOKとの事で有り難く使わせていただきます！

実は、テンプレートとか弄るのは苦手で、あまり弄りすぎると出来るはずの事が
出来なかったりするという経験（別のBloggerサイト）があるので、簡単に出来る新機能？とか
気長に待とうかな～と思いつつ・・・ちょこっと調べたら、
引用が簡単に出来るブックマークがあるとかで、おっ！簡単そうやん！
試してみたけど、駄目でした(≧ω≦｡)　Bloggerのせい？

やっぱり簡単には無理か～って事で、また検索開始。
引用符は左上と右下の2つで、シンプルなものと思ってたんで、
雅薙佳庵さんのサイトに　Bloggerでblockquote(引用部分)をCSSでデザインする
というのがあったので、とりあえずコピペで試してみました。

あれ？右下にしか表示されてない！Σ＼(￣ｰ￣;)ﾅﾝﾃﾞﾔﾈﾝ
とりあえず、見栄えの悪い引用符の背景を透明にして、囲い線も点線に変更してみましたが

やっぱり左上が表示されない！サイズとか色々試してみたけど挫折orz
再度、検索開始！

きになるnetさんのサイトに、【CSS】ひときわ目立つ！引用（blockquote）をカスタマイズ
というのがあり、Bloggerユーザーサイトではないけど、試してみました。

あれ？今度は、左上は表示されたけど、右下が表示されない！
けど、バックのカラーが引用符に合ってて、気に入ったので、これでええか！と
思ったけど、やっぱし右下にも拘る自分がw

次は、For Content Creatorさんのサイト
【Blogger】引用文（Blockquote）のCSSを整理してみた。　を試してみました。

わーい٩(๑❛ᴗ❛๑)۶　左上にも右下にも引用符が表示されました☆
引用符と文字が重なる部分や行間は<br>で調整しましたが、
多分、テンプレートによっては必要ないと思います。
For Content Creatorさんのコードを少し弄っただけで、
希望通りの引用が出来てとても嬉しいです！

引用符の種類も色々あり、もう皆さんご存じだと思いますが、
引用符（画像）のURLを調べるのは、ブログ投稿ページにアップして
「HTML」に切り替えれば、URLが表示されるので、それをコピペすればOKです。
一応、私の上図のコードを書いておきますね。

◆CSSコード

blockquote { display: block;
 margin: 0 0 1em 0;
 padding:30px;
 border:5px dotted #999;
 background:url(左上の引用符画像のURL),
 url(右下の引用符画像のURL);
 background-repeat:no-repeat,no-repeat; 
 background-position:top left,bottom right;
 background-color:#efece6;
 }

border:5pxは囲い線の太さで、 dottedは点線で、 #999;は点線の色です。
直線はsolidで、破線はdashedなのでお好みで変更してくださいね。
background-color:#efece6;は、囲い線の中の背景色です。
囲い線の幅は、width: ○○○px;を追加すれば良いと思います。


◆HTMLコード

<blockquote>
<p>
引用文
</p>
<cite title="サイト名">引用元：<a href="引用先URL" target="_blank">ページタイトル－サイト名</a>さんより
</blockquote>



ニュース記事など、最近は引用どころか丸々コピペしたり、写真とかもそのままアップしたり、
著作権なんて全然考えてないサイトが多いのにはビックリです。
知らなかったとはいえ、訴えられたら大変です。
リンクさえ禁止してるところもありますし、数行の引用でさえ駄目なサイトもあります。
実際、訴えられてお金を支払った人が居るという話を聞きましたので、
皆さん、気をつけてくださいね。