FC2ブログ公式マニュアル

編集画面から画像を入れる手順

　

記事を書きながら、文章の中に写真（画像）を配置する手順です。
画像は１記事の中にいくつでも掲載することができます。また追記側にも同じように画像を入れられます。

画像はすでにアップロードされてるものとして説明します。ファイルのアップロードについては別項目の解説をご覧ください。
［参照］ファイルをアップロードする

【１】

新しく記事を書く（記事の編集）画面で、記事テキスト入力欄に画像を挿入します。画像も本文と同じところに書き込みます。

【２】

挿入位置にカーソルを合わせて、ツールメニュー をクリックします。

【３】

▲別ウィンドウがポップアップします

ポップアップした別ウィンドウに、すでにアップロードされている画像の一覧が表示されます。
そこから記事内に入れたい画像を選んで、［この画像で記事を書く］ボタンをクリックします。

サムネイル（小さいサイズの画像）が生成されている場合は、［サムネイルで記事を書く］のボタンで挿入できます。

【４】

カーソルの位置に画像のHTMLコードが挿入されました。
２点目以降の画像も同じ要領で追加していくことができます。

入れた画像を外すには、追加されたHTMLコードの部分を削除します。

▲pagetop

ファイル管理画面から画像を選んで記事を開く

ファイル管理画面（サイドメニューの「ファイルのアップロード」）から、画像を選んで、直接記事の中に画像のタグを入れることもできます。

「ファイルのアップロード」画面から、［記事を書く］ボタンをクリック

画像の一覧から記事内に入れたい画像を選んで、［この画像で記事を書く］ボタンをクリックします。

本文入力欄に画像のHTMLタグがすでに入っている状態で、「新しく記事を書く」画面が開きます。

▲pagetop

画像のHTMLタグについて

初期設定で挿入される画像HTMLタグは以下のような形式です。

　<a href="http://ファイルのアドレス" target="_blank">
　<img src="http://ファイルのアドレス" alt="タイトル" border="0" />
　</a>

a href=...

画像をクリックしたときに、画像だけを別画面で開くようにリンクされています。
記事内の画像をサムネイルにして、クリックすると拡大表示させるようにもできます。

不要な場合は　<a>　</a>　の部分を削除します。

target="_blank"

「_blank」を指定しておくと、別画面で画像が開きます。

img ...

画像を表示させるHTMLタグです。この部分だけあれば画像は表示されます。

alt=...

ファイル管理（アップロード）画面で、「タイトル」に設定したテキストが入ります。

画像が表示されないときや、読み込み中はこのテキストが表示されます。

「img...」以外のタグはなくても、画像は表示されます。不要な場合は、「環境設定の変更」で、挿入されるタグの設定を変えておくことができます。(参照「投稿設定」)

▲pagetop

画像を横に並べて表示する

img はインライン要素のため、前後にある文字などの要素が回りこみます。画像コード（img 要素）を連続して記述すれば自然と画像を並列表示させることができます。

ブログ記事作成画面のリアルタイムプレビューを例にしながら、画像を横に並べる方法を解説します。

※MacでSafariブラウザをご利用の場合は、リアルタイムプレビューの機能はございませんので、 　「プレビュー」ボタンでご確認ください。

もし「自動改行」がオンになっていると、改行位置に <br> が補完されて強制改行になるので、改行や空行は入れずに、並べたい画像のコードは間を空けずに繋げてください。

横並びにした画像の最後には、強制改行（br）が入っていないと、その後の文字なども続いて回り込んでしまいます。 回り込みをさせたくない位置には強制改行（br）を入れてください。

このように複数の画像が横並びになりました。
★使用しているテンプレートのスタイルシートによっては、そちらのスタイル指定が優先され、画像が横並びにならないことがあります。
またテンプレート幅によっては、レイアウト崩れの原因になることもあるのでご注意ください。

▲pagetop