[#IMAGE|e0362825_09165686.jpg|201612/11/25/|mid|500|375#]

2歩あれば

日々選択の連続であっても、迷っていても始まらない。〔二歩〕あればと、たら・れば抜きでブログを綴っていきたい。

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

こんにちは。

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



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

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


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

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


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


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


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

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



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

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









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

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

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

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

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

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

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

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


以下は、画像【縁台将棋】のURL。
https://cdn-ak.f.st-hatena.com/images/fotolife/w/wnoseiza15/20180326/20180326065319.jpg




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

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

これで、完成です。

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


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

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


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

大変勉強になりました。

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

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


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

★お越しくださり有難うございました。 またのお越しをお待ちしています。 ではまた、ごきげんよう(^^)v