記事に画像の回り込みをさせたい

こんにちは。

今日も、昨日も暖かい陽気になりました。お花見に絶好ですね。

パソコン初心者でも「ブログ記事に画像の右回りさせたい」、或いは「左回りにさせたい」という、私と同じく興味を持っている方もいらっしゃると思います。

ホームページ小太刀の迷手でも常用していますが、こちらでは私のようなパソコン初心者に向けて、アイコンが用意されています。
Excel、Wordでお馴染みの、【文字の折り返し】に似た機能ですね。

ところが、はてなブログさんでは、これに対応した機能となるアイコンが残念ながらありません。

はてなブログでは〔html〕で記述することを勧めている現状です。

そこで、HTML記述による画像の右回り、又は左回りについてご案内させていただきます。
以下はその手順を示した記録です。

1⃣１例として【縁台将棋】の画像を利用して、画像を右回りに表示します。

アップロードした画像をそのまま貼り付けると、次のように文字が画像の右下に記載されます。
これは、画像と文字が同じ「行」という認識状態です。

f:id:wnoseiza15:20180326065319j:plain 【縁台将棋】

2⃣【画像を右回りさせる】テクニックでは次のとおりに、文字が左に、画像は右に掲載されます。

【縁台将棋】
上記の画像と比較してご覧になってみてください。

3⃣画像のURLを取得
『記事を書く』ページで、画像をアップロードしたらアップロードした画像を記事に貼り付けます。

記事に画像を貼り付けることなく、アップロードした画像から直接、画像のプロパティを取得ができれば良いのだが、これはできない相談のようです。

何故か？〔.jpg〕の拡張子が付されていないので、画像が表示されないようです。

では、どうすればよいか？

そこで、手数だけども、もう一手をかけて、次の手順でやってみた。
（い）一旦アップロードした画像を記事に貼り付ける。

（ろ）画像が貼り付いたことを確認したら、右上の「リアルタイムプレビュー」をクリック。

（は）画像が表示されたら、画像を右クリックすると、開いたページの最下部に〔プロパティ〕があるので、これを開く。
すると、〔URL〕を取得ができます。

【プロパティ】
f:id:wnoseiza15:20180326073354j:plain

4⃣完成　
htmlの中で「画像のURL」部分に、対象画像のURLをコピペする。
次に、html（https~.jpg)すべてをコピーして記事にペーストする。

あとは、自由に文章を書いていただければオッケーです。

これで、完成です。

なお、左回りはHTMの記述のなかで、"right"を"left"に代えて、書き替えていただければよろしいでしょう。

このように手間をかけなくても、別の方法でより簡単な作業で設置できる方法をご存じでしたら、是非ご紹介いただきたいと願っています。

なんせ、メモ帳からhtmlの学習をしている初心者なので、初めは、〔<！DOCTYPE html>〕という書き出しが不要なことも知らずに、戸惑っていました。

恥ずかしながら、初心者でも、タイピングとコピペするだけで画像を右回り（左回り）させることが出来ました。

大変勉強になりました。

チョット、記事も雰囲気が変わったでしょう(^_-)-☆

あなたのご感想を楽しみにお待ちしています。

最後に、【画像の回し込み】アイコンの設置に賛同される方は★をポチッとお願いします。

2歩あれば