リンクカードのコピー
下はアメーバブログのリンクカードのサンプルです。
これは、スタッフブログの記事からコピーして、ブログ編集画面に貼り付けたものですが、もちろん元のリンクカードと全く同様に機能し、リンク先を開くことができます。 このサンプルの様に「他のブログ記事」➔「ブログ編集画面」の間でリンクカードをコピーするために作ったツールが「LinkCard Copy」です。
HTMLデータを取得してコピーする
ブログ記事上のカード部分をドラッグ反転して選択し、コピーして編集画面に貼り付けると、下の様に「テキストリンク」＋「カバー画像」が貼付けられますが、カードのデザインが崩れた（無くなった）状態になります。
カードが壊れた理由は「HTMLコピーじゃない」からですね。 カードのデザインを含めてそっくりコピーするには、カードの「HTMLコード」をコピーして、それをHTMLの編集画面に貼り付ける必要があります。
自分のブログ記事のリンクカードをコピーする場合は、その記事を編集画面に開いて、HTML編集画面でカード部分のHTMLコードをコピーして、コピー先の記事ではHTML編集画面を開いて、必要な場所に貼り付ける操作が必要です。
しかし自分のブログ記事でない場合は、編集画面に開く事は出来ないので、HTMLコードのコピーが出来ません。 上のサンプルはその場合です。 しかし方法はあります。DevToolsを使って目的のカードのHTMLを調べ、「要素のコピー」で「HTMLコード」がコピー出来ます。 それをHTML編集画面に貼り付ければOKです。
以上の操作は、少し慣れればそう難しい事ではありません。 しかし、さっと出来る事ではないのは、想像が付くと思います。 この間、これまでに公開して来た多数のツールの更新記事を纏めましたが、リンクカードのコピーが大変に煩雑な作業だと改めて気付きました。 そこで「LinkCard Copy」を作って作業に充てたのです。
「LinkCard Copy」の仕様と操作
このツールは、常に「ON」にして「常駐型」ツールとして使用しても良いし、めったにリンクカードのコピー等しない場合は、必要な時だけ「ON」にする「非常駐型」の扱いで良いと思います。 これはユーザーしだいです。
「LinkCard Copy」がコピーできるのはアメーバブログのリンクカードだけです。 これは、リンクカード全体を指定する Class名「ogpCard_root」が、アメーバ独自のクラス名で、それを宛にしてカードのHTMLコードを取得（コピー）する操作をしているからです。
〔参考〕
コピーしたHTMLコードは他のブログシステム等で使用できる事が多い様です。 これは、リンクカードの本質が「デザインされたリンク」に過ぎないからで、リンクカードの他ブログへの転用は昔から知られたテクニックです。
リンクカードのHTMLコピー
● コピー対象のリンクカードを「Ctrl+右Click」します。
▪ ラフな操作をすると、リンク先が開いたり、ブラウザのコンテキストメニューが開いたりする事があるので、正確なクリック操作が肝心です。
● この操作で「Copied 」の小パネルが表示されます。
以上でHTMLコピーが完了しています。 小パネルは自動で消えます。
操作の様子
編集画面に貼り付ける操作
「LinkCard Copy」を使うと、カードの「HTMLコピー」がワンタッチで出来ます。 後はブログ編集画面で「HTMLペースト」が必要ですが、「Elements Palette ⭐」を常駐していると、この作業は一瞬で終わります。
● カードを貼り付ける行にキャレットを入れ、「Pause+Shift ➔ F11」のショートカットを押します。
▪「Pause+Shift」は同時押しで、その後に一瞬間を置いて「F11」を押します。
このショートカットで、キャレット位置にリンクカードが貼付けられます。
ツールの制作上で考慮した事
コピー対象がリンクカードなので、カードを指定する操作でリンクを機能させない事が必要でした。 カード本来のリンク動作を無効には出来ませんから、カードをクリックしてもリンク動作にならない「右Click」が一番無難です。「左Click」によるコードも幾つか試しましたが、やはり無理があり採用できませんでした。
一方、「右Click」は本来はブラウザの「コンテキストメニュー」の表示に使われ、これはパワーユーザーには必要な機能です。 そこで、「Ctrl」「Shift」「Alt」等の機能キーを同時に押した場合を、このツールの起動に使う事になります。
結局、覚え易い「Ctrl+」を使う事にしましたが、「Ameblo Lightbox JS」を利用している場合は、カードのサムネイルは「img要素」なので「Ctrl+右Click」でサムネイルの拡大表示になります。 しかし、リンクカードのそれ以外の場所では、このツールのコピー対象の選択になるので、問題はないでしょう。
「LinkCard Copy」を利用するには
このツールは Chrome・Edge・Firefox版の拡張機能「Tampermonkey」上で動作します。 以下に、このツールの導入・更新の手順を説明します。
❶「Tampermonkey」を導入します
◎ 使用しているブラウザに拡張機能「Tampermonkey」を導入する事が必要です。
既に「Tampermonkey」を導入している場合は、この手順 ❶ は不要です。
拡張機能の導入については、以下のページに簡単な説明があるので参照ください。
❷ スクリプトコードを登録・更新します
「LinkCard Copy」のコードは「GitHub」で配布しています。
● 以下のリンクを押すと「LinkCard Copy」を簡単に「インストール」できます。
● 下の様な確認画面が表示されたら、「スクリプト名（ツール名）」「バージョン」を確認して、「インストール」または「上書き」のボタンを押します。
以上の操作で、「Tampermonkey」の「インストール済み UserScript」のリストに「LinkCard Copy」の最新バージョンが登録・更新されます。
▪ ダッシュボードのリストは「 リロード」すると、新しい登録が反映します。
「自動更新」の設定について
「自動更新」対応のツールは、以下の設定をすることで定期的な自動チェックによる更新版のインストールが可能です。（スクリプトの自動更新）
Chrome / Edge では、拡張機能の「管理」➔「Tampermonkey」の「詳細」で
●「ファイルの URL へのアクセスを許可する」を「ON」にします。
「Tampermonkey」の「ダッシュボード」➔「設定」タブで
●「UserScript の更新」の項で、適当な「確認の間隔」を設定します。
「自動更新」の設定の詳細については、以下のページを参照ください。
上記の設定をせずに、任意のタイミングで手動で「スクリプトの更新」が可能です。
●「ポップアップ」のメニューの「 UserScript の更新を確認」を押します。
「LinkCard Copy」最新版に関する記事について
スクリプトツールは、動作対象ページのHTML変更などで正常動作が不能になる場合があります。「自動更新」や手動による「更新」で、最新バージョンを利用することをお勧めします。
「LinkCard Copy」の最新バージョンに関する記事は、以下のページのリンクリストから探せます。
