よく問い合わせがあるのが、画像の横に文章を入れる方法です。
特に縦長の写真の場合は横に大きな空白ができてしまうので、ここに文章が入ると見た目がすっきりします。
ある程度の知識が必要となりますが、ブログの設定などをいじるわけではないので、「失敗したら記事ごと削除してしまえ!」ぐらいの気持ちでチャレンジしてみてください。
HTML で設定します
【解説】
画像を表示させるためのタグ<img src="http://〜 />の部分をちょこっといじるだけです。
・align="left" で画像を左側に配置し、文章を回り込ませます。
・<br clear="all"> で回り込みを解除します。
この2つをセットで使います。
leftをrightにすると、画像を右寄せして文章を画像の左側に回り込ませます。
※以下の文中の[]は、半角(英数字モード)のスペースを意味します。
スペースは見えないので、ここでは便宜上使います。
【回り込み設定】
まずは画像をファイルマネージャーからアップロードします。
次に画像をサムネイルで挿入します。
ここまではいつも通りです。
さて本番、記事内容入力欄にゴチャゴチャ書いてあるタグの中から、画像を表示させるためのタグ<img src="http://〜 />を探してください。
見つかったら、一番最後の部分、[]/>の直前に
[]align="left"[]hspace="5"[]vspace="5"を足して、
align="left" hspace="5" vspace="5" />と変更します。
いちいちキーボードで打つのが面倒なら、[]/>の部分だけ上書きになるように
align="left" hspace="5" vspace="5" />をコピーして貼り付けてください。
hspaceは水平、つまり画像の左右に設定する余白のことで、5というのは5ピクセルの意味になります。
vspaceは垂直、画像の上下に設定する余白です。
これらの余白がないと、画像と文章がくっついて見苦しくなってしまいます。
余白の数値は5ピクセルでなくてもいいのでお好きにどうぞ!
【回り込み解除】
文章の後に
<br clear="all">
を足します。
これがないと本文の下にあるposted〜の部分が横にはみ出します。
例)
ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。
特に縦長の写真の場合は横に大きな空白ができてしまうので、ここに文章が入ると見た目がすっきりします。
ある程度の知識が必要となりますが、ブログの設定などをいじるわけではないので、「失敗したら記事ごと削除してしまえ!」ぐらいの気持ちでチャレンジしてみてください。
HTML で設定します
【解説】
画像を表示させるためのタグ<img src="http://〜 />の部分をちょこっといじるだけです。
・align="left" で画像を左側に配置し、文章を回り込ませます。
・<br clear="all"> で回り込みを解除します。
この2つをセットで使います。
leftをrightにすると、画像を右寄せして文章を画像の左側に回り込ませます。
※以下の文中の[]は、半角(英数字モード)のスペースを意味します。
スペースは見えないので、ここでは便宜上使います。
【回り込み設定】
まずは画像をファイルマネージャーからアップロードします。
次に画像をサムネイルで挿入します。
ここまではいつも通りです。
さて本番、記事内容入力欄にゴチャゴチャ書いてあるタグの中から、画像を表示させるためのタグ<img src="http://〜 />を探してください。
見つかったら、一番最後の部分、[]/>の直前に
[]align="left"[]hspace="5"[]vspace="5"を足して、
align="left" hspace="5" vspace="5" />と変更します。
いちいちキーボードで打つのが面倒なら、[]/>の部分だけ上書きになるように
align="left" hspace="5" vspace="5" />をコピーして貼り付けてください。
hspaceは水平、つまり画像の左右に設定する余白のことで、5というのは5ピクセルの意味になります。
vspaceは垂直、画像の上下に設定する余白です。
これらの余白がないと、画像と文章がくっついて見苦しくなってしまいます。
余白の数値は5ピクセルでなくてもいいのでお好きにどうぞ!
【回り込み解除】
文章の後に
<br clear="all">
を足します。
これがないと本文の下にあるposted〜の部分が横にはみ出します。
例)
ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。
文字の回り込みと回り込みの解除 by ブランド偽物 (11/06)
文字の回り込みと回り込みの解除 by ブランド偽物 (11/06)
タイトルと書き出し by 狂潮嬌娃 (11/05)
文字の回り込みと回り込みの解除 by スーパーコピーブランド (11/03)