Blogger:引用符をカスタマイズ

Bloggerの投稿エディタには「引用」のボタンがありますが、これを使ってもどの部分が引用されているのかとてもわかりにくいです。

ボタンを押すと<blockquote class="tr_bq">～</blockquote>で挟まれる

まず投稿エディタでボタンを使うとどうなるかやってみました。

引用した部分を選択してボタンをクリックします。

プレビューボタンをクリックします。

、、、単に「引用してきた文章」がインデントされているだけです。

でも投稿エディタでHTMLをみてみると「引用してきた文章」が<blockquote class="tr_bq">～</blockquote>で挟まれていることがわかります。

<blockquote class="tr_bq">
引用してきた文章</blockquote>

ということはテンプレートで<blockquote class="tr_bq">の部分をいじれば表示を変更できるはずです。

テンプレートにはblockquoteは定義されていないので自分で定義を作る

Chromeで管理画面を開きテンプレート→HTMLの編集→Ctrl+F、で検索ボックスを出します。

「blockquote」や「tr_bq」で検索してもなにもひっかかってきませんでした。

ですのでblockquote要素を参考に定義を作ることにしました。

blockquote { 
 width: 600px;
 border: 1px solid #666666;
 background: url(http://labs.creazy.net/img/quote_start.gif) no-repeat scroll top left;
 padding-top: 10px;
 padding-right: 10px;
 padding-bottom: 10px;
 padding-left: 30px;
 margin-top: 10px;
 margin-right: 0px;
 margin-bottom: 10px;
 margin-left: 30px; 
 box-shadow: 1px 1px 2px rgba(204, 204, 204, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.4);
 border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
}

いろいろ試行錯誤した結果以上のようにしました。

これをテンプレートのHTMLの

]]></b:skin>

の直前にペーストしてテンプレートを保存します。

管理画面→テンプレート→カスタマイズ→上級者向け→CSSの追加

でカスタムCSSを追加しても同じようにテンプレートの <b:skin>～</b:skin>の最後に追加されます。

引用してきた文章

こんな感じになりました。

IE8では角は丸くできないようです。

（2013年8月18日追記。モバイルサイトへの表示も考慮してwidthはauto、引用符画像の背景を透明に変更しました。詳しくはBlogger:モバイルサイト(2)引用符の枠がはみ出る問題へ。）

blockquoteの設定の解説

ボタンを押すと<blockquote class="tr_bq">～</blockquote>で挟まれるのでCSSはClass名も含めてblockquote.tr_bqと書くようですがどういうわけかclassが抜けて<blockquote>～</blockquote>に挟まれることもあったので

blockquote { 

}

としています。

widthは囲み線の幅で、管理画面→テンプレート→カスタマイズ→幅を調整、で自分のブログの幅と比較して決定しました。

borderは囲み線の設定で[Blogger]記事投稿ページの引用ボタンを活用する。(blockquot引用スタイルの変更） - Sunaboxが詳しいです。例えばsolidでなくdottedにすると点線になります。#666666は色指定です。

background: url(http://labs.creazy.net/img/quote_start.gif) no-repeat scroll top left;
では左上につける画像を指定しています。ここでは第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法 [C!]の を借用させて頂いていますが自分のBloggerにある画像のURLを指定すれば好きな画像に変更できます。
paddingは囲み線の内側の空間の指定です。左上にを入れるために padding-leftは30pxと大きめに設定しています。

marginは囲み線の外側の空間の指定です。インデントさせるためにmargin-leftは30pxにしています。

 box-shadowは枠線に影をつけるためにしています。box-shadow－CSS3リファレンスに解説があります。今回は【CSS】ひときわ目立つ！引用（blockquote）をカスタマイズ | きになるnetの設定をまねさせていただきました。

border-radiusで囲み線の角に丸みを持たせています。border-radius－CSS3リファレンスに詳しく解説があります。


転居後モバイルWimaxの電波が通じなくてブログの更新間隔が空いてしまいました。
ルーターを持ち歩いて家中すみからすみまで調べ歩いた結果、2階の南東の角でようやくアンテナが1本立ちました。
BNR スピードテスト 回線速度／通信速度 測定では600～900Kbpsぐらいしかでないのでプレビューや画像のアップに時間がかかってストレスです。
UQWimaxのサービスエリア地図ではサービスエリア内のはずなのですが我が家の一帯は地上では屋外でも全く電波が入りませんでした。

ページ番号付ページナビを導入したら引用符のカスタマイズが反映されなくなった

Blogger:ページ番号付ページナビ(1)何ページ目を見ているのか一目でわかる方法を導入したところ引用符のカスタマイズが反映されなくなってしまいました。

引用符の定義を]]></b:skin>の直前に移動させたところまた反映されるようになりました。

ページ番号付ページナビのCSSの前に引用符のCSSがあると動作しないことがわかりました。

原因は相手のいない}がこのCSSの前にあったことでした。

参考にしたサイト

第12回：引用（blockquote）をCSSと画像でそれらしく見せる方法 [C!]
いろいろなパターンが載っています。<p>タグを使っているのでそのままでは使えません。

blockquote要素
blockquoteについての解説です。

[Blogger]記事投稿ページの引用ボタンを活用する。(blockquot引用スタイルの変更） - Sunabox
CSSの線種の指定に詳しいです。

box-shadow－CSS3リファレンス
囲み線に影をつける

【CSS】ひときわ目立つ！引用（blockquote）をカスタマイズ | きになるnet
影の設定

border-radius－CSS3リファレンス
囲み線の角を丸くする