操作パネルの一時的な非表示
「記事タイトル」に検索語がヒットした場合、その文字列をハイライト表示できれば良いのですが、それは困難です。 その理由は、「タイトル入力枠」が「input要素」で、ハイライト表示をするHtmlコードを書き込めないからです。（入力枠はプレーンなテキストしか受付けません）
従って無理な工夫をするより、ヒットした事を表示して、手作業での編集処理をユーザーに任せるのが妥当です。 最大48文字で、問題の文字列は直ぐ判断できますから。 入力枠内の文字列の置換え処理は可能ですが、今回は触らない事にします。
従って要求されるのは、以下のシンプルな処理です。
①「記事タイトル」にヒットがある場合は「オープンボタン」を表示。
➁「オープンボタン」を押すと、「操作パネル」を退けて「タイトル入力枠」を表示し、編集可能にする。
➂「オープンボタン」を再度押すと、「操作パネル」が元に戻る。
これまで、どの様に「操作パネル」を退けるかで苦慮して来たのですが、前回のコードを推敲していて、思わぬ発見がありました。
「タイトル入力枠」の「z-index」
「タイトル入力枠」の全体要素は「.p-title」ですが、この要素は下図の青枠の範囲を占めています。「Ameblo Writer」のアレンジは、その右端に「プレビュー」「管理トップ」のボタンを移動して表示しています。
「操作パネル」の位置は、「S-R in Editor ⭐」の処理時に「プレビュー」「管理トップ」のボタンを隠す目的があるのですが、「.p-title」の「z-index」を操作すると「プレビュー」「管理トップ」が押せなくなる事に気付いたのです。
つまり、「z-index」の操作で右端のボタン類をマスクできるため、「操作パネル」は移動ではなく「非表示」にするだけで良く、ずっと処理が簡単になりました。
「記事タイトル」の処理コードを実装しました
なんとか「S-R in Editor ⭐」に「記事タイトル」の検索機能を追加できました。 従来の操作で「記事本文」の処理をしていて、もし「記事タイトル」に問題としている「検索語」がある場合は、それを「オープンボタン」が知らせます。
「オープンボタン」が表示されても、「記事タイトル」は対象外ならそのまま放置しても構いません。「記事タイトル」を問題にするなら、「オープンボタン」を押して「記事タイトル」の編集が行えます。
この機能は「C」ボタンを使った「連続処理」でも機能し、従来の機能を損なう事なく「記事タイトル」に検索範囲を拡張出来たと思います。
「記事タイトル」のヒット示す「オープンボタン」
下図の左端のボタンが、「記事タイトル」にヒットを示す「オープンボタン」です。 このツールの「ヒット文字列」のハイライト色と同色にしました。
ブログ記事の「本文」に対して検索が行われた段階で、同時にその検索語で「記事タイトル」を検索し、ヒットすれば「オープンボタン」を表示します。
●「オープンボタン」を「左Clcik」すると「タイトル編集枠」が表示されます。
下は、「オープンボタン」を押した状態です。
▪ 通常の編集時と同様に「記事タイトル」の編集が可能になります。
▪「操作パネル」は非表示になり、「本文」の検索機能は「検索語」を保持した初期状態で待機しています。
●「オープンボタン」を再度「左Clcik」すると「操作パネル」が復活し、「本文」の検索操作を再開できます。
▪もし「記事タイトル」からヒット語が処理されて無くなると、次に「操作パネル」で「検索」を行った際に、「オープンボタン」は消えます。
▪「S-R in Editor ⭐」を「Ctrl+F12」や「✖閉じる」で終了した時に、「オープンボタン」はヒット語の有無にかかわらず、同時に消えます。
▪ 暗背景の「置換確認画面」の段階でも「オープンボタン」は表示されます。 これは「C」ボタンによる連続処理時に「記事タイトル」のヒットを知らせます。 しかし、この状態の「オープンボタン」は、データ安全上で押せません。「記事タイトル」の編集は「置換」処理後に行ってください。
▪「検索・置換」で「一括」を選択しても、「記事タイトル」は処理されません。
「S-R in Editor ⭐」に関連する スタイル・ツール
「Ameblo Writer Compact」
「S-R in Editor ⭐」はデフォルトのブログ編集画面でも動作しますが、デザインのベースは「Ameblo Writer Compact」でアレンジした編集画面です。 この検索ツールを利用する方には、「Ameblo Writer」の導入は難しくないでしょう。
「Ameba Search Repeat」
ブログのメンテナンスに「S-R in Editor ⭐」は無くてはならないツールですが、このツールをフル回転させるのが「Ameba Search Repeat」です。
これは、アメーバのブログページから起動する「ブログ内検索」を改善し、更に、検索した記事を編集画面に直接開く機能があります。 ブログ全体の記事チェックと修復を行う場合に、この二つのツールのコンビは大変に役にたちます。
「S-R in Editor ⭐」の操作マニュアル
「S-R in Editor ⭐」の基本操作は以下のページの操作マニュアルを参照ください。
「S-R in Editor ⭐」を利用するには
このツールは Chrome / Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に「S-R in Editor ⭐」の導入手順を説明します。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷ 「S-R in Editor ⭐」のコードを入手します
「S-R in Editor ⭐」のコードは「Github」で配布しています。 以下のリンク先はこのページの更新内容を実装した「ver. 3.4」です。
リンク先は下の様な画面です。
ブラウザの自動翻訳が働き、コード枠内の一部が書換えられる場合があります。 しかし、赤枠のボタンはソースコードをコピーするので心配はありません。
▪ 赤枠の部分にコピー用のボタン「 」があり、これをクリックします。
これで、掲載されたコードがクリップボードにコピーされます。
▪「Tampermonkey」の管理画面で「＋」マークの「新規スクリプト」を開きます。
▪「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠にしてください。
▪ 空白にした編集枠内をクリックして「Ctrl+V」を押す、または、右クリックをして「貼り付け」を選択します。
▪ コードの先頭までスクロールして、最初の行から正しく貼り付けられたかを確認して、最後に「ファイル」メニューの「保存」を押します。
以上で、ツールが使用可能になります。
〔追記〕2024.01.04
起動を示す「ライトブルーの影」の表示コードを削除しました。 ver.3.3 ➔ ver.3.4
「S-R in Editor ⭐」最新版について
旧いバージョンの JavaScriptツールは、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。
●「S-R in Editor ⭐」の最新バージョンへのリンクは、以下のページのリンクリストから探せます。
