「BQuote Sign」は、デフォルトの「引用部デザイン」を、より見栄えのするデザインにするツールです。
このツールは「右クリック」を使用しません。マニュアル上の「Click」の表記はすべて「左クリック」の意味です。
ver. 0.7以降に対応 2023.10.24 更新
「BQuote Sign」の常駐について
拡張機能「Tampermonkey」のダッシュボードで、「BQuote Sign」を「ON」にしておくと、アメブロ編集画面を開いた時に、「BQuote Sign」が自動的にスタンバイ（常駐）の状態になります。
「BQuote Sign」の起動前に必要な操作
「BQuote Sign」は、編集アイコンの「 」で指定をした「引用部」をアレンジするツールです。 編集している本文中に「引用部」が無いと、なにも出来ません。
● 記事中の引用部を選択反転して、編集アイコンの「 」を押します。 選択した範囲に「引用部」を表す「左バー」が表示されれば OKです。
▪「BQuote Sign」の起動の前に、この操作を行ってください。 起動後に「引用部」を指定した場合は、2回「Ctrl+F2」を押してツールを再起動すると、アレンジが可能になります。
下は、選択した範囲を「引用部」に指定する基本操作の様子です。
「BQuote Sign」の起動と「引用部」の指定
●「BQuote Sign」は「通常表示」の編集画面で「Ctrl+F2」を押すと起動します。
● 起動している状態で「Ctrl+F2」を押すと、ツールが終了します。
●「Ctrl+Click」で記事中の「引用部」を選択します。
▪「引用部」が複数ある場合は、「Ctrl+Click」で対象を選択・変更します。
▪ 選択した「引用部」には「青枠」が表示されます。（編集中のみの表示です）
▪ 過去記事で生成した未アレンジの「引用部」や、既にアレンジした「引用部」も、「Ctrl+Click」で指定する事で、再アレンジが可能です。
▪ 記事中に挿入したツイッター記事は「blockquote」要素ですが、これはアレンジ対象にならず、クリックしても選択されず青枠は表されません。
下は、本文中の「引用部」をアレンジ対象に選択する様子です。
● 選択と同時に「引用部」にデザイン[1] が設定されます。
「引用部デザイン」の選択
以下の表は「引用部デザイン」のサンプルです。 色設定をすべて同じにしていますが、色設定でかなり印象が変わります。 左端が記事本文の左端になります。
「引用部デザイン」は、マーク「 」のボタンを「Click」するごとに、この表の順番で変化します。（ [1]➔[8]➔[1]➔[8]➔・・・ ）
| 引用表示デザインのサンプル | |
| 1 |  |
| 2 |  |
| 3 |  |
| 4 |  |
| 5 |  |
| 6 |  |
| 7 |  |
| 8 |  |
「マーク色」 の設定
下図の「色」のボタンが「マーク色」を設定するボタンです。
▪「引用部デザイン」が [1]～[4] と [8] の場合は、「マーク色」の設定は「引用マーク」自体の色指定になります。
▪「引用部デザイン」の [5]～[8] は、引用文の1行文字数を多くしたデザインです。
▪ [5]～[7] のデザインでは、「マーク色」は「縦バー」の色の指定になります。 従って [6] [7] の「マーク色」は変更できません。
●「色」ボタンを「Click」すると、編集画面のカラーパレットが表示されます。
▪ カラーパレット操作で色を指定します。 これは文字色指定と同じ要領です。
▪ 選択した色が「色」ボタンに表示され、同時に「引用部」の「引用マーク」または「縦バー」に、選択した色が反映します。
▪ 色指定の操作は、何度でもやりなおせます。
下は、「カラーパレット」を表示し「色」を選択する様子です。
「背景色」の設定
下図の「背景色」ボタンが「背景色」を設定するボタンです。
▪「背景色」は引用文の文字部分の背景色です。 デザイン[1]～[5] の場合は、「引用マーク」も、この背景色の上に表示されます。
●「背景色」ボタンを「Click」すると、編集画面のカラーパレットが表示されます。
▪「背景色」の指定操作は、上の「マーク色」の操作と同じです。
「マーク色」「背景色」の濃度
「色」「背景色」のボタンのそれぞれに「スピナー」があります。 これを操作する事で、指定色の濃度を段階的に調節できます。
▪ 引用マークの明瞭さ、引用文の判読し易さを考えて、適当な濃度に調節します。
▪ 編集画面の文字色指定を使い、濃い背景色に白文字のデザインも可能です。
▪ カラーパレットでは困難な「淡色」の設定が簡単にできます。 カラーパレットでおうよその色味を指定し、「濃度」ボタンで淡くする要領です。
下は、「スピナー」を使って淡色の「背景色」を設定しているところです。
「デザイン登録」機能の使い方
下の「 」と「 」のボタンが、デザインの「登録・適用」のボタンです。
● 「 」ボタンを「Click」すると、現在選択している「引用部のデザイン」を登録できます。 登録される内容は以下です。
▪「引用部デザイン」の種類 [1]～[8]
▪「引用マーク」または「縦バー」の「色」
▪「背景色」
これらの設定がローカルストレージに登録されます。 ローカルストレージは、ブラウザ固有の記録領域で、登録した内容はブラウザを終了しても保持されます。
▪ 登録したデザインは、次に「BQuote Sign」で登録するまで、変わりません。
●「引用部」を選択して「 」ボタンを「Click」すると、登録されている「引用部デザイン」が、選択した「引用部」に適用されます。
▪ この操作で、選択した「引用部」のそれまでのデザインが上書きされます。
▪ 登録したデザインは「引用部デザイン」の雛形として使えます。
下は、未アレンジの「引用部」を「選択」して、登録している「引用部」デザインを適用する様子です。
配色の工夫
下は、「BQuote Sign」を使った「引用部」のデザイン例です。 配色を工夫することで、色々なデザインが可能になります。
このツールの最新バージョンは、以下のリンクリストから探せます。
