まりふのひと

はてなブログのリアルタイムプレビューを使ってみた

  1. 昨日の記事では画像の高さを決めるのにかなり試行錯誤した。
  2. 10/15に知った[リアルタイム プレビュー]を使えばもっと簡単に出来るのではないか‥‥

との思いから、リアルタイムプレビューを試した。

パソコンの環境

 使用したノートパソコンの設定等。

  • OS:Windows10 Home
  • ディスプレイ
    • 解像度:1366×768
    • 文字のサイズ:125%
  • ブラウザーFirefox
  • なてなブログのデザイン:MINIM(インストールしたテーマ)
基本的な入力

あいうえお[f:id:ogohnohito:20191109105629j:plain:left:h**]
かきくけこ
さしすせそ
たちつてと
なにぬねの
はひふへほ
まみむめも
やゐゆゑよ
らりるれろ
<br clear=all>

画像の高さを6行分にするには‥‥
  1. 自分のブログを開き[記事を書く]
  2. 本文に上記をコピペする。
  3. [リアルタイム プレビュー]をクリックする。f:id:ogohnohito:20191110064428j:plain:right:h48
  4. 右半分にプレビューが表示される。
    • 1行目:あいうえお[:h**]
      • ":h**" というオプションは無いので、そのまま表示されたもの。(たぶん)
    • 画像が大きいのは、hオプションが付いていないので、原サイズ(136×482)で表示された...
  5. 次に、f:id:ogohnohito:20191110070548p:plain:right:w320左側の ":h**" の ** を、例えば 100 に変更すると‥‥
  6. リアルタイム プレビューの画像が小さくなる
  7. 5行分の高さしかないので、f:id:ogohnohito:20191110071822j:plain:right:w320h120(6の倍数が良いと思う)にしても、チョッとたらない。
  8. h132にするとf:id:ogohnohito:20191110073611j:plain:right:w320 7行分の高さになるので、h126 で完成! とした。
    • 選択して見ると、画像の周囲には余白があるので、ぎりぎりまで高くはできない...(たぶん)
    • 今回の計算では 126/6=21px./行となる。
    • 試しに、5行の高さにするのは 21×5=105、で h105 にしたら‥‥ できた。
  9. リアルタイム プレビューを閉じる。

  10. h126 でプレビューしたら、まだ余裕がある。h138 でOKだった。
    • この違いは何なのだろうか‥‥ リアルタイム プレビューは機能の確認,目安で、画像の大きさを決めることまで考えていないのだろう...