画像リンクを作るには

例えばサイドバーにバナー付きリンクを作ったり、リストマークにオリジナルの画像を使いたい時、まず画像データをサーバーにアップロードしなければなりません。このやり方が、初心者にはちょっと分かりにくいので、簡単にまとめてみました。

画像データをアップロードするというのは、ブログを開設しているサーバーのスペースに、画像ファイルをコピーするということです。そしてそのサーバー上の画像データに対してリンクを張る必要があるのです。

私も以前に失敗したことがあります。
当時画像リンクを作成するタグを手書きすることが出来ず、手持ちのホームページビルダーを使ってタグを作りました。この手のソフトを使うと簡単にリンクを作ることが出来ます。目的の画像ファイルを選択し、必要に応じてテキストを入力し、その画像やテキストを選択してリンクを挿入みたいなコマンドを実行して、リンク先のURLを入力します。これでソフトがタグを作ってくれますので、そのタグをコピーしてサイドバーや記事内に貼り付けました。

でもこの方法だと問題があるのです。
リンクを張った画像データは自分のパソコン内のファイルのままなのです。リンクのタグをよく見ると分かりますが、明らかに自分のパソコン内を指しています。これだと自分のパソコンからブログを見るときちんと表示されますが、そのファイルを持っていないほかの方には表示されません。当然ですね。私は会社のパソコンから自分のブログを見たときにミスに気付きました。

失敗談がえらく長くなりましたが、本題です。画像リンクを張る前に、画像ファイルをサーバーにアップロードします。

ライブドアブログの場合、ブログの投稿タブに「ファイルのアップロード」というメニューがあります。それをクリックすると「新規ファイルの追加」というリンクが一番上にあります。後は参照ボタンをクリックして目的にファイルを選択し、適当な名前を付けて、保存します。これで自分のパソコンの中の画像ファイルが、ライブドアブログサーバーの自分のスペースにファイルがコピーされるのです。

後はこのサーバー上のファイルに対してリンクを張ります。一番簡単な方法は、先ほどのファイルのアップロードの画面のデータ一覧から、目的のファイルの横にある投稿ボタンをクリックし、投稿画面に表示されているタグをコピーして使う方法です。自動的にリンクタグが作られるので楽です。

他のブログでも基本的には同じです。ファイルをアップロードする機能がないブログサービスではおそらく画像リンクを作ることは出来ません。

このブログでは右上のブログランキングのリンクや、メニュー内の各項目の横の小さな矢印をこの方法で作っています。

Comments

hammerさん
何度もありがとうございます。
とてもわかりやすかったです。
直してみましたが今度は大丈夫ですか？
それにしても初心者はいろいろ大変なものですね〜。
hammerさんの記事はわかりやすくとても助かります。
つまづいたらまた来ます。（ご迷惑でしょうが･･･）

Posted by みさき at 2005年02月23日 08:40

みさきさん、こんばんは。
画像リンク直っていますね。この記事参考になりましたか？書いてて少し分かりにくいかなと思ってたんですけど、お役に立てて良かったです＾＾

Posted by hammer at 2005年02月23日 22:55

２週間ほど前にBlogを立ち上げて、ずぅ〜っとお世話になってます。
今日一日中、画像リンクの作り方に四苦八苦してまして、ふとこちらのブログを思い出して調べてみると・・・
なんと最新ブロクがこの話でビックリしました。
おかげさまで、無事画像リンク成功です！
今後ともよろしくお願いします。

Posted by アンジェリカ at 2005年02月24日 20:13

アンジェリカさん、はじめまして。
それはタイミングがばっちり合いましたね。これからもしばらく初心者向けネタを書いていこうと思います＾＾

Posted by hammer at 2005年02月24日 22:30

はじめまして。投稿記事をいつも参考させて頂いており、有難うございます。つきましては、アドバイスを頂きたいと思いまして、おもいきってコメントさせて頂きました。初心者のため、コメント投稿させて頂くのもはじめてです。実は、自身のBlogサイトに、ある時期から新規投稿したものが反映されません。しかし、他のパソコンからは、新規投稿した記事は見る事ができます。投稿記事を書いた自宅のパソコンからは見れません。バナーを貼っているため、昨日、この記事を読まさせて頂き、すべての画像について、アップロードをしましたが、変わらない状況です。どこが悪いのでしょうか。もしお時間がありましたら、アドバイスを頂きたく、よろしくお願い致します。

Posted by tmsy at 2005年03月18日 21:29

はじめまして、tmsyさん。書き込みありがとうございます。

ご質問いただきました件、アドバイスしたいのですが、残念ながら私には原因が分かりません＾＾；

他のパソコンから見れるということは、きちんと更新、再構築されているということですので、記事を書いたパソコンでも見れるはずです。自宅のパソコンから見れないというのは、ずーっと見れないのでしょうか。それともしばらく時間を置くと見れるようになるのでしょうか。

Posted by hammer at 2005年03月19日 01:57

ご連絡を頂き、本当に有難うございます。ご連絡を頂き、落ち込んでいた気持ちが、｢よし、再度やろう！｣という元気がでてきました。早速ではありますが、自宅のパソコンで見れなくなったのは、今回が2回目です。1回目は、3月5日頃からで、この時は、3月13日にメインページのデザインを変更したことにより、新しいデザインにて見る事ができました。しかし、この時は思考錯誤しており、表示されている投稿記事数が多すぎる（容量が多いのでは？）と思い、投稿済みのものを一度削除しましたが、旧デザインでは見れなかったため、試しにデザインを変更したら、見れた次第です。その後、3月13日から削除した記事を再投稿し、追加記事も投稿しその日は安心しておりましたが、3月14日以降、投稿した記事が自宅のパソコンでは見れません。会社のパソコンでは、見れております。参考に、使用容量：497.80KB/2.1GBと表示されています。容量的には問題ないと思うのですが。以上、状況をご報告させて頂きましたが、自宅のパソコンで何かを変更しない限りは、ずっと見れない状況です。お忙しいところ申し訳ありませんが、よろしくお願い致します。

Posted by tmsy at 2005年03月19日 08:05

こんにちは。ご質問させて頂いていた件、原因が解りました。結論からいうと、自宅のパソコン自体に原因がありました。3ケ月前に新規で購入したパソコンに不具合があり（AC電源のコンセントを抜いたら、設定していた日付けと日時がリセットされ、私のパソコンのデフォルト値である、2004/1/1の0:00にリセットされてしまう）、それが原因と思われます。時刻を今の日時に再設定して、Blogを立ち上げたら今まで見れなかった新規投稿していたのも反映されて見る事ができました。今まで見れていた最後の更新日時の時点から、日付けと日時がリセットされ、狂っていたため、見えなかったと推測されます。このことは、ウィルススキャンをしようとしたら、日付けのエラーが出てきたため、もしやと思い、日時を再設定後見てみたら確認ができました。ほとんど諦めていたところに、ご連絡を頂き、｢よし、もう一度やるぞ！｣という思いになった結果、今回の問題が解決したかと思います。本当に有難うございました。これからも、投稿される記事を楽しみにしておりますので、よろしくお願い致します。

Posted by tmsy at 2005年03月19日 16:00

tmsyさん。こんにちは。

解決してよかったですね。詳細な報告ありがとうございます。なんとも稀な事態に遭遇されましたね。

余計なお世話ですが、保障期間中にきちんと修理か交換してもらったほうがよさそうですね。

Posted by hammer at 2005年03月19日 18:46

はじめまして。
プログ初心者のmimiです。よろしくおねがいします＾＾
このサイトを読んで、デザインが決まっているのから、自分でカスタムできるスタイルシート（？）に変えることができました。お世話になってます。
ありがとうございます！！

リンク先をバナ−ではり付けたいんですが、うまくできません＞＜
それと、サイドバーにバナ−付きリンクを貼付けたいんですが、それもうまくできません＞＜
やり方を教えて頂けますか？？
ここに書いてくれてるのに理解できずにごめんなさい。
ファイルの保存まではできたんですが、

＞後はこのサーバー上のファイルに対してリンクを貼ります

っていうところからがよくわかりません。
教えてください。
お願いします！！ブログにも書いてあるのでよろしくおねがいします。

Posted by mimi at 2005年04月28日 00:09

はじめまして、mimiさん。
参考にしていただいてうれしいです＾＾

確かにこの部分少し分かりにくいですね。気が回りませんでした。後で記事にしますね。

Posted by hammer at 2005年04月28日 01:03

hammerさんこんばんわ。
ありがとうございます＾＾
教えてもらえてうれしいです＾＾
よろしくおねがいします☆

Posted by mimi at 2005年04月29日 01:02

はじめまして＾＾

ブログ初心者のモリです。
このサイトをみて色々と勉強させていただいています。ありがとうございます＾＾

この記事を読んで画像ファイルの貼り付け方が分かりましたので、ライブドアブログで自分なりＣＳＳをつくってみようと思いました。「HTMLテンプレートの編集」でトップページの編集でタイトルのバックに画像ファイルを貼ろうと思ったのですが、どこに画像ファイルのタグを貼ってよいのか分かりません。（説明わかりずらくてすいません；
と言うか、本当にトップページの編集でできるのでしょうか？おヒマがあれば教えてください。（もし説明している記事があったらすいません；

Posted by モリ at 2005年07月03日 12:22

はじめまして、モリさん。

トップページの編集でOKでしょうね。ただ、説明には少し手間がかかりそうです。近いうちに記事にしますので。

Posted by hammer at 2005年07月04日 00:11

すいませんご迷惑かけて＾＾；

記事にしてもらうと大変うれしいです。
これからココにお世話になると思います＾＾

Posted by モリ at 2005年07月04日 15:47

モリさん、こんばんわ。

おそらくそんなに難しくないんですけどね。トップページのHTMLというより、CSSでやった方がたぶんスマートです。

Posted by hammer at 2005年07月05日 00:41

コメントお待ちしています。こちらではコメント認証もコメント保留も行っておりません。お気軽にコメントください＾＾