FC2ブログの記事内で画像にリンクをつける方法

ブログが作りたい!FC2ブログの作り方 > FC2ブログの記事内で画像にリンクをつける方法

FC2ブログの記事内で画像にリンクをつける方法

FC2ブログの記事内で画像にリンクを入れる方法

画像にリンクをつけてみよう!

前回の記事『FC2ブログの記事内で文章にリンクをつける方法』では、文章にリンクをつけるときの方法をご紹介しました。

今回は、画像にリンクをつけるときの方法をご紹介いたします。


「画像にリンクをつける」とは?

例えば、次の画像には、リンクをつけていません。クリックしても、何も起こりません。

ITと自己啓発が「気になるけど」

対して、次の画像には、リンクをつけてあります。クリックすると、「読書家のfuminchuさん」のブログが、別ウィンドウで表示されるはずです。(良かったら、試してみてください)

リンクするのであれば、文章にリンクをつける方法だけでも、要件は足りるかもしれませんが、少しアクセントを加えたいような場合には、このようにリンクつきの画像を使うと、良い効果を得られるかもしれません。

ただ、ひとつ気をつけていただきたいのは、画像の内容によっては、リンクがついていることに、気付いてもらえないこともあります。

クリックされなくては、意味がありませんよね。

リンクの有無が分かり難い場合は、画像のリンクだけに頼らず、リンクつきの文章とあわせて用いるなどの工夫が必要になります。

「画像が貼りたいだけなんです!」と言う人は、記事『FC2ブログの記事で画像を使ってみる』をご覧ください。


記事内の画像にリンクをつける方法

1:何をするの?

(01)

今回は、ブログのキャプチャ画像を使って、役立つサイトや、お気に入りのブログをご紹介するような場合を想定して、お話いたします。

次のように、画像をクリックすると、「SEOモード」さんのサイトが別ウィンドウで表示されます。(良かったら、試してみてください)

そのようなわけですので、あらかじめ、使用する画像と、リンクする相手(リンク先)のURLを用意しておいてください。

リンク先の
URL

http://www.seomode.info/

キャプチャ画像を作成する方法が分からない場合は、記事『プリントスクリーンの方法』をご覧ください。

2:画像の挿入

(02)

まずは、文章などを書くかもしれません。(必要なければ、書かなくても構いません)

文章を書いたら、適当に改行を入れましょう。([Enter]キーを、打鍵してください)

文章を書く

(03)

[画像(ファイル挿入)]ボタンを、クリックしましょう。

[画像(ファイル挿入)]ボタンをクリック

(04)

「ファイル管理」画面が、表示されます。

今回使用する画像を、まだアップしていない人は、画像をFC2ブログのサーバへアップロードしてください。すでに画像をアップしてある人は、次のステップへ進みましょう。

「ファイル管理」画面が表示される

画像のアップ方法が分からない人は、記事『FC2ブログの記事で画像を使ってみる』をご覧ください。

(05)

次は、ファイル一覧から、今回使用する画像を探し出して、「この画像で記事を書く」をクリックしましょう。

「この画像で記事を書く」をクリック

「ファイル管理」画面は、閉じてしまって構いません。あなたが、複数の画像を使うのであれば、表示したままでも構いません。

(06)

画像を表示させるためのHTMLコードが、挿入されるはずです。

HTMLコードが挿入される

プレビューをご覧いただくと、次のように画像が表示できているのではないでしょうか。

画像が表示できる

しかし、プレビューの画像をクリックしていただくと分かりますが、この状態では、リンクは「画像」を表示するためのリンクになっています。他のWebサイトへのリンクになっていません。

私たちは、画像に、他のWebサイトへのリンクをつけようとしているんでしたよね?さらに、リンクを付けかえる作業が必要になるのです。

3:画像にリンクを付けかえる

(07)

[W]ボタン(ブルー)をクリックし、「高機能テキストエディタ」モードへ切替えてください。

「高機能テキストエディタ」モードへ切替え

(08)

「高機能テキストエディタ」モードで表示されます。

画像を、クリックしましょう。(画像が選択された状態になります)

画像をクリック

画像が選択されると、角や辺の中点に「白い四角」が表示されます。よく確認しましょう。

(09)

画像を選択した状態で、「リンク挿入 / 編集」ボタンをクリックしてください。

「リンク挿入 / 編集」ボタンをクリック

(10)

「ハイパーリンク」画面が、表示されます。

前述(01)で用意しておいた「URL」を入力し、[OK]ボタンをクリックしましょう。

「URL」を入力し[OK]ボタンをクリック

(11)

[W]ボタン(グレー)をクリックし、「標準」モードに戻します。

「標準」モードに戻す

(12)

プレビューなどで、あなたの画像をクリックして試してみてください。意図していたリンク先が、別ウィンドウで表示されるはずです。

画像へのリンクづけ完了

3:保存

(07)

保存するのであれば、記事のタイトルなどを入力したか、しっかり確認してから、[記事を保存]ボタンをクリックしましょう。

記事を保存ボタンをクリック

お疲れさまでした。

普段から「高機能テキストエディタ」モードを使っている人は、もちろん、最初から「高機能テキストエディタ」モードではじめても構いません。臨機応変、お好きなように試してみてください。

前の記事へ
次の記事へ

次回予告

次回は、ジャンルと、セグメンテーションの違いについて書く予定・・・でしたが、もう少しFC2ブログ関係の記事(FC2ブログの高機能テキストエディタで文章にリンクをつける方法)が続きます。


関連記事

FC2ブログの作り方をご紹介している記事です。

作成日:2009/11/28 更新日:2009/11/28

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

リンク

まさかリンクの説明記事を、私のブログ先で解説されている
と思わず、なんだか恐縮でございます(^_^;)
ご紹介ありがとうございます!
読書家じゃなく、プチ読書家程度ということで(汗)

「ITと自己啓発が」気になるけどっていう文言を見て、
そっか、自分のブログは、ITと自己啓発がメインなのか!
と思ってしまいました(笑)
私のところはKumaCrowさんのようにメジャーじゃなく、
ネットの端っこの方で細々運営しているわがままブログだと
いう認識しか持っていませんでしたので(汗)

ブログが作りたい!のFC2ブログ解説シリーズ、どんどん
コンテンツが増えていて、コメントもたくさんあり、ますます
アルファブロガーの道に近づいているのではないですか?

陰ながら応援していますので、今後ともよろしくお願いいたします!

リンク、ありがとうございます。

おはようございます。

Wordpress管理画面がKumaCrowさんがブログでリンクしてますよ、と教えてくれたので見に来て見るとこういう使い方をしてくださっていたとはw。ご紹介ありがとうございます。

最近はFC2ブログの使い方をより詳細に解説されていますね。加えて、いつもながらの分かりやすい説明、これからブログをやろうという方々には本当にありがたいブログですよね。凄いです。

次の投稿も楽しみにしています~。

メジャー

fuminchuさん、こんにちは!(・∀・)/ぐもにさんで
いつもコメントありがとうございます。

えへへ~、
使わせていただきました~。ヾ(*´∀`*)ノ恐縮です

とりあえず、仮打ちで、
ITと自己啓発とさせていただいております。

ターゲットとするキーワードなどがあれば、
いつでも変更いたしますので、

おっしゃってくださいませ。(´▽`)♪せ~


うちは、メジャーではない・・・と、思われます。
影響力ないですから。(´Д`;)

恥ずかしながら、記事内でサイトなどをご紹介しても、
ほとんどクリックされません。

何かこう、紹介したサイトのアクセス数が、
ドーンと急激に増えるみたいなのって、かっこいいですよね。

アクセスが多過ぎて、パンクしちゃうとか。

どうすれば、影響力が増すのかしら?
う~ん・・・・・・こ。(;´Д`)分かんないや~

こちらこそ、今後もよろしくお願いします。(*´∀`)人(´∀`*)

Wordpress

tytoさん、こんにちは!(・∀・)/ぐもにさんで
コメントありがとうございます。

あら、Wordpressには、そういう機能もあるんですね。
プラグインかしら。((o(´∀`)o))へー

私も、SEOモードさんの記事を楽しみにしています~。
難しくて、ほとんど分からないんですけどね。(´Д`;)てへっ

No title

ありがとうございます
これからのブログに使わせていただいきますね(o`・ω・)ゞ

鼠先輩♪

鼠さん、こんばんは!(・∀・)/ぐいぶに
コメントありがとうございます。

よく分かりませんが、どういたしまして!(o`・ω・)ゞ

かいけつ~♪

気になっていたことがわかりました~!どうもありがとうございます(´ `人)

ついでに…。このサイトのような箇条書きポイントみたいに付いている、クマクロちゃんマークや、コメント一人一人についているお花ニコちゃんマークはどのような仕組みになっているのでしょう…。
このサイト内に紹介されているのなら、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を勉強するのは大変だと思うので、
その仕組みで作られているサイトさんで聞いてみてください。

教えてくれるかもしれませぬ。

ありがとうございます!

そういうことです!説明が分かりづらくてごめんなさい!

あわ~(+Δ+)<3
好みのページを作るのはむちかしいですねぇ。。

早速調べてみます!!
ありがとうございます!

どういたすますてーん

なっちろりんさん、こんにちは!( ・∀・)ノ
コメントありがとうございます。

その仕組みを使っているサイトさんで聞きにくい場合や、
丁寧には教えてくれそうにない場合もあると思うので、

いくつかポイントを追記しておきます。


まず、最初に表示されている画像のファイル名で、
HTMLソースコードを検索してみれば、

どの辺で書かれているか分かるかと思います。

それから、その辺りはdivタグで囲まれていて、
divタグに付けられたid名でひも付けしてあるはずです。


そして、たいていはHTMLファイル内に、
JavaScriptのコードをすべて書いていないことの方が多いです。

外部ファイルを呼び出して使っているはずですから、
今度は、そのJavaScriptファイルをid名で検索してみると、

だいたいの全体像(必要となるコード)が見えてくると思います。


それから、これらを参考にしつつ、本屋さんにでもいって、
「JavaScript入門」などの本をあさってみると、

こういったネタが、おそらく書いてある本がみつかると思います。

行きつ戻りつしながら、
あとは自分なりに改造してみれば、出来上がります。


あ、そだ。「jQuery入門」などの本、
あるいはサイトなんかもチェックしてみると、

簡単に導入できるように、
仕組み丸ごと用意してくれているかもしれません。

チェックしてみてくださーい。ヾ(*´∀`*)ノ

できました(^∇^)

ありがとうございます!ブログに初めて画像リンク
ボタンを作れました。今まで文字でこじんまりと...。
こういう方がいらっしゃるお陰でWebに疎い者が
なんとかやっていけるんですよねm(_ _)m。

画像リンク

ttiggaさん、こんばんは!( ・∀・)ノ
コメントありがとうございます。

うまいこと画像リンクできたようで何よりです。

イラストレーターをやっていらっしゃるんですね。
ブタさんかわいい。ヾ(*´∀`*)ノ

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/608-ab998224
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて