「Stylus」の編集枠内への修飾が無効になり、「Ameblo Writer(Compact)」のデザイン適用ができない問題が、過去に何度かありました。「Ameblo Wysiwyg ⭐」はその対策ツールで、編集画面の「Wysiwyg環境」を補強するのが主目的です。 ただそれに留まらず、編集画面をより使い易くする機能を、幾つか追加しています。
ver. 1.5以降に対応 2023.06.17 更新
「Ameblo Wysiwyg ⭐」の概要
「Ameblo Wysiwyg」は「Tampermonkey」上で動作します。 このツールのコードを「Tampermonkey」に登録し「ON」にしておくと、ブログ編集画面を開いた時に自動的に起動し、ツールで設定した編集環境が維持されます。
▪このツールは、「Tampermonkey」のダッシュボードで常に「ON」としておく「常駐型」の使い方を前提にしています。
▪「Ameblo Writer(Compact)」と 「Ameblo Wysiwyg」のアレンジ指定が同じ項目のメニューは「✜」マークが付きます。 それらのアレンジは「Ameblo Writer」が正常に機能している場合は、このツールの指定が機能しない事に注意してください。
▪「Ameblo Wysiwyg」の指定により編集枠内の各種デザインが調整されますが、これは「ブログページと編集枠内のみかけを一致させる」機能です。 そのデザインは本質的にはブログページに反映しない事を理解してください。
「Ameblo Wysiwyg Menu」を表示する
「Ameblo Wysiwyg」の管理項目は、全て設定パネルに表示されます。
●「デザイン幅で表示」を「Ctrl+左Click」すると、メニューが表示されます。
▪「デザイン幅で表示」を再度「Ctrl+左Click」するか、メニュー上部にある 閉じるボタン「✖」を「左Click」すると、メニューが閉じます。
メニュー項目と機能の詳細
Wysiwyg環境
「デザイン幅で表示」の機能により、ブログページの「フォント種」が編集枠内に指定されます。 特殊なスキン設定などが原因して、意に反したフォント種が設定される場合に、この設定で改善できます。
▪ブログページと編集枠内のフォント種が一致している場合は「無指定」にします。
ブログページの「フォントサイズ」を指定します。 この指定は「デザイン幅で表示」の機能の指定を上書きするので、必ず正しい値を指定する必要があります。
ブログページの行間隔は、使用する公式スキンによって異なります。「デザイン幅で表示」の機能は行間隔に対応しないので、正しい値を指定してください。
この機能は、編集枠内のアメブロ絵文字の上下方向の位置ズレを補正します。 ただし、補正は見かけ上のもので、実際のブログ誌面に反映しません。
ブログページの補正は、ブログスキン、またはフリースペースを使って行う必要があります。 この方法は以下のページを参照ください。
▪ ❹ の位置補正は ❶ で選択した基本フォントにより補正値が変化します。（連動） もし ❶ で「無指定」を選択した場合は、補正はデフォルトの状態になります。
画像・動画とその下の行との間隔が、ブログページと編集枠とで異なる問題を修正します。 詳細は以下のページを参照ください。
テキストデザイン と 選択要素のデザイン
編集枠のデフォルト設定は「h要素」の太字指定を無効にします。「h要素」を使う度に太字を指定するのは不便なので、この機能を設けました。 これは、ブログページの「h要素」が「太字」に表示されるスキンの場合に有効です。 更に、編集画面とブログページで「h要素」の行間隔の指定が異なるのを補正します。
▪ 編集画面の右パレットの「見出しの記事デザイン」で挿入される「見出し」の実体は「h要素」ですが、見出しごとに指定を内装しているので、❻ の「ON」「OFF」によって影響されません。
リンクを設定した文字列のデザインは、公式スキンごとに異なります。 編集枠内の表示をそれと同じにします。
▪カラー表示枠を「左Click」すると、ブラウザのカラー設定パネルが表示されます。これを使って任意の色を設定します。
▪設定は保存されて、ブラウザを終了しても失われません。
デフォルトはブラウザの指定がそのまま反映し「文字色：白」「文字背景色：ブルー」になりますが、❽を「ON」にすると任意の配色に変更できます。
▪「Wysiwyg環境」ではなく、編集の快適さを主目的にした機能です。
▪ブラックモード（暗背景色スキン）を利用する場合に特に有効です。
画像・動画・アメブロ絵文字などを選択した場合、デフォルトはブルーの反転色により選択対象の中身が隠されます。 選択反転色を透過のスモークグリーンにして、何を選択しているかを判り易くします。
▪「Wysiwyg環境」ではなく、編集の快適さを主目的にした機能です。
その他の設定項目
デフォルトでは動画は左寄せですが、ブログページで動画を中央配置にしている場合に、編集枠内もそれと同じレイアウトにします。
編集中に動画内容を再生したい場合は時々あります。 動画の選択に再生が必要な場合があり、また再生しながらの編集は楽しいものです。 デフォルトでは再生ができませんが、⓫ を「ON」にすると再生可能になります。
ブログ誌面でプログラムコード「PRE枠」を掲載するユーザーはそう多くないですが、その枠内のフォント指定をブログの本文フォントと同じにします。
ブログ誌面でウェブフォント「Font Awesome」を表示利用する場合は、現在はフリースペースを利用するのが良いと思われます。 このフォントを利用している場合、編集枠内でも同様に表示させるには「@import指定」が必要です。
▪⓭ を「ON」にすると、編集枠内で「Font Awesome」が表示可能になります。
▪ブログページ側で「Font Awesome」を利用する方法は、以下で紹介しています。
編集枠の左右の余白部の配色を、編集枠全体の配色に適したものにします。
▪この機能は、「Ameblo Writer」の編集枠デザインを補完するもので、「Ameblo Writer」が正常に機能している場合は「ON」にしても無効の様に見えます。
編集枠のスクロールバーの配色を、編集枠全体の配色に適したものにします。
▪この機能は、「Ameblo Writer」の編集枠デザインを補完するもので、「Ameblo Writer」が正常に機能している場合は「ON」にしても無効の様に見えます。
デフォルトでは、編集枠内への画像のドロップ操作で画像挿入が可能です。 しかし、これは誤った位置にドロップしがちなので、これを使えなくする安全設定です。
▪⓰ を「ON」にすると、画像のドラッグ&ドロップが無効になります。
▪編集画面の右パレットへのドラッグ&ドロップは機能します。
Ameblo Writer の環境管理 と補完
「Stylus」の「iframe内」の修飾は、ブラウザのアップデートで障害される場合があり、これは過去に何回も経験しています。 その際に「Ameblo Writer」が支えていた「Wysiwyg環境」や編集枠のデザインが無効になります。
「Ameblo Wysiwyg」は、障害の際に「Ameblo Writer」が失ったアレンジを、代わって適用します。 メニューの「✜」の項目は、正常時は「Ameblo Writer」の指定が優先的に適用され、全く反映しない様に見えますが、障害時は「Ameblo Wysiwyg」の設定のみが機能する状態になります。
「Stylus」の障害は数ヵ月も続く場合が多く、ユーザーは障害発生・改善の変化に気付けない事があるので、「Ameblo Wysiwyg」は編集開始時に、この状況を監視する機能を実装しています。
▪障害の無い状態では「障害を報告」を選択し、障害が発生している状況では「改善を報告」を選択します。
▪障害の環境に変化があると、編集画面を開いた最初にアラートが表示され、このメニューに状況が報告されます。
▪PC環境によっては、この機能が誤判定をする場合があります。 誤判定が煩わしい場合は「OFF」を選択して、この監視機能を停止してください。
このツールの最新バージョンは、以下のリンクリストから探せます。
