2005年3月19日

●エントリーに画像を表示させよう!

エントリーに画像を貼り付けるには、GTROCのブログサーバーに画像ファイルをアップロード(保存)してから、新しいエントリーの編集画面を表示させて新しいエントリーとして作成するか、画像貼り付け用のタグを表示させて既存のエントリーの一部にコピーするかの2通りの方法があります。

今回は、後者の「既存もしくは現在編集中のエントリーの一部に画像を貼り付ける。」をやってみましょう。

①「ファイルのアップロード」画面の呼び出し
下の画像のように、「ファイルのアップロード」をクリックします。
クリックして拡大

注:②画像サイズの適正化のお願い
なお、エントリーに画像を表示させるときは、アップロードした画像がそのままのサイズで表示されます。
サーバー負荷の軽減と、ブログの見栄えのよさを考慮して、アップロードする前に画像編集ソフト(Adobe Photoshop、Paintshop Proなど)を使って、適切なサイズにトリミングや編集しましょう。
横幅はだいたい300px~400pxの間を最大にするとブログのデザインが崩れずきれいに表示されます。

③「参照」ボタンをクリックしてファイルを選択
参照」ボタン(Mac版Safariでは「ファイルの選択」)をクリックして、表示させたい画像ファイルを選択してください。
クリックして拡大④⑤アップロード先の選択
画像ファイルのアップロード先のディレクトリは、「ローカル・アーカイブ・パス」か「ローカル・サイト・パス」からの相対パスで指定できます。
パスを指定しないと、エントリの文書ファイルと同じ場所に保存されてしまうので、ここは画像専用のディレクトリに画像ファイルを保存しましょう。
そのため、「ローカル・アーカイブ・パス」のラジオボタンをクリックしてマークし、隣のボックスに「images」と半角で入力します。決して全角で入力しないでください。エラーの原因となります。
入力項目が正しいことを確認したら、「⑥アップロード」ボタンをクリックします。

次の画面で「ファイルをアップロードしました。」というメッセージが表示され、画像の貼り付け方の選択画面になります。

⑦「アップロードしたファイルのHTMLを表示」をチェック
クリックして拡大アップロードしたファイルを使って新しいエントリーを作る」を選ぶと、画像を表示するHTMLタグが入った新しいエントリー編集画面が表示されます。ここでは、前回作成したエントリーの内容に画像を追加するので、「アップロードしたファイルのHTMLを表示」を選択します。
次にある「サムネイル」はGTROCブログサーバーでは利用できないので、「このイメージのサムネイルを作る」にチェックをしないでください。

⑧貼り付け方の選択
画像の表示方法は「埋め込み」を選択してください。GTROCブログサーバーではサムネイルの自動生成機能が利用できないので「ポップアップ」の自動生成はサポートしていません
埋め込み」をクリックします。

⑨画像貼り付け用HTML
クリックして拡大画面のボックスの中に画像貼り付け用のHTMLが表示されます。
これをすべて選択してコピーします。
すべて選択はマウスで表示されているHTMLの端から端までをドラッグするか、または、ボックス内で一度クリックして「Ctrl」を押しながら「A」(「Ctrl+A」)を押します。
コピーは、マウスの右ボタンをクリックして出てきたメニューから「コピー」を選ぶか、または、選択範囲を反転表示させたまま「Ctrl」を押しながら「C」(Ctrl+C)を押します。
コピーしたらこの画面を閉じてOKです。

⑩コピーしたHTMLをエントリーへ貼り付ける
では、エントリーの編集画面へ戻ります。
エントリーの内容(body)ボックスの中で、さっきコピーした画像貼り付け用HTMLタグを画像を表示させたい場所に貼り付けます。
クリックして拡大

貼り付いたことを確認し、編集内容に間違いがないことを確認したら、編集画面の下にある「保存」をクリックします。

⑪ブログサイトの確認
きちんと編集、保存されたかどうかを確認するため、編集画面の上部にある「サイトの確認」をクリックします。
新しいウィンドウが開き、ブログのサイトが表示されますので、正しい場所に正しい画像が張り付いているかをチェックします。

クリックして拡大

以上がブログのエントリーへの画像の埋め込み方法の紹介です。

ご質問、ご不明な点、ご相談はコメント欄に記入してください。
メールが送られてきてしまうと、1対1の情報共有となってしまいます。
コメントに残し、あとから同じことが分からない人が調べられるようにしてあげましょう。

投稿者:yama、投稿時刻:2005年3月19日 00:00
トラックバックURL

このエントリーのトラックバックURL:
http://www.gtroc.com/mt2/mt-tb.cgi/125