ブログ記事に画像付きリンクを挿入する2つの方法 、おすすめはこれ!

M

2018-09-09
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など
-

こんにちは。ブロガーのMです。

今回は、ブログをやっている人にとって不可欠とも言える「リンクの挿入」について。いつもより少し工夫し、「画像付き」でリンクを挿入する方法を考えてみました。

通常ですと、リンク先のURLをコピーしてからエディタを使い、記事で表示させたい箇所に「aタグ」を挿入するかと思います。

最近、ふとしたことがキッカケで、手軽に画像付きリンクって挿入できないのかしら?と思いまして。いろいろと調べてみたら、便利なツールを2つ発見しました。

実際に試してみたところ「普通にaタグを挿入するよりラクなんじゃね?!」と、思わずビックリ!!しかも、文字だけより見栄えもイイときたもんだ。

そんなわけで、同じブロガーさんでまだご存知でない方がいらっしゃったら一度ぜひ試してみては。

なお、これからご紹介する2つのツールにはリンク先によってそれぞれ向き不向きがあるようなので、上手に使い分けていただけると幸いです。



スポンサードリンク

画像付きリンクの挿入方法① Chromeの拡張機能「Create Link」を使う

まず、ひとつ目はGoogle Chrome拡張機能で「Create Link」というツール。

はてなブログを読んでいると画像付きリンクを貼ってるのを見かけたりしますが、このツールを使えばはてブじゃなくても同じように貼ることが出来ます。

テキストリンクと違い、このようなカード型リンクはサイト名やアイキャッチ画像、説明文が添えられるので見た目も良いし、訴求力も上がります。

最初がちょっとだけ手間ですが、それもたった一度だけ。設定後はラクに使えるので頑張りましょう。

さっそく導入の流れを見ていきます。


Chromeに拡張機能を追加する


まず、Chromeのウェブストアをひらいて、「Create Link」を検索。見つけたらインストールします。右上のChromeブラウザにCreate LInkのボタンがあらわれたらインストール完了です。


拡張機能の設定


続いて、追加した拡張機能の設定に入ります。設定が必要なのは最初の一度だけです。

Create Linkのボタンを押すとメニューが表示されますので、その中にある「Configure」(設定のこと)をクリックします。

すると、画面が開きますので「+」という小さなボタンを探し、クリックします。

入力欄があらわれたら、「Name欄」には任意の名前を、「Format欄」にはコードを記述します。

ボクの場合、名前は「ブログカード」と名付け、コードはこんな感じに書きました。そのまま真似して頂いても構いません(2個の@は消して下さい)。

<@iframe width="300" height="150" style="width: 100%; height: 155px; margin: 15px 0; max-width: 680px;" class="hatenablogcard" title="%title%" src="http://hatenablog.com/embed?url=%url%" frameborder="0" scrolling="no"><@/iframe>

ふたつの記述が済んだら終わりです。Create Linkの設定ページは閉じてしまって下さい。


ブログカードを実際に挿入してみる


では実際に、ブログカードを挿入してみましょう。

まずは、ブログカードを挿入するリンク先の記事を開いて下さい。順序は以下の通りです。

①リンク先の記事の適当な場所で右クリック(またはCreate LInkのボタンを押してもOK)。

②先ほど設定した「ブログカード」という項目が表示されたらそこをクリック。ワンクリックすると、リンクコードがコピーされます。

③ ご自分の記事の編集画面でリンクを挿入したい場所にペーストします。すると、先ほど設定で追加したものと似たコードが貼り付けされましたね。

プレビュー画面で確認してみると、ブログカードが表示されていると思います。

以上で終了です。設定さえ済めば、あとはこんなに簡単な操作で画像付きリンクが挿入できることに驚くはずです。


画像付きリンクの挿入方法② 「Embedly」を使う

ふたつ目は「Embedly」というツール。こちらは特に細かい設定は不要です。勝手に画像付きリンクを作ってくれる便利な優れものです。

さっそく導入の流れを見ていきます。


「Embedly」をブックマーク


まず、「Embedlyのブックマーク」というページを開きます。

無題

開いたら、「+ Embedly」という灰色のボタンにマウスを合わせ、Chromeのブックマークタブにドラッグ&ドロップします。

ブックマークタブに「+ Embedly」が表示されたら完了です。


ブログカードを実際に挿入してみる


さっそく、ブログカードを挿入してみましょう。順序は説明が不要なくらいに簡単です。

①リンク先のページでタブの+ Embedlyをクリック。

②下にリンクコードが発行されるので、ご自分の記事の編集画面でリンクを挿入したい場所にコピー&ペーストします。

プレビュー画面で確認してみると、ブログカードが表示されていると思います。簡単ですね!!


2つの画像付きリンクの向き不向き

以上でご紹介した2つはどちらも画像付きリンクを挿入するのにとても便利なツールです。

しかし、この記事を読まれた方の中には「どちらか片方だけ使えば良いのでは?」と思われたのではないでしょうか。

ボクも最初はそのつもりだったんですけどね(汗)実は、使ってるうちにリンク先によって向き不向きがあることがわかったんです。

ボクが感じたのは次の通り。

①Create LinkでAmazonのテキストリンクを画像付きにしようと試したらうまくいかなかった。それ以外の使用なら問題なし。

②Embedlyで自分のブログの内部リンクに試してみたらアイキャッチ画像がうまく反映されなかった。ボクが使ってるFC2ブログに問題があるのか?

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)

逆に、Amazonには相性が良かったです(^^)なので、EmbedlyはAmazon限定で使うようにしました。

スポンサードリンク

この記事が気に入ったら
シェア!

 シェア
FC2ブログ画像付きリンクを挿入する方法ブログカード
関連記事
未分類 (0)
胃がん(ブログ、闘病記録、胃癌ニュース、私の症状など胃ガン情報全般) (5819)
胃がんブログ (247)
よりぬき 胃がんブログ (16)
胃がん闘病記・日記 (5507)
胃がん手術後の食事記録 (6)
胃切除後の料理など (33)
がん治療のクラウドファンディング (10)
胃がん History (83)
ステージ3B 多発性高度リンパ節転移胃癌 (57)
胃がん再発「転移性肝がん」で余命宣告 (25)
がん のこと(ガン情報全般) (430)
がんブログ (242)
がんニュース (188)
胃がん 障害年金ブログ (71)
障害年金 - 準備編 (23)
障害年金 - 審査から年金受給まで (12)
障害年金 - 審査請求・不服申立 (26)
障害年金 - 再審査請求 (10)
Amazon (ニュース、お得なセール情報など) (128)
Amazonセール (2)
📱kindleセール (125)
今日のエッセイ (63)
ニュース・芸能・話題 (633)
恋愛・人間関係 (20)
終活ブログ (10)
グルメ (44)
胃切除後の食事・レシピ (668)
ご飯・おかゆ・和食 (174)
おかず (138)
味噌汁・スープ (73)
カレー関係 (66)
パン・洋食 (63)
麺類 (113)
その他、簡単レシピなど (38)
ブログ (214)
FC2ブログ・便利ワザ・アイテム・HTML・SEO対策など (188)
趣味や将棋のこと (25)
ファッション (1)
司法書士 (26)
仕事・実務や登記のこと (1)
事件ファイル (25)
COLLECTION (28)
家電 (13)
ホーム&キッチン (4)
ビューティー&ケア (4)
QOLの改善&ヘルスケア (2)
お酒 (5)