更新ブログを書く上で、あると便利なのが、キャプチャ画像のサムネイルが付いたリンクをすぐに作れる仕組み。Chrome拡張機能を使えばあっという間に出来ます。以下のコードを書き込みます。以下のコードを書き込みます。URL+」の設定変更キャプチャ付きリンクをショートコードで作ってみましたリンク先を更新⇒リンク元も即時更新とりあえずジェネレーターより楽な仕組みはあった方がいいジェネレータで作ると5秒はかかるのでもっと効率化したいキャプチャ画像のサムネイルが付いたリンクを作る方法として、最もポピュラーなのが、ジェネレーターの利用でしょう。~ブログで飯を食う~記事によると、以下の手順でキャプチャ画像付きリンクが生成されます。紹介したいウェブページを発見そのウェブページのURLをコピーはてなブログ記事紹介ジェネレータにアクセス紹介したいリンクURLを入力欄にペースト「コード出力」をクリックコードが出力されるのを待つコードをコピーブログ記事編集画面でコードをペースト確かに、HTMLを手打ちしてキャプチャ画像付きリンクを作るのに比べれば、はるかに便利です。今回紹介する方法なら、上の2.~7.までが、キーボードの「3」を押すだけで完了してしまうのです。紹介したいウェブページを発見キーボードの「3」を押すだけで瞬間コード生成ブログ記事編集画面でコードをペーストこれでキャプチャ画像付きリンク完成です。少々準備が必要ですけど、これなら十分取り組む価値があると思いませんか。準備といっても、この記事に沿って作業するだけですけどね。WordPressサイト以外でも使える方法まずは、WordPressサイト以外でも使える、HTMLコード直貼りでリンクを表示する方法から説明します。URL+に行って、Chormeに追加ボタンをポチッと押せば導入完了です。続いてChorme画面右上の横三本線のアイコンをクリック次に、ツール→拡張機能をクリック。URL+を探して、「オプション」をクリックします。設定画面は以下のような感じです。赤枠内は変数の表す内容を記述している重要部分です。(青枠は無視して大丈夫。)${sURL}..goo.glを利用して短縮したリンク先URL${URL}..短縮しないリンク先URL${title}..リンク先title${text}..選択したテキスト${n}..改行デフォルトでは、3行設定がされています。上から順に、以下のような意味合いになります。操作キーの設定を変更するデフォルトのままだとVが2つの設定に使われているので、ダブらないように設定しなおしましょう。3行目の「V」をクリックすると、「V」が「PressKey」に変化します。ここで新しい操作キーを押します。(3列目なので3にしました。)これで、操作キーの変更は完了しました。ついでに、1行目と2行目も操作キーを数字に変更します。「Enable」に全てチェックを入れれば、「1」,「2」,「3」キー(テンキーではダメです)でそれぞれの内容がコピーされます。試しに当サイトTOPページで、「1」,「2」,「3」キーを押すと、それぞれどうなるか確かめましょう。href=”https://webshufu.com/”>ウェブシュフ</a>」が入力されます。キャプチャ画像付きリンク作成コードを設定さて、動作確認が終わったので、いよいよサムネイルサイズのキャプチャー画像付きリンクをワンタッチで作成する為の設定をします。個人的に「3」キーの設定はほとんど使わなさそうなので、ここをキャプチャー画像つきリンクコード生成用にしました。「${title}-${sURL}」をクリックすると入力可能になります。見た目を整えるために、自分が使っているテーマのstyle.cssに次のコードを入れました。(私の環境では機能しましたが、他の環境ではどうなるか分かりません。opacity:1;}/****記事本文中のサムネイルリンク**ここまで*****/キャプチャ付きリンクを作ってみましたせっかくシステムが出来たので、早速使ってみましょう。【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy|ウェブシュフに行って「3」キーを押すと、クリップボードに以下のようなコードが生成されます。style="clear:both;"></div></a></div>その後、WordPress投稿画面で、キャプチャ付きリンクを貼り付けたい場所でペーストします。投稿プレビューをブラウザで確認すると、以下のような画像つきリンクが現れます。紹介したいウェブページを発見キーボードの「3」を押すだけで瞬間コード生成ブログ記事編集画面でコードをペーストこれだけでキャプチャ画像付きリンクが出来ちゃいます。ブロガーなら入れといて損はない仕組みだと思います。WordPress利用者ならショートコードで生成しようここまで説明した内容で、所要時間3秒でキーボードの「3」を押すだけでキャプチャ画像付きリンクを作る事は、間違いなく出来ます。WordPressをお使いなら、もう一歩先に進みましょう。メンテナンスのことを考えれば、ショートコードでキャプチャ画像付きリンクを作っておいた方が良いのです。以下のコードを書き込みます。'image_link_capture');なお、CSSについては、WordPressサイト以外でも使える方法の場合と同じCSSをお使いのテーマのstyle.cssに書き込んでください。「3」キーの設定(赤枠内)をクリックして、下記を入力します。title="${title}"]これで、ショートコードでキャプチャ画像付きリンクを作る準備は整いました。キャプチャ付きリンクをショートコードで作ってみました【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy|ウェブシュフに行って「3」キーを押すと、クリップボードに以下のようなショートコードが生成されます。title="【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy|ウェブシュフ"]任意の場所にペーストして、投稿プレビューをブラウザで確認すると、以下のような画像つきリンクが現れます。【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy自サイトの記事へのリンクには記事中の最初の画像をアイキャッチ画像として表示するショートコードさらに一歩進んだショートコードを紹介します。自サイト内の投稿へのリンクの場合は、以下のような手順で「記事本文で最初に出てくる画像」付きリンクが作られます。「記事本文で最初に出てくる画像」をサムネイルサイズにカットサムネイルサイズの「記事本文で最初に出てくる画像」付きリンク生成つまり、自サイト内の投稿への画像付きリンクには、記事執筆時に苦労して選んだ画像が使われることになります。それ以外の場合は、これまで紹介した方法と同様、キャプチャ画像付きのリンクになります。以下のコードを書き込みます。'image_link');なお、CSSは、WordPressサイト以外でも使える方法の場合と同じCSSをお使いのテーマのstyle.cssに書き込んでください。「3」キーの設定(赤枠内)をクリックして、下記を入力します。title="${title}"]キャプチャ付きリンクをショートコードで作ってみました早速自サイトの記事へのリンクを作りましょう。webshufu.com内の投稿【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammy|ウェブシュフで「3」キーを押し、webshufu.com投稿編集画面で任意の場所にペースト・保存すると、以下のようなリンクが現れます。【WordPress高速化】レスポンシブデザインのサイトに必須!!画像切り替えプラグインHammyリンクについている画像がキャプチャではなく、投稿の一番最初に出てくる画像になっているのがわかるでしょうか。webshufu.com内であってもトップページやカテゴリページで「3」キーを押した場合は、キャプチャ画像のついたリンクが出来ます。ウェブシュフまた、webshufu.com外のページで「3」キーを押した場合も、キャプチャ画像のついたリンクになります。【第1回:テッテレー企画】捜せ!盗まれた三十路の品格!リンク先を更新⇒リンク元も即時更新このショートコードの特徴は、自サイト内の別記事に向けて張ったリンクのメンテナンスがとても楽になることです。リンク先の記事タイトルや「記事本文中の最初の画像」が変更されたら、リンク元の記事にある画像つきリンクの部分も即時自動更新されます。メンテナンスが行き届きやすくなるので、ユーザビリティーにもSEOにも悪くないはず。ジェネレーターより楽な仕組みはあった方がいい所要時間3秒!「3」キーを押すだけで画像付きリンクを作る3つの方法を紹介しました。短時間で画像付きのリンクを作れる仕組みはメリットが大きいです。導入を!!fシェアtツイートB!はてブ著者:ウェブシュフFP主夫ブロガー。メインサイトは家計ブログ。PHPやSEOと格闘しつつWordPressで運営しています。サイトをいじったときの備忘録などウェブ関連のことをまとめたサブサイトとして当サイトを運営しています。当ドメインの運営歴は現在8年目です。PM素晴らしい記事をどうもありがとうございました。私のブログにこの記事のこと紹介させて頂きました。これからも楽しく拝読させて頂きます。AMJn様、記事を紹介頂き有難うございます。これからも頑張ります。PM素晴らしい!この3秒画像つきリンクを導入して自分のブログがとても見やすく、作成も楽になりました!本当にありがとうございます。PMgekkoさん、お役に立ててうれしいです。作業が楽になるとブログもはかどりますよね。コメントをキャンセルメールアドレスが公開されることはありません。よる表記とプライバシーポリシ。