はてなダイアリーの「貼り付ける写真の位置/大きさを選択」の違いは何?

§1.いきさつ

 iPS-77 で行っている すぐわかる Wordで かんたんお役立ち作例集の P.49 に

とある。この枠内の画像(例えばWord2010のリボン/グループ名の右端にあるボタン?)を作って、ブログでも活用したい‥‥ と思いついた。

§2.ボタンの画像ファイルを作る
  1. Wordを起動し、白紙の文書を開く。
  2. 任意のグループ名右端のボタンをポイントする。
     → ボタンがグレー(Word2013の場合)で囲まれる。
  3. [PrintScreen]
  4. ペイントを起動し、貼り付ける。
    • 選択&トリミングするので、事前にキャンバスを小さくする必要はない。
    • Wordは閉じてよい。
  5. ボタンを大きめに選択し、
  6. [トリミング]する。
    • 1画面に納まる範囲で、ズームで4〜500%程度にすると次の操作がやり易い。
  7. Ctrl+A(すべて選択)
  8. ボタンの左上隅を 0, 0px 地点までドラッグする。
  9. 確定する。([選択]の上をクリック…選択を解除…する。
  10. キャンバスの高さをボタンぎりぎりにする。
  11. キャンバスの幅をボタンぎりぎりにする。
    • これで完成したことになる。
    • 間違ったら Ctrl+Z で戻す。
    • 画像のサイズを確認する。(例えば 15×15px)
      • 高さが15px.であれば、KKDではブログの1行の高さと同じになる。(たぶん)
  12. 名前を付けて、自PCのフォトライフに保存する。(JPEGでよい)
§3.ブログの下書きで確認する
  1. 新しい下書きを書く
  2. 例えば “あいうえお” と入力する。
  3. “い” と “う” の間に、§2で作った画像をアップロード&貼り付ける。
     貼り付け時の
    • 画像の位置:◉ブロック ‥‥ Wordの「行内」に相当する。
    • 画像の大きさ:◉オリジナル*1
  4. 画像のはてな記法 “[f:id:‥‥]” の前後で改行された時は、前後の改行マークを取り一行にする。
  5. [確認する]で、1行選択し文字と画像の高さを見る。
    • 1. は画像が小さい例
      • 画像と文字列の高さを揃えたい時は、“[f:id:‥‥]” の ”[ ]” 内の最後に “:h15” の要領で、幅(例 :w***)ではなく高さで指定した方が揃えやすい。
          例 [f:id:はてなID:20180528131729j:image:h15
        • “h” は height(高さ)の略。
        • “15” は、px.値で、PCにより異なるので、各自で確認する。
    • 2. は高さが揃った例
    • 3. は画像が大きい例で、結果として行間が空くことになる。

 どれが良いとか悪いというのではなく、記事全体から決める。
但し、原画を拡大するとボケる。「きれいに拡大する」ことはできない。
今回の画像を大きく作るには、拡大鏡で拡大後、PrintScreen するしかないだろう...

§4.アップロードした画像を専用のフォルダに移す

 アップロードした画像は今後も使うことが予想されるので、専用のフォルダ(ここでは「汎用」。但し、フォルダ名は任意)ダに移し、探しやすくする。

  1. [確認する]。
  2. 画像をクリックする。
    • これは HatenaFotolife の画面を出すためで、画像は何でもよい。
  3. フォルダを編集
  4. 汎用フォルダに移す画像を選択する。
  5. 「このフォルダの写真を編集」の下にある「トップ」フォルダを「汎用」に変える。
    • 「汎用」が無ければ、右側の  フォルダ   新規  の[新規]をクリックして作る。但し、名前は任意。
  6. [振り分け]る。
  7. ブラウザーの[戻る]ボタンで、下書き編集画面まで戻す。

§5.「画像の大きさ」を試す

 (写真)から画像を貼り付けるとき、画像の大きさを選択できる。
     

この違いを、拡大鏡で、500%で PrintScreen した画像で見てみる。
No.選択画像
1◉オリジナル
・サイズ:75×75 px.
・サイズ指定なし=原画
2◉S(Small)
・サイズ:60×60 px.
・計算上は 80%だが...
3◉M(Medium)
・サイズ:75×75 px.
・計算上は 100%だが...
4◉L
・サイズ:360×360 px.
・幅 360px.指定。今回は480%となり、粗が目立つ。
5◉LL
・サイズ:640×640 px.
・幅 640px.指定。今回は850%となり、ここまでやるかぁ〜

  • サイズは画像のプロパティで見た。
  • 5/30のiPS-77で ◉LL を試したところ
    1. [確認する]では、画像の幅は 640px.で表示された(記憶の限りでは...)のに、
    2. 試しに[公開する]と、幅が小さくなった。
      • 今考えると‥‥ そのために プレビュー があるのかなぁ〜 っと...
  • 「まりふのひと」のブログはサイドバーを削除してあり、結果として表示幅が広くなっている。各自のブログで異なるようだ。

*1:原型。原本。原図。原画。… goo辞書