BLOGGERで簡単にかっこいい引用を作れるようにする方法

引用をかっこ良くする方法@Blogger

当ブログはGoogle社のBLOGGERというサービスを使っているのですが
引用にするという機能が投稿画面にあるんだけど
その引用をかっこ良くする方法をしりたくなって調べた。

これができたテスト結果

赤いラインと“（ダブルクオーテーション）がついて引用がかっこ良く

引用文がこんな風にかっこよくなる

やっていることは

・CSSコードを探す
まずは、おちらで気に入ったものを見つける。

【保存版】引用 (blockquote) CSSデザインおすすめコピペサイトまとめ | shuffleee blog
ここの（６）For Content Creatorさん


私はこちらにしました。

【Blogger】引用文（Blockquote）のCSSを整理してみた。 | For Content Creator
.post blockquote { display: block;  margin: 0 0 1em 0;  padding:30px;  border-left:5px solid #CE534D ...



・CSSコードをコピペする

これ（CSSコード）をコピー

.post blockquote {display:block;
 margin:0 0 1em 0;
 padding:30px;
 border-left:5px solid #CE534D;
 background:url(https://googledrive.com/host/0BzuNIroprPqXY3V4dUxIRTBlVU0),
 url(https://googledrive.com/host/0BzuNIroprPqXTWVCWW1jLTktX0E);
 background-repeat:no-repeat,no-repeat;
 background-position:top left,bottom right;
 background-color:#FFF;
 }
.post blockquote p {margin:0 0 1em 0;font-size:0.9em}


・BLOGGERのCSS追加の場所

そんでもって、こちらを参考にBLOGGERのCSS追加に貼付ける
BLOGGERの管理ページから

Blogger：テンプレートにCSSを追加する - Blogger Sketch
BLOGGERへのCSSへの追加場所はこちらで



・クオーテーションの画像を入手しておこう

さて、ここで、クオーテーションマークの画像の用意が実は必要で
どっかから入手してください

一回ブログに、クオーテーションマークの画像をアップロードして、
テスト投稿とかして、その画像のURLを確認する

＜＝こいつのURL

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOvJrn2dy1spF4iZLu_wbQVtsJgmb6zky-gtCdCfPlzX5p1ChjIhuoX7iFk7ejsgks5DGJP7e5X_rgvruIkjdcAzKKVDk2RXRUBhyphenhyphennDIQbyXf37iEVjDaQxX20NR_pkw_2y8ymZWAxPpY/s1600/quote.gif

・CSSコードの画像URLを書き換える

私は頭にだけクオーテーションでいいや、と思ったので画像URLは一つにしました。

.post blockquote {display:block;
 margin:0 0 1em 0;
 padding:30px;
 border-left:5px solid #CE534D;
 background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOvJrn2dy1spF4iZLu_wbQVtsJgmb6zky-gtCdCfPlzX5p1ChjIhuoX7iFk7ejsgks5DGJP7e5X_rgvruIkjdcAzKKVDk2RXRUBhyphenhyphennDIQbyXf37iEVjDaQxX20NR_pkw_2y8ymZWAxPpY/s1600/quote.gif);
 background-repeat:no-repeat,no-repeat;
 background-position:top left,bottom right;
 background-color:#FFF;
 }
.post blockquote p {margin:0 0 1em 0;font-size:0.9em}

これで、変更を適用ボタンを押す

・テスト投稿してみよう

あとは投稿画面にいって
“マークをクリックするだけで実現できるようになります。


以下はBLOGGEではうまくいかず・・・TAT


引用タグ（blockquote）をCSSのみで装飾する | 賢威カスタマイズ研究所
これは、魅力的な方法なんだがBLOGGERだとうまく行かなかった。以下のようになってしまうのです。。。。BLOGGERでの解決方法しってるかた今したら教えてください

しのジャッキーの雑記～ブログ: ブログ作成Tips
ほかのチップスはこちら



もし、お役にたてたようでした、「いいね」「ツイート」ご協力くださいm(_ _ )m