◆ 画像入りの記事を投稿しよう【2】 記事の投稿
★画像ファイルをサーバーにアップロードする
画像を使用した記事を書く場合、まずは使用する画像をサーバーにアップロードしておく必要があります。
サーバーと言うのは常時ネットワーク(この場合Web)に接続されているコンピュータだと思って下さい。(ブログのデータもここに置かれています)
そこに画像を置いておく事で、常に見られる状態にするわけです。
自分のパソコンなどからネットワークサーバーにデータを送る事を「アップロードする(またはアップする、上げるなど)」、逆にサーバーのデータを自分のパソコンに送る(記録する)事を「ダウンロードする(または落とすなど)」と言います。
「アップロードするファイルの選択」欄に注目して下さい。

「ファイルの選択」の入力欄に直接ファイルパスを入力しても良いのですが、もっと簡単に「参照」ボタンをクリックしてファイルの保存場所を選んでみましょう。

上図のウインドウが開いたらアップロードするファイルを選択して、「開く」をクリックします。
「ファイルの選択」の入力欄にファイルパスが入ります。
「ファイルのタイトル」は空白のままなら、もとのファイル名がそのまま使用されます。
Web上で使用するファイルの名前は、半角英数で付けるの一般的ですので、もとのファイル名に全角文字が使用されている場合は、ここでWeb用のファイル名を付けておきましょう。
ファイルの種類がJPEGかPNGの場合は「サムネイルも作成する」が使用できます。
チェックをオンにすると、アップロードするのと同時に縮小されたサムネイル画像が作成されます。
FC2ブログの場合はファイル名の後に「s」が付いた名前で保存されます。
となります。
最後に「アップロード」ボタンをクリックすれば、ファイルがアップロードされます。
★画像ファイル使用した記事を書く

ファイルが正常にアップロードされると上図のように表示されます。
画像入りの記事を書く場合は、この画面から「記事を書く」を選択します。
サムネイルを作成した場合は「記事を書く(サムネイルあり) | サムネイルなし 」と表示されていますが、サイズの大きい画像を使う時は、通常「サムネイルあり」を使用します。
大きい画像を直接使うと、ブログのレイアウトを崩してしまう場合も有りますし、何よりも表示されるのに時間がかかるので、特に通信速度が遅い環境の人はそのようなページを見てくれない可能性があるからです。
「サムネイルあり」をクリックすると記事を記入する欄に下表のようなタグ(命令)が挿入されます。
「a href」は「リンクの使い方を知っておこう」で解説した通りの機能で、この場合サムネイル画像をクリックしたら新しいウインドウ(target="_blank")で「EDIT_IMG_0001.jpg」を開けと言う意味になります。
注目して欲しいのは「img」から始まるタグです。
「src=」の後に続いているのが表示させたい画像のアドレスで、「border="0"」は枠線を表示しないと言う意味になります。
単に画像だけを表示したい場合は表示したい位置に「img」タグだけを書けばOKです。
削除したい場合はこれらのタグを削除します。
「新しく記事を書く」や「過去の記事の編集」から画像を挿入する場合は、画像を挿入したい位置にカーソルを合わせて下図赤丸のボタンを押すと、新しいウインドウで同様のページが開くので、その後は同じ手順で挿入可能です。

プレビューボタンをクリックして確認し、問題が無ければ「保存」をクリックします。
画像は一つの記事内に複数表示する事もできますし、表示する位置も自由に決める事ができます。
下図のように表示されるはずです。

表示サンプル(クリックすると大きい画像が開きます)
画像を使用した記事を書く場合、まずは使用する画像をサーバーにアップロードしておく必要があります。
サーバーと言うのは常時ネットワーク(この場合Web)に接続されているコンピュータだと思って下さい。(ブログのデータもここに置かれています)
そこに画像を置いておく事で、常に見られる状態にするわけです。
自分のパソコンなどからネットワークサーバーにデータを送る事を「アップロードする(またはアップする、上げるなど)」、逆にサーバーのデータを自分のパソコンに送る(記録する)事を「ダウンロードする(または落とすなど)」と言います。
![]() |
FC2ブログの場合、まず管理者ページのメニューのツール欄から「ファイルアップロード」をクリックして、ファイルをアップロードする為のページに移動します。 |
「アップロードするファイルの選択」欄に注目して下さい。

「ファイルの選択」の入力欄に直接ファイルパスを入力しても良いのですが、もっと簡単に「参照」ボタンをクリックしてファイルの保存場所を選んでみましょう。

上図のウインドウが開いたらアップロードするファイルを選択して、「開く」をクリックします。
「ファイルの選択」の入力欄にファイルパスが入ります。
「ファイルのタイトル」は空白のままなら、もとのファイル名がそのまま使用されます。
Web上で使用するファイルの名前は、半角英数で付けるの一般的ですので、もとのファイル名に全角文字が使用されている場合は、ここでWeb用のファイル名を付けておきましょう。
ファイルの種類がJPEGかPNGの場合は「サムネイルも作成する」が使用できます。
チェックをオンにすると、アップロードするのと同時に縮小されたサムネイル画像が作成されます。
FC2ブログの場合はファイル名の後に「s」が付いた名前で保存されます。
| 【例】 EDIT_IMG_0001.jpg の場合 > EDIT_IMG_0001s.jpg |
最後に「アップロード」ボタンをクリックすれば、ファイルがアップロードされます。
★画像ファイル使用した記事を書く

ファイルが正常にアップロードされると上図のように表示されます。
画像入りの記事を書く場合は、この画面から「記事を書く」を選択します。
サムネイルを作成した場合は「記事を書く(サムネイルあり) | サムネイルなし 」と表示されていますが、サイズの大きい画像を使う時は、通常「サムネイルあり」を使用します。
大きい画像を直接使うと、ブログのレイアウトを崩してしまう場合も有りますし、何よりも表示されるのに時間がかかるので、特に通信速度が遅い環境の人はそのようなページを見てくれない可能性があるからです。
「サムネイルあり」をクリックすると記事を記入する欄に下表のようなタグ(命令)が挿入されます。
| <a href="http://blog-imgs-30.fc2.com/b/p/c/bpc/EDIT_IMG_0001.jpg" target="_blank"><img src="http://blog-imgs-30.fc2.com/b/p/c/bpc/EDIT_IMG_0001s.jpg" alt="" border="0"></a><br clear="all"> |
注目して欲しいのは「img」から始まるタグです。
「src=」の後に続いているのが表示させたい画像のアドレスで、「border="0"」は枠線を表示しないと言う意味になります。
| <a href="大きい画像のアドレス" target="_blank"(新しいウインドウで開く)><img src="サムネイル画像のアドレス" alt="" border="0"(枠線を表示しない)></a><br clear="all"> |
削除したい場合はこれらのタグを削除します。
| <img src="表示する画像のアドレス" alt="" border="0"(枠線を表示しない)> |
「新しく記事を書く」や「過去の記事の編集」から画像を挿入する場合は、画像を挿入したい位置にカーソルを合わせて下図赤丸のボタンを押すと、新しいウインドウで同様のページが開くので、その後は同じ手順で挿入可能です。

プレビューボタンをクリックして確認し、問題が無ければ「保存」をクリックします。
画像は一つの記事内に複数表示する事もできますし、表示する位置も自由に決める事ができます。
下図のように表示されるはずです。

表示サンプル(クリックすると大きい画像が開きます)
コメント
コメントの投稿
この記事に対するトラックバック
トラックバックURL:
この記事にトラックバックする(FC2ブログユーザー) ※英字のみのTBは受け付けられません。













身近な自然
winrembo(10/07)
カカオ(ブログdeフォトコン)(09/22)
模糊(09/21)
模糊(09/21)
カカオ(ブログdeフォトコン)(09/21)
ウルフのスナフ(09/21)
カカオ(ブログdeフォトコン)(09/21)
カカオ(ブログdeフォトコン)(09/19)
模糊(09/19)
mellon(09/19)
カカオ(ブログdeフォトコン)(09/14)
s.sawada(09/13)
カカオ(ブログdeフォトコン)(09/09)
狐丸(09/09)
カカオ(ブログdeフォトコン)(09/05)
カカオ(ブログdeフォトコン)(09/05)
としぽ(09/04)
カカオ(ブログdeフォトコン)(09/02)
カカオ(ブログdeフォトコン)(09/02)
まみ(09/02)
まみ(09/02)
カカオ(ブログdeフォトコン)(09/01)
狐丸(08/31)
ココロ(08/29)
カカオ(ブログdeフォトコン)(08/25)
さくら(08/24)
カカオ(ブログdeフォトコン)(08/06)
ベッカズ(08/04)
カカオ(ブログdeフォトコン)(08/04)
カカオ(ブログdeフォトコン)(07/30)