ファイルのアップロードをしよう! ブログ入門 初級編

今回はファイルのアップロード、まずは、写真や画像のアップ方法を解説します。
これも難しくありませんので、いろいろな写真や画像をアップしてみてください。

ゆんフリー写真素材集さんからお借りして、写真をアップしてみたいと思います。

人気blogランキング参加中!昨日と変わらず17位!

まずは、アップする写真か、画像を用意してください。
ゆんフリー写真素材集さんでは、2000枚以上の超高解像度写真素材画像を商用利用、加工を含めてフリー(無料)で提供されています。

Blog の投稿

 Blog の投稿画面:ファイルのアップロード ⇒
























新規ファイルの追加 ⇒

新規ファイルの追加

ファイルタイトル
これが ALT 属性になり、代替テキストという意味で、そこの画像が表示されない時に、代わりのテキストを表示されます。また、マウスのポインターを画像の上にもってくるとテキスト表示されます。

ファイル 参照
ご自身のパソコンの画ファイルを開き、アップする画像を指定します。

サムネイル
□にチェックをいれるとサムネイル画像(縮小画像)が作成され、画像をクリックすると別ウィンドウで、実際にアップした大きさの画像が、表示されます。

元が、小さい画像なら必要ありませんし、写真などを鮮明に表示したい場合は、サムネイルを作った方が、ブログ閲覧時に負荷がかかりません。

ファイルのアップロード

保存する ⇒
アップロード完了しました
記事を投稿する
記事を投稿するをクリックしますと Blog の投稿画面:新しく Blog 投稿するの本文テキストボックスにタグが記述されますので、その中に文章を書きこみます。

新しく Blog を投稿する

始めての方は、タイトルをつけ、一度、下の [ 保存する ] をクリックして、サイトを確認されると良いと思います。

ブログサイトを開いたら、ポインターを画像の上に置いてみてください。ファイルのタイトルで入力したテキストが浮かび上がると思います。ちょっとしたコメントにも利用できます。

サンセットディナー 思い出のパラオ
デフォルト(初期設定)では、上の新しく Blog を投稿する画像の最下段のように、タグの最後の方が aligin="left" となっていますので、aligin ⇒ br clear に変更すると文字の回りこみをしません。また、改行・改行・改行・・・で、文字を画像の下にもってくることもできますが、画面表示を確認しながらの調整になります。


サンセットディナー 思い出のパラオ

br clear="left" にして、一段改行するとこうなります。

この写真は、サムネイルにチェックをして作成しましたので、クリックすると別ウィンドウで、拡大写真を見ることができます。

いかがでしたでしょうか?複数の画像をアップするのは、レイアウトの調整に少し手間がかかりますが、1枚でしたら簡単です。まず、1枚アップしてみましょう!

また、サムネイル機能を使えば、アルバムを作ることもできます。
またの機会にアルバムの作り方を解説いたします。


人気blogランキング参加中! ← お役に立てれましたら、お願いします。

サイトマップはコチラ ⇒ ◆コンテンツ一覧◆
 
   
メルマガ登録 ID: 0000160275
ブログ作成入門講座
 
バックナンバー powered by まぐまぐトップページへ
Posted by ブログ作成入門講座 at 22:16│Comments(13)TrackBack(6) | Edit
この記事へのトラックバックURL
http://trackback.blogsys.jp/livedoor/blomal/14009942
この記事へのトラックバック
ブログのタイトルの背景を変更しました。 自分で言うのもなんなのですが、無茶苦茶気に入っています。 こんな素敵なタイトルに出来たのは全てoKiさんのお陰です。 (タイトルバックの画像もoKiさんにアドバイス頂きました! ちなみに始めに僕がデザインしたのはこれ(汗
ブログをプチカスタマイズ!【タイトルバック】【大学生・大学院生日記】at 2005年02月15日 12:40
“とりあえず、文字が書ければいいわ〜”と、何の準備もせずに始めて、はや2ヶ月が過ぎました。 当初は、FPを独学しようとする人や、主婦・学生さん向けのに、何か一つでも役に立つきっかけになれば・・・と、主に身近な人に見てもらうため、20話完結を予定していました
今さら聞けない・・・【な〜んちゃってFPのひとり言】at 2005年03月19日 16:44
バイトの先輩が ハワイに行って来られました。 こんなかわいいお土産を貰いました!   私は 実は ハワイ挙式までしたハワイ好きです。気候、食べ物、買い物、音楽。 そしてなんといっても 海!  何でかわからんけど、好きやわ〜 永住となると、どうだか
ハワイのおみやげ【のんびり、ぼちぼち、少しずつ】at 2005年04月08日 13:26
今回もoKiさんの所 参照デス 実にわかりやすく、大変参考になりますヨ
画像アップな練習【日々牛歩 [ Ox walk of every day ]】at 2005年04月23日 14:26
デフォルト(初期設定)では、上の新しく Blog を投稿する画像の最下段のように、タグの最後の方が aligin="left" となっていますので、aligin ⇒ br clear に変更すると文字の回りこみをしません。また、改行・改行・改行・・・で、文字を画像の下にもってくることもできま.
練習〜文字の回りこみ【初心者ブログの帳面】at 2005年05月01日 15:45
oKi様今日もまたoKi様のサイトを紹介させていただきました。 ありがとうございます。 入江
マガジン発行します。【あい環境 みんな幸せにな〜れ!】at 2005年05月31日 08:31
この記事へのコメント
コメント、ありがとうございます(^^♪
お陰様で、余白の欄、訂正いたしました。
一部残っておりますのは、明日頑張ります。
今日、一番嬉しかった出来事になりました。
これからも、よろしくお願いいたします。
Posted by shizukagozen at 2005年02月10日 23:33
shizukagozen さん、おはようございます。

> 今日、一番嬉しかった出来事になりました。

良かったです(^^)。この言葉が、僕には一番嬉しいです(^^)
また、チェックに伺います(^^;)。

oKi
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年02月11日 07:09
おはようございます。
先生((#^.^#)すみません、この方が書き出しやすいのですが・・・)
授業内容は、最初からプリントして閉じております。
ファイルのアップロードは、いまのままでよろしいのですね。(^^♪
Posted by shizukagozen at 2005年02月11日 07:36
shizukagozen さん、こんばんは。

> 授業内容は、最初からプリントして閉じております。

えっ!そうなんですか???(^^;)
いえ、嬉しいです!ありがとうございます!

下手なこと書けなくなりました・・・。いざとなったら、削除しようと・・・。
冗談です。(^^)

手を抜かず、一生懸命、頑張ります!!
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年02月11日 17:50
な、なんかお急ぎのようなのでとりあえずコメントしてみます・・・

って、あっ、もしやこれは!

> 人気blogランキング参加中! ← お役に立てれましたら、お願いします。

あっ、「選択範囲を引用」ができてる!
すごい! すごい〜!

後で詳細教えて下さい。
とりあえず今は夕飯タイムなので(笑)
Posted by Kota at 2005年02月11日 17:55
> 後で詳細教えて下さい。

♪♪♪〜(^ε^ ) クリックしてくれたかなぁ〜???
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年02月11日 18:01
> ♪♪♪〜(^ε^ ) クリックしてくれたかなぁ〜???

お、バーターっすか?(笑)

そんなこと言わんでも毎日クリックしてますって(笑)

で、オレの方もできましたよ〜ん(^^)v

ってゆーか、最初にオレもここと同じようにやってうまくいかなかったんですよ。

ちょっとFormタグ回りのコードがjugemとは違うから、そこら辺が問題なのかなぁと勝手に思ってたんですが・・・

ここのソース見るとまんま手を加えてないですよねぇ。
ということはオレの設置の仕方の問題だけか、と改めていろいろ確認してみたんですが・・・

実はJava Scriptの部分を外部ファイルにしたんです。
本体はできるだけ軽くしたいと思ったので。

で、この外部Java Scriptファイル、最初何も考えずにShift-JISで書いてたんですが、MTの文字コードはUTF-8だから、Java Scriptの方もUTF-8で書いた方がいいか、と思って書き直したんです。

その際のShift-JISからUTF-8へのコンバートに問題があったようです。
新規にUTF-8のテキストファイルを作り直してコピペし直したらできるようになりました。

ふー、ちょっと回り道をしてしまいました(^^;

いずれにしろoKiさんがここで実装してくれてなかったら勝手に「大改造が必要だ」と思い込んで実現できなかったと思います。

どうもありがとうございました(^^)/
Posted by Kota at 2005年02月11日 19:31
犬日記にコメント第一号ありがとうございました♪

フ〜ム、、、このブログには、いろいろ参考になる事が載ってますね〜。
(分かったふりしてるが、実は分からない事多し、、、。早くわかりたいよお!!!)

もちろんランキングにクリックしてきましたから!!!

こんなありがたいブログはないです。
写真ちょうどアップしてるところなんで、、、、。
また来ますね♪

Posted by at 2005年02月12日 22:27
茜さん、コメントありがとうございます。
第118号です(^^;)。 ※ oKi のコメント込み

> もちろんランキングにクリックしてきましたから!!!

ありがとうございます! m(_ _)m
写真のアップ、楽しみにしてますね♪
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年02月12日 22:37
はじめまして。スーパーアナログ・ブログ初心者モモです。
最初は書いてるだけで楽しかったんですが、最近少し欲が出てきて、よりいっそう楽しむために 急に がんばってます!

すごく詳しくて、わかりやすくて 感動しました!!
私は“ファイルのアップロード”が何なのか、わかってませんでした。
PCのファイルから直接『参照』部分にコピーしてた。。
“ファイル”じゃなくて、画像ファイル、とか、HTML とかつけてくれれば、一目瞭然なのに・・・と思うのは、わたしだけ??

まだまだ、何回も読ませてもらって、勉強させてください。
よろしくおねがいします!
Posted by モモ at 2005年04月08日 13:34
モモさん、こんばんは。oKi です。
コメント・TB・ご紹介、ありがとうございます!!

> スーパーアナログ・ブログ初心者モモです。

(^^)

> すごく詳しくて、わかりやすくて 感動しました!!

ありがとうざいます!!僕へは、何よりの誉め言葉です!! (^^)

> “ファイル”じゃなくて、画像ファイル、とか、HTML とかつけてくれれば、一目瞭然なのに・・・

ですね。(笑)

> よろしくおねがいします!

こちらこそ、よろしくお願いします!!
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年04月08日 21:03
oKi様

いつもありがとうございます。

お陰様でファイルのアップが出来ました。
テキストでの使い方も理解できました。
HTML形式からテキストに順次変えていく作業をはじめました。

テキストでは文字フォント変換は出来ないのでしょうか?

前回質問させていただいた事ですが、相手からメールでご連絡をいただく場合、
自分のメールアドレスを記載すると、自分の送信用ページが表示されます。

お問い合わせ・・・などをクリックするとクリックした人の送信用ページが表示されています。
これはどうすればできるのでしょうか?

よろしくお願い申し上げます。

ありがとうございます。
Posted by irie at 2005年05月24日 12:41
irie さん、遅くなりました。。(^^;)

> テキストでは文字フォント変換は出来ないのでしょうか?

可能ですが、あまりおススメできません。
下記を参考にしてみてください。
http://www.shtml.jp/mojibake/font.html

> お問い合わせ

なるほど、そういう意味ですか。下記をご参照ください。
http://blog.o-ki.biz/archives/13431540.html

スパム対策についてですが、メーラーの立ち上げタグにも触れています。
たぶん、このことだと思うのですが。。。
Posted by ブログ(ウェブログ)入門講座〜今日からブロガー at 2005年05月26日 06:32
 
 
AX