FC2ブログの記事で画像を使ってみる

ブログが作りたい!FC2ブログの作り方 > FC2ブログの記事で画像を使ってみる

FC2ブログの記事で画像を使ってみる

FC2ブログの記事で画像を使ってみる

FC2ブログ記事で画像を使う

今回は、FC2ブログの記事で画像を使う方法について書きます。

例えば、デジカメなどで撮影したあなたのお気に入りの写真を、ブログの記事で使うというわけです。

画像が有る記事と、無い記事では、アクセス数も大きく変わってくるそうですから、ぜひともやり方を覚えておきましょう。


ファイルアップロードとは?

FC2ブログの「ファイルアップロード」と言うのは、あなたの使っているパソコンから、FC2ブログのサーバへファイルを送信することをいいます。

「なぜ送信する必要があるのか?」というと、例えば、あなたのパソコンの中に写真があったとしても、それは他の人たちからは、見ることができないためです。(逆に見えちゃ困るよね)

FC2ブログのファイルアップロードとは?

また、「ファイルアップロード」では、主に写真やイラストなどの画像をアップする場合が多いのですが、テキストファイルや、HTMLファイルなどもアップすることが可能です。

主な条件は、以下ようです。(2009/08/11 現在)

  • 使用できるファイルの拡張子は、jpg/gif/png/mid/swf/ico/mp3/html/txt/css/js/rdf/xml/xsl
  • 1つのファイルサイズは、500KBまで
  • 被写体が18歳未満と思われるポルノ画像のアップロードは、固く禁止されています

「拡張子」について、あまりご存知でない場合は、記事『拡張子を表示させる方法』が参考になるかもしれません。


FC2ブログへ画像をアップする方法

(01)

FC2ブログ管理者ページの左側のメニューに、「ツール」があるはずなので探してみてください。

「ツール」の「ファイルアップロード」をクリックします。([ツール]-[ファイルアップロード])

ツールのファイルアップロードをクリック

(02)

作業領域に、「ファイル管理」画面が表示されます。

「アップロード」の[参照]ボタンをクリックしましょう。

ファイルアップロードの参照をクリック

(03)

あなたのパソコンから、FC2ブログのサーバへ「アップロードしたい画像」を選択し、[開く]ボタンをクリックします。

これで、ファイルを送信する第一段階の準備ができました。

アップロードするファイルの選択し、[開く]ボタンをクリック

ファイルを選択する前に、許可されているファイルタイプか確認しましょう。条件は前述の通りです。

(04)

次にタイトルを入れます。タイトルをいちいち入れるのは手間ですが、入力しておくと次のようなメリットがあります。

  • 後で画像を検索するときに探しやすい。
  • 入力したタイトルは、imgタグのalt属性として使用される。

また、alt属性を入れておくと、次のようなメリットがあります。

  • 目の不自由な人たちも、どのような画像なのか認識できます。
  • SEO的に、より評価されます。

何だかよく分からないかもしれませんが、入力しておくとメリットはあります。できるだけ、入れておくことをおすすめします。

それから、「複数アップロード」をクリックすると、「ファイル」と「タイトル」の入力枠が計6個に増えます。一度に複数のファイルをアップするような場合に便利です。(使い方は同じです)

alt属性がどういうお話なのか理解するためには、HTMLについて勉強する必要があります。

(05)

最後に、「同名ファイルがある場合、どのように処理するのか?」を選択し、[アップロード]ボタンをクリックします。

※:「別名で保存」に設定しておくと、同名ファイルをアップしても、上書きされません。

アップロードする

サムネイルを作成する場合は、チェックを入れておきましょう。サムネイルがいらない場合は、チェックを外しておいてください。(サムネイルのサイズも変更可能です)

同名ファイルは「別名で保存」に設定しておくと、同名のファイルをアップしようとすると、自動的にファイル名の後ろに日付と時刻が入って上書きされません。「別名で保存」が、おすすめです。

サムネイルとは、元画像を小さくした画像のことです。画像が、記事の幅におさまらないような場合に役立ちます。

(05)

ファイルのアップロードが成功すると、次のようなメッセージ(赤色)が、少し下のところに表示されるはずです。

ファイルをアップロードしました : http://blog-imgs-99.fc2.com/t/e/s/your-id/file_name_01.gif

そして、ファイル一覧にも、次のような形で画像が追加表示されているはずです。

アップロードさます

また、画像のところをクリックすれば、別ウィンドウで画像だけが表示されます。お試しあれ。

FC2ブログの画像ファイルサーバは、たまに調子が悪くなることがあります。(うまくアップされない場合があります)


FC2ブログ記事で画像を使う

(01)

「サムネイルで記事を書く」をクリックします。

(02)

画面が切替わって、「新しく記事を書く」画面が表示されます。

また、記事(文章)を書く領域に、画像を表示するためのHTMLコードが挿入されているはずです。

画像を表示するためのHTMLコードが挿入される

HTMLとか、何のことか分からない人もいらっしゃると思いますが、「これで画像が入るのね!」とだけ理解しておいて特に問題ありません。

(03)

記事の「タイトル」を入力し、「カテゴリ」、「ジャンル」、「テーマ」を選びましょう。

「タイトル」を入力し、「カテゴリ」、「ジャンル」、「テーマ」を選ぶ

「タイトル」などのこの辺のお話は、記事『FC2ブログで記事を投稿してみよう!』で書いているので割愛します。

(04)

記事(文章)を書きましょう。

HTMLコードの最後のところにマウスのカーソルをあわせて、[Enterキー]を打鍵します。(画像と文章の間に余白を入れたいだけ[Enterキー]を打鍵します)

そして、文章を書き始めます。(適度に改行([Enterキー])を入れておくと読みやすくなります)

文章を書く

(05)

文章が書けたら、[プレビュー]ボタンをクリックしてみましょう。

[プレビュー]ボタンをクリック

(06)

プレビュー表示されます。(次のように、写真の下に文章がきます)

ブログをプレビュー表示

(07)

記事の内容が問題なさそうだったら、[記事を保存]ボタンをクリックして投稿しましょう。

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

記事の保存ができたら、「ブログの確認」などをクリックして、実際にブログを確認してみてください。

前の記事へ
次の記事へ

次回予告

次回は、FC2ブログのテンプレートを変更する方法について書きます。


関連記事

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

作成日:2007/09/10 更新日:2009/08/14

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

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

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

コメントの投稿

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

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/568-3814b061
 | トップページ | 

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
ありのごとくあつまりて