ファイルのアップロードの使い方

先日ご質問をいただきました。

Q:サイドバーにバナー付きリンクを作りたいのですが、やり方がよく分かりません。

以前書いた記事「画像リンクを作るには」に対する質問です。おおよその事はこちらの記事で説明しているのですが、ライブドアブログの「ファイルのアップロード」とアップロードした画像へのリンクの貼り方が少し分かりにくかったようです。

ブログ内の記事以外の部分に画像付きリンクを作るには、まずその画像をブログサービスのサーバー上にアップロードしなければなりません。サーバー上へアップロードというのは、インターネットの向こうのブログサービスのサーバーに画像ファイルをコピーしておくことです。

ライブドアブログの場合は「ファイルのアップロード」という機能を使います。その他ブログでも似たような名前の機能があるはずです。ちなみにSeesaaブログなら「ツール」の「ファイルマネージャー」、FC２ブログなら「ツール」の「ファイルアップロード」がそれです。この画面で自分がリンクに使いたい画像を「参照」から選択して実行します。ブログサービスによってはタイトル名などを付ける設定があるので、後で見て分かる名前を適当に付けましょう。

ここまでは問題無いはずです。分かりにくいのは、画像がどこにどういった名前でアップロードされているかということです。

確実なのは、ファイルのアップロード画面のファイル一覧から、目的の画像を選択して「投稿する」をクリックすることです。すると記事投稿画面に変わり、アップロードした画像へのリンクが自動的に作られます。ライブドアブログの場合はこんな感じです。

＜img src="http://image.blog.livedoor.jp/〜/XXXX.gif" width="70" height="18" border="0" alt="〜" hspace="5" class="pict" align="left"/＞

＜img src=""　の部分がアップロードした画像へのリンクです。ライブドアブログの場合はこの後ろに余計な属性がいろいろ付きますが、すっきりと、

＜img src="http://image.blog.livedoor.jp/〜/XXXX.gif" width="70" height="18" border="0" alt="〜"＞

にしてしまってよろしいかと思います。
これだけだと画像へのリンクを貼っただけで、画像が表示されるようになっただけです。最後にこの画像をクリックした時のリンクを追加します。

＜a href="***リンクURL***" target="_blank"＞＜img src="http://image.blog.livedoor.jp/〜/XXXX.gif" width="70" height="18" border="0" alt="〜"＞***リンクテキスト***＜/a＞

＜a href="・・・・"の部分がリンクの設定です。ここにリンク先のURLを書き込みます。

このHTMLをサイドバーなどの好きな位置に貼り付けることで、画像付きリンクを作ることが出来ます。そんなに難しいことではないのですが、説明を書くとなにやらややこしくなりますね。



ブログはHTMLの知識が無くても簡単にサイトを構築できる便利なツールですが、こういった作業は逆に面倒くさいですね。通常WebサイトならホームページビルダーなどのWebサイト作成ツールで作成しますが、普通にファイルを選択してリンクを作るだけで、後はツールがHTMLをサーバーに転送する時に自動的に画像のアップロードもやってくれますからね。

Comments

こんにちはhammerさん！

こんな方法があったんですね！
私はファイルのアップロード画面のファイルタイトルをクリックしてアドレスバーに出たURLをコピーしてビルダで編集していました。

確かにブログは画像のアップロードがめんどくさいですね。

それとHTMLの説明の所ですが、「ここ」とか「＜img src=""　の部分」のようにするより示したい部分のHTMLに色を付けて「この色の部分がなになに」と言うようにしたらどうでしょう？
ちょっと初心者にはわかりづらいと思ったので。
初心者がでしゃばってすいません。

Posted by ティッカー at 2005年04月29日 16:45

ティッカーさん、こんばんわ。
初心者にとってはこの方法が一番いいかと思いまして。

確かにティッカーさんのご指摘どおり、色を使った方が分かりやすいですね＾＾；私もこのあたりの表現、どうしたらいいか悩んでいました。

私はテキスト編集モードを使っているのですが、HTML編集モードにしたらもう少し表現力が上げられそうですね。検討します＾＾

Posted by hammer at 2005年04月30日 02:08

hammerさんこんばんわ！
＞私はテキスト編集モードを使っているのですが、HTML編集モードにしたらもう少し表現力が上げられそうですね。検討します＾＾

私も最初はテキスト編集でしたが、今ではメモ帳とビルダーを使ってhtmlで書いてます。

記事を書き始めてわかりましたが人に伝える事は、
とても難しい事だとわかりました。
自分の捕らえ方と他人の捕らえ方では、
必ずしも一致しないので。
表現力や文章力がとても必要とされます。
私は両方ともまだまだ未熟なので
いまいちうまく行きませんよ。
日々勉強の毎日です。

Posted by ティッカー at 2005年04月30日 04:10

hummerさんおはようございます！！
ありがとうございました＾＾画像をクリックするとリンクができるようになりました！！
ありがとうございます＾＾
昨日はここのページを見ながら「サイドバーの幅を変える」に挑戦しました＾＾
サイドバーの幅も広げることができました！！

でもサイドバーに画像つきリンクを張り付けるっていうところがよくわかりません＞＜
何度もごめんなさい；；
サイドバーに画像を貼る時に、どこにHTMLを張り付けるのかがわかりません。

サイドバーの幅を広げる時に開いた場所とは、また別ですよね？？＞＜
昨日CSSがスタイルシートって気付きました（汗）・・ライブドアにも書いてあるのに＞＜
HPも作ったことがなくて本当にわかってないですが、画像のリンクができるようになりたいので教えてください！！
よろしくお願いします！！
hummerさんのページ、紹介させてください。
よろしくお願いします！！

Posted by mimi at 2005年04月30日 06:43

＞この　HTMLをサイドバーなどの好きなところに張り付けることで・・

っていうところの、サイドバーに張り付けるときにどこに張り付けるのかがよくわからないです。

そこまでは、大丈夫でできました＾＾

理解力がなくて申しわけないです＞＜

Posted by mimi at 2005年04月30日 06:48

はじめましてmimiさん
＞この　HTMLをサイドバーなどの好きなところに張り付けることで・・

このサイドバーとは、きっとプラグインの追加にある上級者向けプラグインのフリーエリアの事だと思いますよ。
その中にHTMLを記入するとサイドバーに表示されますよ。

Posted by ティッカー at 2005年04月30日 07:21

ティッカーさんはじめまして＾＾
ありがとうごぁいます！！
教えて頂いた上級者向けプラグインのフリーエリアに書いたらできました！！
ありがとうございます＾＾
とってもうれしいです♪

hummerさん、ティッカーさん感謝です＾＾
これからもよろしくおねがいします！

Posted by mimi at 2005年04月30日 08:04

mimiさん。良かったですね。最後の最後で手抜きな説明をしてすみませんでした。後で直しておきます＾＾；

そしてティッカーさん、ヘルプありがとうございます＾＾

Posted by hammer at 2005年04月30日 23:06

hammerさんこんばんわ！
迷惑だと思ったのですがついmimiさんに教えてしまいました。
迷惑でなくてよかったです。

それとヤフーバブルはなんかすごいですね。
hammerさんのブログがいきなり人気ランキングの
お小遣いで１位にきた時はビックリしましたよ。
毎回ほとんどリッチーさんのブログだったのと
月のポイントと週のポイントが同じなので超ビックリでした。

お小遣いネタ楽しみにしてます。
頑張ってくださいね、ほどほどに。

Posted by ティッカー at 2005年04月30日 23:48

こんばんわ、ティッカーさん。
ヘルプは大歓迎です。私もそんなに時間がありませんので。また機会があればよろしくお願いします。

Yahooバブルは本当にすごいです。お小遣いカテゴリ進出はちょっと反則気味でした・・・反省しています。来週になればこのバブルもはじけるでしょうから、そこそこの位置に落ち着く見通しです＾＾；

Posted by hammer at 2005年05月01日 00:47

どおも〜hammerさま。

最後に</a>をつけたら、より親切と思いました〜
こういう解説、初心者のころにめぐりあいたかったです（＾O＾）/。

Posted by afiliate at 2005年05月01日 10:10

どうも、afiliateさん。いつも拝見させてもらってます＾＾

おっしゃるとおりです＾＾；最後の最後で手落ちです・・・ご指摘ありがとうございます。

皆さんにご意見をいただけるととても参考になります。

Posted by hammer at 2005年05月01日 12:24

すごく参考になります！やってみたらできました！ありがとうございます！

Posted by 忽せ at 2005年05月27日 17:11

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