FC2ブログの記事内で画像にリンクをつける方法
画像にリンクをつけてみよう！
前回の記事『FC2ブログの記事内で文章にリンクをつける方法』では、文章にリンクをつけるときの方法をご紹介しました。
今回は、画像にリンクをつけるときの方法をご紹介いたします。
「画像にリンクをつける」とは？
例えば、次の画像には、リンクをつけていません。クリックしても、何も起こりません。
対して、次の画像には、リンクをつけてあります。クリックすると、「読書家のfuminchuさん」のブログが、別ウィンドウで表示されるはずです。（良かったら、試してみてください）
リンクするのであれば、文章にリンクをつける方法だけでも、要件は足りるかもしれませんが、少しアクセントを加えたいような場合には、このようにリンクつきの画像を使うと、良い効果を得られるかもしれません。
ただ、ひとつ気をつけていただきたいのは、画像の内容によっては、リンクがついていることに、気付いてもらえないこともあります。
クリックされなくては、意味がありませんよね。
リンクの有無が分かり難い場合は、画像のリンクだけに頼らず、リンクつきの文章とあわせて用いるなどの工夫が必要になります。
「画像が貼りたいだけなんです！」と言う人は、記事『FC2ブログの記事で画像を使ってみる』をご覧ください。
記事内の画像にリンクをつける方法
1：何をするの？
（01）
今回は、ブログのキャプチャ画像を使って、役立つサイトや、お気に入りのブログをご紹介するような場合を想定して、お話いたします。
次のように、画像をクリックすると、「SEOモード」さんのサイトが別ウィンドウで表示されます。（良かったら、試してみてください）
そのようなわけですので、あらかじめ、使用する画像と、リンクする相手（リンク先）のURLを用意しておいてください。
リンク先の | http://www.seomode.info/ |
|---|
キャプチャ画像を作成する方法が分からない場合は、記事『プリントスクリーンの方法』をご覧ください。
2：画像の挿入
（02）
まずは、文章などを書くかもしれません。（必要なければ、書かなくても構いません）
文章を書いたら、適当に改行を入れましょう。（[Enter]キーを、打鍵してください）
（03）
[画像（ファイル挿入）]ボタンを、クリックしましょう。
![[画像（ファイル挿入）]ボタンをクリック](http://blog-imgs-32.fc2.com/k/u/m/kumacrow/blog_image_link_05.gif "[画像（ファイル挿入）]ボタンをクリック")
（04）
「ファイル管理」画面が、表示されます。
今回使用する画像を、まだアップしていない人は、画像をFC2ブログのサーバへアップロードしてください。すでに画像をアップしてある人は、次のステップへ進みましょう。
画像のアップ方法が分からない人は、記事『FC2ブログの記事で画像を使ってみる』をご覧ください。
（05）
次は、ファイル一覧から、今回使用する画像を探し出して、「この画像で記事を書く」をクリックしましょう。
「ファイル管理」画面は、閉じてしまって構いません。あなたが、複数の画像を使うのであれば、表示したままでも構いません。
（06）
画像を表示させるためのHTMLコードが、挿入されるはずです。
プレビューをご覧いただくと、次のように画像が表示できているのではないでしょうか。
しかし、プレビューの画像をクリックしていただくと分かりますが、この状態では、リンクは「画像」を表示するためのリンクになっています。他のWebサイトへのリンクになっていません。
私たちは、画像に、他のWebサイトへのリンクをつけようとしているんでしたよね？さらに、リンクを付けかえる作業が必要になるのです。
3：画像にリンクを付けかえる
（07）
[W]ボタン（ブルー）をクリックし、「高機能テキストエディタ」モードへ切替えてください。
（08）
「高機能テキストエディタ」モードで表示されます。
画像を、クリックしましょう。（画像が選択された状態になります）
画像が選択されると、角や辺の中点に「白い四角」が表示されます。よく確認しましょう。
（09）
画像を選択した状態で、「リンク挿入 / 編集」ボタンをクリックしてください。
（10）
「ハイパーリンク」画面が、表示されます。
前述（01）で用意しておいた「URL」を入力し、[OK]ボタンをクリックしましょう。
![「URL」を入力し[OK]ボタンをクリック](http://blog-imgs-32.fc2.com/k/u/m/kumacrow/blog_image_link_13.gif "「URL」を入力し[OK]ボタンをクリック")
（11）
[W]ボタン（グレー）をクリックし、「標準」モードに戻します。
（12）
プレビューなどで、あなたの画像をクリックして試してみてください。意図していたリンク先が、別ウィンドウで表示されるはずです。
3：保存
（07）
保存するのであれば、記事のタイトルなどを入力したか、しっかり確認してから、[記事を保存]ボタンをクリックしましょう。
お疲れさまでした。
普段から「高機能テキストエディタ」モードを使っている人は、もちろん、最初から「高機能テキストエディタ」モードではじめても構いません。臨機応変、お好きなように試してみてください。
次回予告
次回は、ジャンルと、セグメンテーションの違いについて書く予定・・・でしたが、もう少しFC2ブログ関係の記事（FC2ブログの高機能テキストエディタで文章にリンクをつける方法）が続きます。
関連記事
FC2ブログの作り方をご紹介している記事です。
1：FC2ブログサービスへの登録
2：FC2ブログでリンクをつける方法
作成日：2009/11/28 更新日：2009/11/28
コメントありがとうございます。
お手数ですが、コメント前に留意事項をご覧くださいませ。
また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。
リンク
リンク、ありがとうございます。
Wordpress管理画面がKumaCrowさんがブログでリンクしてますよ、と教えてくれたので見に来て見るとこういう使い方をしてくださっていたとはw。ご紹介ありがとうございます。
最近はFC2ブログの使い方をより詳細に解説されていますね。加えて、いつもながらの分かりやすい説明、これからブログをやろうという方々には本当にありがたいブログですよね。凄いです。
次の投稿も楽しみにしています～。
メジャー
いつもコメントありがとうございます。
えへへ～、
使わせていただきました～。ヾ(*´∀｀*)ノ恐縮です
とりあえず、仮打ちで、
ITと自己啓発とさせていただいております。
ターゲットとするキーワードなどがあれば、
いつでも変更いたしますので、
おっしゃってくださいませ。(´▽`)♪せ～
うちは、メジャーではない・・・と、思われます。
影響力ないですから。(´Д｀;)
恥ずかしながら、記事内でサイトなどをご紹介しても、
ほとんどクリックされません。
何かこう、紹介したサイトのアクセス数が、
ドーンと急激に増えるみたいなのって、かっこいいですよね。
アクセスが多過ぎて、パンクしちゃうとか。
どうすれば、影響力が増すのかしら？
う～ん・・・・・・こ。(；´Д`)分かんないや～
こちらこそ、今後もよろしくお願いします。(*´∀`)人(´∀｀*)
Wordpress
コメントありがとうございます。
あら、Wordpressには、そういう機能もあるんですね。
プラグインかしら。((o(´∀｀)o))へー
私も、SEOモードさんの記事を楽しみにしています～。
難しくて、ほとんど分からないんですけどね。(´Д｀;)てへっ
かいけつ～♪
ついでに…。このサイトのような箇条書きポイントみたいに付いている、クマクロちゃんマークや、コメント一人一人についているお花ニコちゃんマークはどのような仕組みになっているのでしょう…。
このサイト内に紹介されているのなら、URLのせて下さい～（＋＿＋）
見出しの画像
コメントありがとうございます。
気になっていたことが分かったようで何よりでございます。
ついでの箇条書きというか、見出しの画像ですかね。
それは、CSS（スタイルシート）というもので設定しています。
こちらをご覧いただくと、分かるやもしれませぬ。
「見出しの先頭に背景画像を表示する：CSS小技」
→http://kumacrow.blog111.fc2.com/blog-entry-528.html
ありがとうございます。
まさに「見出しの先頭に…」にかかれていることでございます！
ちと、時間のあるときに試しにやってみますマス…（＋＋）
ありがとうございました！！！
いつもこのサイトの「小技」を「こえだ」と読んでしまうなっちろりんでした～……
小枝
コメントありがとうございます。
はい。お暇なときにでもお試しくださいませ。
「小枝」と聞いて、久しぶりに森永チョコレート小枝が食べたくなった
KumaCrowでした～・・・・・・。
同じページ内の画像同士をリンクさせるには？
写真や絵の一覧表示をサムネイルなどで並べて、上やとなり等に大きな画像を表示させたとして、違うサムネイル画像をクリックすると、大きな画像の表示が今クリックした画像に切り替わるようになっているページって結構ありますよね？
そのような仕組みはどこをどう作ればよいのでしょう…。
ページのソースなどを開いて読んでみても、さっぱりで…（；＿；）
いつも画像関係の質問ばかりですみません。
自分でも調べてみるのですが、基本をよく知らないので、調べる検索用語もよくわからず…挫折して、Kuma Kurowさんをたよってしまいます…（・・）
JavaScriptによる画像の表示切り替えについて
コメントありがとうございます。
例えば、次のように表示されているとして・・・、
【小さい画像（A）】【小さい画像（B）】
【 大きい画像（A） 】
仮に、この【小さい画像（B）】をクリックしたら、
次のように変化するということでしょうか。
【小さい画像（A）】【小さい画像（B）】
【 大きい画像（B） 】
だとすると、JavaScriptを使っているものと思います。
JavaScriptを勉強するのは大変だと思うので、
その仕組みで作られているサイトさんで聞いてみてください。
教えてくれるかもしれませぬ。
ありがとうございます！
あわ～（＋Δ＋）＜３
好みのページを作るのはむちかしいですねぇ。。
早速調べてみます！！
ありがとうございます！
どういたすますてーん
コメントありがとうございます。
その仕組みを使っているサイトさんで聞きにくい場合や、
丁寧には教えてくれそうにない場合もあると思うので、
いくつかポイントを追記しておきます。
まず、最初に表示されている画像のファイル名で、
HTMLソースコードを検索してみれば、
どの辺で書かれているか分かるかと思います。
それから、その辺りはdivタグで囲まれていて、
divタグに付けられたid名でひも付けしてあるはずです。
そして、たいていはHTMLファイル内に、
JavaScriptのコードをすべて書いていないことの方が多いです。
外部ファイルを呼び出して使っているはずですから、
今度は、そのJavaScriptファイルをid名で検索してみると、
だいたいの全体像（必要となるコード）が見えてくると思います。
それから、これらを参考にしつつ、本屋さんにでもいって、
「JavaScript入門」などの本をあさってみると、
こういったネタが、おそらく書いてある本がみつかると思います。
行きつ戻りつしながら、
あとは自分なりに改造してみれば、出来上がります。
あ、そだ。「jQuery入門」などの本、
あるいはサイトなんかもチェックしてみると、
簡単に導入できるように、
仕組み丸ごと用意してくれているかもしれません。
チェックしてみてくださーい。ヾ(*´∀｀*)ノ
できました(＾∇＾)
ボタンを作れました。今まで文字でこじんまりと...。
こういう方がいらっしゃるお陰でWebに疎い者が
なんとかやっていけるんですよねm(_ _)m。
画像リンク
コメントありがとうございます。
うまいこと画像リンクできたようで何よりです。
イラストレーターをやっていらっしゃるんですね。
ブタさんかわいい。ヾ(*´∀｀*)ノ
と思わず、なんだか恐縮でございます(^_^;)
ご紹介ありがとうございます！
読書家じゃなく、プチ読書家程度ということで(汗)
「ＩＴと自己啓発が」気になるけどっていう文言を見て、
そっか、自分のブログは、ＩＴと自己啓発がメインなのか！
と思ってしまいました(笑)
私のところはＫｕｍａＣｒｏｗさんのようにメジャーじゃなく、
ネットの端っこの方で細々運営しているわがままブログだと
いう認識しか持っていませんでしたので(汗)
ブログが作りたい！のFC2ブログ解説シリーズ、どんどん
コンテンツが増えていて、コメントもたくさんあり、ますます
アルファブロガーの道に近づいているのではないですか？
陰ながら応援していますので、今後ともよろしくお願いいたします！