▪このマニュアルは「LinkCard Editor ⭐ ver. 4.8」以降に対応します。
▪このページの説明や画像は「Ameblo Writer Compact」を編集画面に適用したものですが、このアレンジ適用が無い通常の画面でも、ツールは機能します。
▪このツールは右クリック操作を使用していないので、説明上で左クリック操作を全て「Click」と表記しています。
2023.09.01 更新
「LinkCard Editor ⭐」の起動とカードの選択
● 通常表示の編集画面で「Ctrl+F6」を押すと「LinkCard Editor ⭐」が起動します。 また、起動中に「Ctrl+F6」を押すとツールが終了します。
▪このツールはリンクカードのアレンジ機能なので、カード編集の途中でツールが終了しても、データが失われる事は殆どありません。
▪ツールが起動すると、編集枠上部に「操作パネル」が表示され「画像パレット」が同じ背景色になります。「画像パレット」は画像登録が出来ますが、記事への画像挿入の操作が、カードの「カバー画像」の設定機能に切り替わります。
▪このツール起動中は、記事への画像挿入は出来ない事に注意してください。
▪編集するカードが選択されていない状態では、「操作パネル」は初期表示で操作に反応しません。
● 編集するカードを「Ctrl+Click」して選択します。 選択したカードに青枠が表示されると、カードの編集が可能になります。
▪ver.5.0 以降は ツール起動以降に生成したカードも処理可能になりました。
▪カードを選択すると「記事タイトル」の'『』'を削除します。 この括弧はアメーバブログ記事のリンク作成時に追加されるものです。 また、「リンクマーク」を独自の「SVG」画像に変更し、カードの中央寄せ配置（センタリング）を設定します。
▪カードを選択すると、❸背景色 ❺文字色 ❻リンクURL ➓枠線色 ➒枠線幅 ⓬リンクマーク色などの設定が取り込まれ、「操作パネル」上に表示されます。
▪複数のカードがある場合に、あるカードの編集中に他のカードを「Ctrl+Click」すると、それまでの編集を終了してクリックした他のカードが編集状態になります。 同時に「操作パネル」の表示は、新しく選択したカード用に刷新されます。
▪カードの編集中に「HTML表示」に切替えた場合は、その時点の状態でカード編集が終了し、カードの選択が解除されます。
▪カードの編集中に「投稿」「下書き保存」等を行った場合は、それまで編集をした状態のカードが投稿・保存されます。
「型変換」と「配置」
● ❶型変換 を「Click」すると、カード型式が「標準 → 中型 → 小型 → 標準」の順に切り替わります。 このボタンで必要なカード型式を選択します。
▪カードのデザインが変わるだけで、カードのデータ自体は変化しません。
▪「標準」はアメーバのデフォルトのリンクカードのサイズですが、記事の説明部が複数行（最大3行～1行）に拡張され、リンク先の情報を最大限に表示できます。
▪「中型」以下は最大幅500pxです。 ブログスキンによっては、カードの表示幅が制限されます。 スマホの表示は、機種のディスプレイ幅に制限されます。「中型」は記事の説明部が複数行です。
● ❶型変換 を「Ctrl+Click」すると「軽量化」の機能が起動します。 確認ダイアログで「OK」を押すと、カードの「カバー画像」と「記事の出だし」を削除した上で「小型」のデザインを適用します。
▪カードの文字数が半角1500文字程度（通常の60%）に抑えられ、文字数制限が問題になる場合に「軽量化」は有効です。
▪「軽量化」を指定した直後なら、「Ctrl+Z」または編集アイコンのアンドゥ「 」でカードを元に戻せます。（ツールが停止するので「Ctrl+F6」で再起動が必要です） アンドゥが無効な場合は、リンクカードを最初から作りなおす必要があります。
● ❷配置 でカードの「左寄せ」「中央寄せ」「右寄せ」の配置を指定します。
▪記事の本文幅が「標準 / 620px」「中型以下 / 500px」より大きい場合のみ、この指定がカードの配置状態に現れます。 本文幅がそれより狭い場合は、カード幅が本文幅と同じになるので、配置指定が表示上では無効になります。
「カード背景色」の指定
● ❸背景色 を「Click」するとカラーパレットが表示されます。
▪カラーパレットで選択した色がカードの「背景色」に設定されます。 カラーパレットの操作は、通常の文字色・文字背景色の操作と同じです。
● ❹濃度 のスピナー操作で、背景色の濃度を「0.1～1.0（初期値）～10」の間で調整します。 文字が読み易い淡い背景色設定が、この調節で簡単にできます。
「文字色」の設定
● ➎文字色 のボタンを「Click」するとカラーパレットが表示されます。
▪カラーパレットで選択した色がカードの「基本文字色」に設定されます。
▪「基本文字色」の指定は、最も簡単にカード全体の文字色を指定する方法です。 ただし、各テキスト部分で文字色の指定をした場合は、その指定が優先されます。
▪長い「記事タイトル」が表示枠に収まらない場合に、3点リーダー「…」が表示されます。 この記号の色は「基本文字色」で指定され、他では変更できません。
「枠線」のデザイン
● ➓線色 を「Click」するとカラーパレットが表示されます。 カラーパレットで選択した色がカードの「枠線色」に設定されます。
● ⓫枠線幅 のスピナー操作で「枠線幅」を「0px～5px」の間で調節できます。
「リンクマーク色」の指定
● ⓬リンクマーク色 を「Click」すると、カラーパレットが表示されます。 カラーパレットで選択した色がカードの「リンクマーク」の色に設定されます。
「デザイン登録」と「デザインの適用」
● ⓭「 」ボタンを「Click」すると、選択したカードのデザインをローカルストレージに登録します。
▪登録される内容は「カード型式」「軽量化指定の有無」「配置」「背景色」「文字色」「枠線幅」「枠線色」「リンクマーク色」「ドメイン表示の標準・強調の設定」「リンクマーク・ファビコンの設定」です。 カードタイトル等の文字修飾は保存されません。
▪ブラウザを終了しても記録は保持され、ユーザーが登録を更新するまで登録した内容は変わりません。
● ⓮「 」ボタンを「Click」すると、登録されたデザインをカードに適用します。
▪この機能は、カードデザインの雛形を作り、ブログを通じてデザインを統一する事を想定しています。 主要なデザイン設定が簡単に適用でき、カードを作るたびに過去に設定したデザインを確かめる必要がなくなります。
「ドメイン表示」部のデザイン選択
● ⓮「 」ボタンを「Shift+Click」する毎に、「リンクマーク」の「赤」と「ドメイン表示」の文字色「#222」「太字」の「強調表示」⇄「標準」の変更をします。
▪「リンクマーク」と「ドメイン表示」の文字色は ⓬リンクマーク色 ➎文字色 でも設定ができます。 これらは最後に行った指定が優先する仕様です。
● ⓮「 」ボタンを「Ctrl+Click」するごとに、「リンクマーク」⇄「ファビコン」の変更をします。
「カバー画像」の変更
リンクカードの「カバー画像」が意図したものと違う場合に、ユーザーが用意した任意の画像と差し換える機能です。 また、リンクカードが「カバー画像」無しで生成される場合に、「カバー画像」付きのカードをデザインできます。
● 編集画面の「画像パレット」のリストを「Click」すると、選択した画像が編集中のカードの「カバー画像」に設定されます。 これは記事に画像を挿入するのと同じ要領で、何度でもやりなおせます。
▪画像は既に他の場所で使用しているものが使えます。 しかし「カード」で使用するための画像を用意して、アップロードをして使用するとベストです。 画像サイズは「120×120px」以上で正方形に近い縦横比の画像が適しています。
「リンクURL」のドメイン表示
❽「 」記入ボタン を「Shift+Click」すると「ドメイン表示」に「URL入力枠」の内容が全て書き込まれます。
▪もう一度「Shift+Click」すると、元のドメイン表示に戻ります。
▪「ドメイン表示」は単なるテキスト表示なので、カードの「テキスト編集」によってリンクURLとは無関係の文字列を表示する欄に利用する事ができます。
▪「テキスト編集」により書き変えた「ドメイン表示」は、❽「Shift+Click」で元の表示に戻せます。
「リンクURL」の書換え機能
アメブロ以外の外部サイトで、リンクカードを生成する条件に合わず、カードが生成されない場合があります。 しかし、どうしてもカードを作りたい場合に、この機能がそれを可能にします。
要領は、適当なリンク対象のURLでリンクカードを作り、その「リンクURL」を以下の手順で、必要な（カードが作れない）リンク先のURLに書換えます。 後は、「カバー画像」「記事タイトル」「記事の出だし」等を修正し、カードを手作りします。
「リンクURL」を書換える手順
カードを選択すると ❻URL入力枠 には、そのカードの「リンクURL」が読み込まれて表示されます。
●「URL入力枠」の中を「Click」すると、操作パネルの幅いっぱいに拡がります。
拡張した入力枠の左端には ⓯「 」縮小ボタンが表示されます。 これを「Click」すると、入力枠を元の幅に戻すことができます。
● ➐「 」クリアボタン をクリックすると入力枠内がクリアされ、空白になります。
● 入力枠に新しく書き変えるURLをペーストします。
● ❽「 」記入ボタン を「Click」すると、書換の確認ダイアログが表示されます。
確認ダイアログで「OK」を押すと ❻URL入力枠 の内容がカードの「リンクURL」として書き込まれます。 書き込みが完了すると入力枠が数秒間グリーンになります。
▪ ❻URL入力枠の中を書換えただけでは、実際の「リンクURL」の書換えは「OK」を押さない限り行われません。
▪書換え時の確認ダイアログで「キャンセル」すると、枠内は本来の「リンクURL」に戻ります。 この時も入力枠が数秒間グリーンになります。
▪❻URL入力枠 の内容が、それまで設定されていた「リンクURL」と異なっていれば、どんな文字列でも記入されます。 URLとして有効かどうかは判定できません。
▪カードを「右click」して「リンクを新しいタブで開く」を選択すると、有効なリンクが設定されたかどうかを確認できます。
●「リンクURL」の書換え後に ❽「 」記入ボタン を「Shift+Click」します。
この操作で「ドメイン表示」が、新しい「リンクURL」を反映した表示になります。
▪「Shift+Click」の操作ごとに「ドメイン名 / リンクURL」が切り替わります。
● ver. 3.0 で ❻URL入力枠で「Enter」を押す操作に ❽「 」記入ボタン の機能を持たせました。 また、入力内容が無変更で「Enter」が押されると ❻URL入力枠が元サイズに戻る機能を追加しました。 これらの結果、新しい「リンクURL」をペーストした後の操作を、全て「Enter」キーで行えます。
注意
「リンクURL」を書換えると、カード上の「記事タイトル」「カバー画像」などの内容が、リンク先のページと一致しなくなります。 ページの信頼性を失わないために、必ずそれらを適当なものに修正する事をお勧めします。
「リンクURL」の短縮化
Amazonの製品ページのURLでリンクカードを生成すると、リンクURLは大変に長く無駄な記述が含まれます。 多くの場合、これを短縮化することができます。
● ➒URL短縮化 を「Click」すると、URLをワンタッチで短縮化します。
▪Amazonサイトのリンクに関しては、専用の短縮化が実行されます。 また、一般のサイトのリンクの場合は「クエリ文字列」を削除します。
▪リンクURLの短縮化が出来ない場合は、元のままになります。
▪「短縮化」の実行後に、「URL入力枠」が一瞬グリーン背景になります。
▪ブラウザの右クリックメニューで、短縮化したURLが有効か確認してください。
カードの「テキスト編集」
カード上には「記事タイトル」「記事の出だし」「ドメイン表示」のテキスト部分があります。 これらのテキストの内容は編集する事が可能で、編集アイコンを使った文字修飾を加える事も可能です。
◎「記事タイトル」「記事の出だし」がそぐわないので修正したい
◎ カードの細かな部分のデザインにも手を加えたい
◎ リンクURLを書き変えたので文言の修正が必要
◎ 「ドメイン表示」をリンクURLにしたいが、長すぎるので修正
といった場合に、テキスト部分の編集が必要になります。
● 選択したカードのテキスト部分を「Ctrl+Click」すると、選択部分に「青枠」が表示されます。 青枠内部にキャレットを入れるとテキスト編集が可能になります。
▪「操作パネル」上にテキスト編集で機能するショートカットが表示されます。
▪「テキスト編集」時は、「記事タイトル」「記事の出だし」「ドメイン表示」で非表示になっていた部分があれば、全て表示されます。 このため、カードの高さが本来よりはなはだしく増す場合があります。
▪「テキスト編集」を終了するには、カード外側の「青枠」内でテキスト部分以外の場所を「Click」または「Ctrl+Click」します。（「カバー画像」の「Click」が簡単です） これで、テキスト部分の「青枠」が解除されます。
▪ 画像・アメブロ絵文字の挿入、テキストのペースト操作等は レイアウト崩れを生じます。「Ctrl+Z」または編集アイコンのアンドゥ「 」で戻せますが、スクリプトが停止するため、「Ctrl+F6」でツールを「OFF」→「ON」する必要があります。
▪選択した「青枠」内へのテキストのペーストは、「Ctrl+Shift+V」（プレーンテキストとして貼り付ける）で行うとレイアウト崩れを生じません。
● 選択したカードのテキスト部分を「Shift+Click」すると、その部分のテキストを全て選択（反転表示）した状態で、テキスト編集の状態にできます。
▪ テキスト部分の範囲全体の文字色や太字等を指定する時に便利です。
バルーンヘルプ（操作説明）の表示・非表示
初期設定では、パネル上のボタンにマウスを乗せると、操作説明のバルーンヘルプが表示されます。
操作に慣れるとこのヘルプが邪魔になるので、非表示にできます。
● パネル左下隅の「Ⓗ」ボタンを押して、確認ダイアログで「OK」を押します。
▪もういちどこのボタンを押して「非表示➔表示」に戻すことが可能です。
▪この指定はローカルストレージに保存され、次に変更するまで保持されます。
●「 」ボタンは、マニュアル（このページ）を表示するリンクボタンです。
追補
Chrome・Edge の問題ですが、「HTML編集」を開き「通常表示」に戻ると、それまでの記事上のカードが編集できなくなる場合があります。 これは編集画面の特性に起因する様です。 経験上、以下の対処方法が使えます。
▪編集アイコンで「アンドゥ➔リドゥ」を2回ほど繰り返すと編集可能になります。
▪この問題は Firefoxでは生じません。
このツールの最新バージョンは、以下のリンクリストから探せます。
