「いさはやサイズ」使い方応用編＆よくある質問集

よく問い合わせがあるのが、画像の横に文章を入れる方法です。
特に縦長の写真の場合は横に大きな空白ができてしまうので、ここに文章が入ると見た目がすっきりします。

ある程度の知識が必要となりますが、ブログの設定などをいじるわけではないので、「失敗したら記事ごと削除してしまえ！」ぐらいの気持ちでチャレンジしてみてください。


HTML で設定します

【解説】
画像を表示させるためのタグ<img src="http://〜 />の部分をちょこっといじるだけです。
・align="left" で画像を左側に配置し、文章を回り込ませます。
・<br clear="all"> で回り込みを解除します。
この２つをセットで使います。
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〜の部分が横にはみ出します。


例）

ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。ここに画像の横に回り込ませる文章を入力します。

ブログの記事を書いていて、特定の文字（または文字列）だけサイズを大きくした場合、上下の行にある文字や画像と重なってしまうことがあります。
こんな時は以下の方法で解決します。

管理画面から、「デザイン」→「マイスタイルシート」を開いて、

/*---------------------------
Article style
---------------------------*/
の下の、

.blogbody {
margin-bottom:15px;
background:#fff;
line-height:120%;
font-weight:normal;
border:1px solid #003366;
}

という部分の中の、

line-height:120%;

の行を、%無しの

line-height:1.2;

に変更してください。
この部分は本文中の『行間』を指定する値です。
この場合の1.2とは、行間を1.2倍にしろという命令になります。
％のような単位を付けなければ、大きい文字でも大きい文字なりの行間が確保できます。
ただし、ウインドウズ９５あたりの古〜いブラウザ（パソコン）だとレイアウトが崩れる可能性があります。
まあ、あまりに古いブラウザのことは気にしなくてもいいとは思いますが。