機能と美観を考慮した「引用」デザイン
記事を書いていると「引用」は時々必要になります。 編集画面にデフォルトで備わった「 」のアイコンで、「blockquote」の基本的な「引用部」のデザインを作れますが、デザインが少し物足りないのと、本文幅が狭い時は1行の文字数が少なくなりレイアウトに苦労するかも知れません。
そこで制作したのが「BQuote Sign ⭐」で、配色も自由に変更出来る箇所が多くて、好みの「引用」デザインを得られると思います。
8種のマークの選択と色の設定について
◎「 」アイコンを押して「1」～「8」の引用部のデザインを選択します。
◎「1」～「4」と「8」は、「色」の設定が「引用マーク」の色指定になります。
◎「5」～「7」は、「色」の設定が左縦バーの色指定になります。
◎「6」「7」の「引用マーク」は「白」「黒」の固定です。
◎「5」～「8」は、一行の文字数を多くしたい場合に適したデザインです。
下は、このデザイン選択と色指定を纏めた表です。
| 色を設定 する対象 |
行の文字 数が多い |
引用表示デザインのサンプル | |
| 1 | 引用マーク |
|
|
| 2 | 引用マーク |
|
|
| 3 | 引用マーク |
|
|
| 4 | 引用マーク |
|
|
| 5 | 左縦バー | 〇 |
|
| 6 | 左縦バー | 〇 |
|
| 7 | 左縦バー | 〇 |
|
| 8 | 引用マーク | 〇 |
|
「BQuote Sign ⭐」の操作方法
以下のページの「操作マニュアル」を参照ください。
スクリプトの「自動更新」に対応しました
「Tampermonkey」の自動更新に対応するメタデータを追加しました。 これにより、このツールのインストールや更新がリンクを押すだけで可能になりました。
「BQuote Sign ⭐」を利用するには
このツールは Chrome・Edge・Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入・更新の手順を説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷ スクリプトコードを登録・更新します
「BQuote Sign ⭐」のコードは「GitHub」で配布しています。
● 以下のリンクを押すと「BQuote Sign ⭐」を初めて利用される場合は「インストール」、既に利用されている場合は「上書き」（更新）ができます。
● 下の様な確認画面が表示されたら、「スクリプト名（ツール名）」「バージョン」を確認して、「インストール」または「上書き」のボタンを押します。
以上の操作で、「Tampermonkey」の「インストール済み UserScript」のリストに「BQuote Sign ⭐」の最新バージョンが登録・更新されます。
▪ ダッシュボードのリストは「 リロード」すると、新しい登録が反映します。
「自動更新」の設定について
「自動更新」対応のツールは、以下の設定をすることで定期的な自動チェックによる更新版のインストールが可能です。（スクリプトの自動更新）
Chrome / Edge では、拡張機能の「管理」➔「Tampermonkey」の「詳細」で
●「ファイルの URL へのアクセスを許可する」を「ON」にします。
「Tampermonkey」の「ダッシュボード」➔「設定」タブで
●「UserScript の更新」の項で、適当な「確認の間隔」を設定します。
「自動更新」の設定の詳細については、以下のページを参照ください。
上記の設定をせずに、任意のタイミングで手動で「スクリプトの更新」が可能です。
●「ポップアップ」のメニューの「 UserScript の更新を確認」を押します。
「BQuote Sign ⭐」最新版に関する記事について
スクリプトツールは、動作対象ページのHTML変更などで正常動作が不能になる場合があります。「自動更新」や手動による「更新」で、最新バージョンを利用することをお勧めします。
「BQuote Sign ⭐」の最新バージョンに関する記事は、以下のページのリンクリストから探せます。
