との思いから、リアルタイムプレビューを試した。
パソコンの環境
使用したノートパソコンの設定等。
基本的な入力
あいうえお[f:id:ogohnohito:20191109105629j:plain:left:h**]
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゐゆゑよ
らりるれろ
<br clear=all>
- 上記を入力する。(コピペ可)
- fotolife記法については、「はてなフォトライフの写真を貼り付ける(fotolife記法) - はてなブログ ヘルプ」を参照。
- 下記の fotolife記法オプションは、はてなダイアリーのヘルプに載っている。
- ":left" は、画像を左寄せで表示し、文字を右に回り込ませるオプション
- ":h**" は表示する画像の縦サイズ(高さ)を指定するオプションで、** に高さを px.(ピクセル)値で入力する。
- 最終行の "<br clear=all>" は、画像の左寄せ・右寄せを中止する htmlタグで、任意。
- 次に画像を入れた時に 有り/無し の違いが出ることがある。
画像の高さを6行分にするには‥‥
- 自分のブログを開き[記事を書く]
- 本文に上記をコピペする。
- [リアルタイム プレビュー]をクリックする。
- 右半分にプレビューが表示される。
- 1行目:あいうえお[:h**]
- ":h**" というオプションは無いので、そのまま表示されたもの。(たぶん)
- 画像が大きいのは、hオプションが付いていないので、原サイズ(136×482)で表示された...
- 1行目:あいうえお[:h**]
- 次に、左側の ":h**" の ** を、例えば 100 に変更すると‥‥
- リアルタイム プレビューの画像が小さくなる
- 5行分の高さしかないので、h120(6の倍数が良いと思う)にしても、チョッとたらない。
- h132にすると 7行分の高さになるので、h126 で完成! とした。
- 選択して見ると、画像の周囲には余白があるので、ぎりぎりまで高くはできない...(たぶん)
- 今回の計算では 126/6=21px./行となる。
- 試しに、5行の高さにするのは 21×5=105、で h105 にしたら‥‥ できた。
- リアルタイム プレビューを閉じる。
- h126 でプレビューしたら、まだ余裕がある。h138 でOKだった。
- この違いは何なのだろうか‥‥ リアルタイム プレビューは機能の確認,目安で、画像の大きさを決めることまで考えていないのだろう...