画像を外部リンクにする方法(GIF動画で説明)

目安時間7分

今日は「個別サポート」でいただいたご質問をシェアしますね!

 

ワードプレスの画像を外部リンクにする方法。

 

画像をクリックしたら「リンク先のページが開く」ようにしたい。

ページが移動してしまうのではなく、新しいページ(別ウィンドウ)が開くようにしたい。

 

わかりやすいように『GIF動画で説明』します。

 

まずは ↓ ご覧あれ♪

 

画像,外部リンク

ワードプレスで画像に外部リンクを設定する方法

1.画像を用意する

 

2.メディアに画像を追加

 

3.記事に画像を追加

 

4.画像をクリックしてから「リンク挿入ボタン」を押す

 

5.「歯車アイコン」を押す

 

6.「リンク先のURL」を入力

 

7.「リンクを新しいタブで開く」にチェックを入れる

 

チェックを入れることで、画像が外部リンクになります。

(内部リンクのままで良ければチェック不要です)

 

 

ついでに「実際のhtmlタグ」も確認してみよう!

で、ここまでやってみたところで

 

『実際のhtmlタグはどう表記されているか?』

 

「ビジュアル」タブから「テキスト」タブに切り替えて

どんなhtmlタグが作られたのか見てみると、わかりやすいですよ♪

 

内部リンク・外部リンクのhtmlタグは?

以下、リンクのhtmlタグです。

 

内部リンク

<a href="URL"> 文字・画像など </a>

 

外部リンク

<a href="URLtarget="_blank"文字・画像など </a>

 

target="_blank" と入れることで「外部リンク」になるんですね!

 

 

ちなみに私は「リンクのhtmlタグ」は単語登録してますよ♪

 

ur  →  <a href=""></a>

urr →  <a href=""  target="_blank"></a>

 

 

応用★画像に外部リンクを貼りたいときは?

では、本題です。

 

画像に外部リンクを貼って「リンク先を新しいウィンドウで表示させたい」ときは

 

<a href="URLtarget="_blank"><img src="画像のURL"></a>

 

こうなるワケですね!

 

ウィジェットの画像リンクにも使える

私も、ブログの右サイドバーなど「ウィジェット」に画像リンクを入れることが多いのですが

 

保育園ブログ,バナー

 

自分で複雑なhtmlタグを書くのは無理。

 

1字1句タグを覚えたり

自力で組み立てる熱意はなくて

とりあえず狙い通りに表示できればOKな人なんです。

 

なので、ウィジェットに画像リンクを貼りたいときは

 

先ほどのGIFアニメのように

適当な個別記事で「画像をリンク化」してから

HTMLタグだけ抜き取って、ウィジェットに貼ってます!

 

自分でタグをいじるより、時短かつ確実です。笑

 

 

どうやってHTMLやタグを覚えればいいの?

ありがとうございました^^

 

タグの知識が無いのですが
りあこさんはやりながら覚えたのでしょうか?

 

 

そうです、そうです、
ホント、1つずつですよ(^^

 

さっきお見せしたGIF動画のように

 

ワードプレス上で操作して
実際に出来上がったタグを見てみることで
「どっからどうなってるのかなぁ」と考えてみたり

 

ネット検索で「htmlタグの使い方」を調べて、自分のブログで試してみたり…

 

タグの意味が1つずつわかってくると

まるでプログラマーみたいだし(じつに遠いですが)

自分の思うように表示されると、すっごく嬉しいですよね♪

 

 

他にも

<a で始まったタグは</a>で閉じる
<div で始まったタグは</div>で閉じる

タグにも基本の型があるので、1つずつ覚えていく感じですね!

 

 

何か参考にしたものとかあれば教えてもらいたいです。
とはいっても、ブログ作成で精一杯ですが・・^^;

 

 

私は、ネット検索しながら覚えたのと

 


(無料電話サポート付)できるホームページ HTML&CSS入門

 

html&CSSの入門本を買ってきて

本を片手にHTMLサイト(ペラサイト)を作ってみて

 

「おおーー!ほんとに表示されたー(感激)」
半分、遊びながらですね。

 

楽しんでやるのが1番覚えます☆

 

 

さっきのランキングもどうしてあのように修正したのかも
さっぱりわからないです。

 

ですよね(^^

ランキングのhtmlタグは、複雑ですものね。

 

どうしてもわからないときや上手く表示されないときは

いつでも「りあこ1対1個別サポート」頼ってくださいね♪

 

→ブログやアフィリエイトの「個別サポート」はコチラで受け付けています!

家でできる仕事,主婦
アフィリエイト教材の選び方,アンリミ,FAAP,楽press

「これ以上ムリ!」なママ向き
【私の知らない自分】が丸見えに!
アーカイブ
 最近の投稿

→ すべてのブログ記事一覧はこちら

→ ブログを続けるのが辛くなったあなたへ
(すっかり自信を無くして落ち込んでいる方に向けてお話ししました)

ブログに自信がない

カテゴリー
ココから検索できますよ
ライバル不在ガラ空きキーワードの例
1年間のメールサポート(無料)

ページの先頭へ