テキスト編集機能を改善
「リンクカード」は「記事タイトル」「記事導入部」「リンク先ドメイン表示」の3種のテキスト表示部分があります。「LinkCard Editor ⭐」はこれらの全てのテキストを自由に編集可能です。 下の緑枠は編集可能なテキスト部分です。
これまでは、カード全体を包括する「div要素」に「contenteditable="true"」の属性を指定する事で、このテキスト編集を実現して来ました。 しかし、この設定下ではHTML要素のタグも「削除可能」で、編集を誤るとカード全体のデザインが崩れる問題がありました。
これを抑える工夫を色々としましたが、完全ではなく、テキスト部を別場所に呼込んで、そこで編集した結果を元に戻す「別エディタ」方式を構想していたのですが、もっと簡単に問題を回避する方法に気付きました。
カード全体に「contenteditable="true"」を指定せず、編集する部分（span要素）ごとに、編集する時だけ「contenteditable="true"」を指定すれば、テキストのみを編集ができるのです。 この方法によって、HTMLタグを間違って削除する事がなくなり、これまでの問題を完全に解決出来ました。 カードが崩れる事はなくなり、安心してテキストの編集ができます。
更新したテキスト編集の操作
編集の方式を改めた事から、操作方法が少しシンプルに判り易くなりました。
テキスト部分の編集
● カードを選択（全体に青枠）し、編集するテキスト部分を「Ctrl+Click」します。
● クリックしたテキスト部分の文字が全て表示され、青枠が表示されます。
▪「記事導入部」で、表示されずに隠れたテキストがある場合は、カード全体の高さが高くなって全ての文字が表示されます。
▪ 青枠が表示されたテキスト部分は、キャレットを入れて普通の記事編集と同様の方法で文字編集ができます。
▪ 編集アイコンによる太字・アンダーライン・文字色・文字背景色・文字サイズ指定など、ほぼ全ての文字修飾が可能です。
▪ 編集アイコンの「 」（戻る）の操作は有効ですが、通常はツールが停止するので、ツールの「OFF → ON」が必要になります。
▪「記事タイトル」も同様に修飾可能ですが、太字指定は通常は変更できません。
●「記事導入部」に隠れた文字がある場合は、「リンクマーク」「ドメイン表示」を選択しようとするとカードが縦拡張をして、選択が出来ません。「記事導入部」の不要行を削除して縦拡張をしない様にすると、これらを選択できます。
「リンクマーク」も文字なので、上の右端の様に文字色指定などの修飾ができます。
テキスト部分の全選択
青枠内のテキスト部分の全てに対して、文字色などの修飾を指定したい場合は、キャレット操作で選択操作ができますが、もっと良い方法があります。
● 目的のテキスト部分を「Shift+Click」する事で、簡単に全選択ができます。
▪ これは「青枠」が付いて編集可能になり、更に全選択された状態です。
テキスト部の文字色を一括で変更
● カードを「Alt+Click」すると、カード上の全て文字色を一括して変更できます。
下は、この操作を行っているところで、カードテキスト部全体に黒枠が表示され、最初は基本の黒基調の文字色になります。 カラーパレットで色を選択すると、カード全体がその文字色になります。
▪ パレット外のクリックすると文字色の指定が中止されます。
▪ もう一度「Alt+Click」すると、黒基調のデフォルトの文字色に戻せます。
▪「記事タイトル」の「…」は、この方法でしか色指定ができません。
▪ 全体の文字色を指定した上で、テキストの文字単位で文字色指定ができます。
ドメイン表示部の特例
「ドメイン表示部」は「テキスト部分」として編集・文字修飾ができますが、特別な修飾機能が使えます。
● パネル右端の「 」ボタンを「Shift+Click」すると、「リンク先ドメイン表示」に「強調表示」のデザインがワンタッチでセットされます。
● パネルの「URL入力枠」右側の「 」ボタンを「Shift+Click」すると、この操作ごとに、「ドメイン名 / リンクURL」の表示が入れ替わります。
「LinkCard Editor ⭐」のマニュアル
「LinkCard Editor ⭐」の基本操作の詳細は、以下のマニュアルを参照ください。
「LinkCard Editor ⭐」ver. 3.1 の導入手順
このツールは Chrome / Edge / Firefox の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入手順を簡単に説明します。
● ページの文字数制限のため、スクリプトコードは前ページに置いています。
❶「Tampermonkey」を導入します
使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。 以下のページに簡単な導入の説明があるので参照ください。
❷「Tampermonkey」にスクリプトを登録します
●「Tampermonkey」の「＋」マークの「新規スクリプト」タブを開きます。
●「新規スクリプト」には、最初からテンプレートが記入されています。 これは全て削除して、完全に空白の編集枠に 前ページのコードをコピー&ペーストします。
〔コピー方法〕 軽量シンプルなツール「PreBox Button 」を使うと
コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」
の操作で、掲載コードのコピーが可能になります。
● コード行数が多い場合のペースト操作は、「編集枠」の第1行目に「ゴミ文字」が混入していないかを確認してください。
● 最後に「ファイル」メニューの「保存」を押すと、ツールが使用可能になります。
「LinkCard Editor ⭐」最新版について
旧いバージョンの「LinkCard Editor ⭐」は、アメーバのページ構成の変更で動作しない場合があり、導入する場合は最新バージョンをお勧めします。 最新バージョンへのリンクは、以下のページのリンクリストから探せます。
