こんにちは、しらたまです。
本日も忙しいママのためのネットビジネスキャリアアップ講座を始めます！
今日のテーマは…
よく、
「詳しくは、この画像をクリック！」
なんて書いてあって、画像をクリックすると別のページにジャンプする…なんて仕掛け、見かけませんか？
画像をクリックすると別ページに飛ぶリンクだと、ただ文字にリンクが貼り付けてあるよりもちょっとおしゃれな感じになりますよね。
例えば、このブログの場合だと…
この画像の部分。
この画像、クリックすると別のウィンドウで別ページが表示されるようになっているので、よかったら試しにクリックしてみて下さい。
（パソコンで表示している場合は右サイドバーに、スマホで表示している場合は記事本文のず〜っと下の方にあります。）
ブログの文章中なら、
「文字にリンクが貼ってあるタイプ」
「ボタンをクリックするとリンクに飛ぶタイプ」
というタイプでもいいと思うのですが…
サイドバーに表示するなら断然、
「画像をクリックするとリンクに飛ぶタイプ」
が目立ってかわいいと思うんですよね。
読者さんの目に止まらないとクリックしてもらえないので、画像を使った方法はおすすめです。
ということで本日は、「画像をクリックすると、特定のURLへ移動するようにする方法」を…
・記事内に表示する方法
・右サイドバーに表示する方法
の2つについて、初心者さん向けに図解します。
では始めましょう〜♪
この記事に書いてあること
「詳しくはこの画像をクリック！」的な画像の作り方
「画像をクリックするとリンクに飛ぶ」仕組みを作るために、まずあなたに用意してもらうものが…
・クリック後に表示させたいURL
この2つです。
ということで、まずはクリックしてもらう画像の作り方から解説しますね。
1. 元となる背景画像を準備する
画像の準備ですが…私の場合は、著作権フリーの画像にちょちょっと文字を書いて作っています。
著作権フリーの無料画像サイトで一番おすすめなのは、「写真AC」ですね。
私はしょっちゅう画像をダウンロードするので…ダウンロードに制限がない、便利な有料版を利用していますが、メールアドレスの登録で使える無料版でも十分使えます！
「写真AC」を含めた著作権フリーの無料画像サイトについて、詳しくは
無料なのに商用利用OK！ブログアフィリエイトにおすすめの画像サイト3選と、ブログに画像を使う効果を解説
こちらの記事も参考にしてみて下さいね。
「写真AC」を利用した場合で解説すると…
・画像は基本、横長のものを選ぶ
・サイズは小さくていいので、SMALLでダウンロード（以下の例だと640×473px）
ダウンロードした画像は、サイトの表示速度を早めるために、必ず圧縮してから使って下さいね。
ちなみに、画像を圧縮する2つの方法についても、先ほどの「画像サイト3選」の記事で解説しています。
2. 画像に文字を入れて加工する
次に、画像にお好きな文章を書いて「詳しくはこの画像をクリック！」的な画像を作ってみて下さい。
クリックしてもらう画像を右サイドバー（記事の右側の列、私のブログで例として表示した部分です。）に表示したい場合、表示された時の画像は元の画像よりもずっと小さくなります。
文字はあまり小さいと読みにくくなってしまうので、大きめにするように気をつけて下さいね。
画像に文字を入れたりして加工する方法ですが…Macの場合であれば
Macの画像編集を無料アプリでする方法！「プレビュー」で画像を編集する基本の操作を図解します
こちらの記事で解説していますので、Macユーザーさんは参考になさって下さい。
ここで注意したいのが…
「この画像をクリックすれば別のページに飛ぶんですよ〜」
ということを、しっかりと読者さんに伝えることです。
・画像を説明する文章にも書くようにする
この2つの方法のどちらか、できれば両方で伝えると分かりやすくなります。
画像を作る時点で、画像の中に「この画像をクリック」という言葉を入れてしまうようにしましょう。
3. 作成した画像を、メディアライブラリに取り込む
作成した画像は、WordPressのメディアライブラリにアップロードして下さい。
メディアライブラリへの登録方法がわからない場合は、
WordPressで画像を挿入する方法とは？メディアライブラリの使い方とEnhanced Media Libraryで画像を整理する方法を解説
こちらの記事を参考に、アップロードして下さいね。
アップロードが済むと、画像のURLが決まると思います。
そのURLを次のステップで使いますので、コピーできるようにしておいて下さい。
では、いよいよ作成した画像にリンクを貼る作業をして行きましょう。
「リンク先に飛ぶ画像」を記事本文中に表示する方法
まず最初に「リンク先に飛ぶ画像」を記事本文中に表示する方法を解説しますね。
投稿画面を開きましょう。
作成した画像のURLをビジュアルモードで貼り付けるか、左上の「メディアを追加」ボタンから挿入します。
画像をクリックして、選択します。選択できているときは、四隅に小さい四角が出てくるのですが…
どれか一つの四角をクリックしながら動かして、お好みのサイズに画像を縮小して下さい。
ちょうど良いサイズになったら…
画像が選択されている状態で、クリップみたいなマーク（リンクの挿入/編集）をクリックします。
画像の下に長細い四角が現れるので、ここにクリック後に表示させたいURLを入力して下さい。
この状態でリターンボタンを押すと、同じタブで指定したURLにジャンプするようになります。
もし別のタブで指定したURLを開くようにしたい場合は、歯車のマークをクリックしましょう。
URLの下に、「リンクを新しいタブで開く」というチェックボックスがあるので、そこにチェックを入れれば別のタブで指定したURLを開くように設定できます。
チェックを入れたら、最後に一番したの更新をクリックして、設定を保存して下さい。
これで、投稿本文中に、リンク付きの画像を挿入することができました。
「リンク先に飛ぶ画像」を右サイドバーに表示する方法
次は、右サイドバーに設置する方法を解説しますね。
まず、WordPressの管理画面から…
「外観」→「ウィジェット」をクリックします。
左のず〜っと下の方に「テキスト」という項目があるので、左クリック長押しでドラッグして…
右上にある「サイドバーウィジェット」の中の、表示したい場所で長押ししていたクリックを離し、ドロップして下さい。
ドロップすると「テキスト」の中身が開いた状態になります。
（開かない場合には、▼をクリックすると開きます。）
以下の画面で…
「タイトル」には、お好きなタイトルを入力して下さい。
入力したタイトルは、サイトに表示されます。
今回は、画像の挿入は必ず「メディアを追加」から行って下さい。
なぜなら、ビジュアルモードで画像のURLを貼り付けた場合、サイドバーの幅に合わせた画像サイズの調整がされないので、画像が無用に大きく表示されてしまうからです。
この流れで画像を挿入すると、自動でサイドバーの幅に合わせて画像を縮小して表示してくれます。
（「テキストモード」で確認すると、高さと横幅を指定するHTMLが追加されていることが確認できます。）
無事に画像が挿入されると…
こんな感じに表示されます。
あとは、記事本文中でリンクを貼り付けたのと同じ感じです。
画像を選択して、四隅に小さい四角が出ている状態で、クリップみたいなマークをクリックしましょう。
URLを入力する四角が出てくるので、リンクさせたいURLを入力します。
ここでリターンマークを押せば、同じタブで入力したURLの画面に移動することに。
別のタブを開いて表示させたい場合は、歯車のマークをクリックします。
ここで、「リンクを新しいタブで開く」にチェックを入れ、下の方にある「更新」をクリックします。
最後に、画像の下にお好きな文章を入力し、下の方にある「保存」をクリックすれば、あなたのサイトで公開されます。
画像だけでもOKですが、もし文章を入力する場合には、「画像をクリックすると、別のページが表示されますよ〜」という内容を入れるようにして下さいね。
これで、右サイドバーに「クリックすると指定したURLに飛ぶ画像」が表示できました！
スポンサーリンク
まとめ
今日は、WordPressで「画像をクリックすると指定したURLに飛ぶ仕組み」の作り方を解説しました。
画像をクリックする仕組みにすると、画像で読者さんの目を引くことができるので、特に右サイドバーや記事下などに表示するのにはオススメの方法です。
2. 投稿画面上やサイドバーウィジェットの「テキスト」でリンク付き画像を貼り付ける
この2ステップで簡単にできますので、ぜひ挑戦してみて下さいね。
