ぴっぴ（@hiyoko_no_pippi）です！
その気持ち、分かります！ だってこの２カ月間、ぴっぴも画像の横に文字をグルグル回り込みさせたかったんですもの！
そして、この２カ月間お勉強して練習したおかげで昨日やっとできるようになりました！
じゃじゃーん。
ね、ちゃんと画像の横に文字がグルグル回り込んでいるでしょ？ なかなかできなくて文字でなくて頭がグルグルしましたけど、なんとかできるようになりました💦
（スマホの場合、画像の大きさの都合で文字は回り込みません）
ということで今回の「ぴっぴのブログでアフィリエイト」は、HTML で画像の横にグルグル文字文字を回り込みさせる方法を紹介します。
画像の横に文字を回り込みさせれるようになると、次のようなメリットがありますよ。
- ブログ記事を雑誌みたいなレイアウトにできる
- 料理レシピを見やすくできる
- 記事の表示が速くなる
( ﾟдﾟ)ﾊｯ!
もちろん、はてな記法とmarkdownでもできるので、それらで編集されている方もぜひ挑戦してみてください！
そして「私には難しいかも……」という方もいらっしゃると思いますが、安心してください。今回もコードをコピーして記事に貼り付けるだけで簡単にできるようにしました。なので諦めないで挑戦してみてくださいね。
それでは早速始めましょう１ レッツぐるぐる～♪
- HTMLで画像の横に文字をグルグル回り込みさせる方法
- はてな記法とmarkdownで画像の横に文字をグルグル回り込みさせる方法
- 画像の横に文字をグルグル回り込みさせる方法の注意点
- まとめ｜画像の横に文字をグルグル回り込みさせてブログ記事をオシャレにしましょう！
HTMLで画像の横に文字をグルグル回り込みさせる方法
はい、HTMLで画像の横に文字をグルグル回り込みさせる手順は次のとおりです。
- 画像を貼り付ける
- 画像のサイズを小さくする
- 画像の位置を左右に固定する
- 画像のコードのすぐ後ろに文字を入力する
- 画像と文字の間に空白を入れる
- 回り込みを止めたいところにぐるぐる中止コードを入力
なお今回の記事は、画像の貼り付けや画像のサイズ変更、画像位置の固定ができる前提でお話しています。もしもそれらができない場合は次の記事を読んで操作を身に付けて頂いてから、文字のぐるぐるに挑戦してくださいね。
1.画像を貼り付ける
はい、画像を貼り付けます。ペタッ！
さっきお話しましたが、今回の記事は画像の貼り付けができる前提でお話しています。なので、もしも画像の貼り付けができない場合は「はてなブログの記事に画像を貼り付ける方法と削除の仕方」をお読みくださいね。お願いします！
2.画像のサイズを小さくする
はい、画像のサイズを小さくします。むぎゅー！
はい、またまた告知です。さっきもお話しましたが、今回の記事は画像サイズを小さくできる前提でお話しています。
なので、もしも画像のサイズを小さくできない場合は「はてなブログの画像サイズの変更｜記事に貼り付けた写真の拡大縮小が自由自在に！」をお読みくださいね。お願いします！
ちなみに今回画像の幅は414にしました。
3.画像の位置を左右に固定する
はい、画像の位置を左右に固定します。右に寄ってください、エイ！
ただし注意点が２つあります。
１つめは、はてなブログのHTML編集で文字をグルグル回り込みさせる場合、「<div style="text-align: 画像位置;"><画像のURL></div>」を使わないでください。
こちらのコードで何度もぐるぐるに挑戦しましたが、上手にできませんでした。
文字をグルグル回り込みしたい場合は、画像のコードのお尻に「align="画像位置"」を入力してください。
はい、しつこいかもですけど告知です。今回の記事は画像位置の固定ができる前提でお話しています。
なので、もしも画像位置の固定ができない場合は「HTMLで画像の位置を中央や左右に固定する方法｜はてな記法とmarkdownのやり方も紹介」をお読みくださいね。お願いします！
２つめは、小さくした画像の右側に文字を回り込みさせる場合も、必ず位置固定をしてください、画像の位置固定は文字を回り込みさせる前提条件なので。画像の右側に文字を回り込みさせる場合も、必ず画像位置を固定しましょう。
4.画像のコードのすぐ後ろに文字を書く
はい、画像位置を固定できたら文字を書きます。文字を書く位置は次のとおりです。
<p><img src="画像のURL" alt="指定したalt属性" title="f:指定した画像のタイトル:plain" class="hatena-fotolife" itemprop="image" width="画像の幅" align="right" />あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをんあいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん</p>
これで画像の横に文字がグルグル回り込みます。上の画像はコードを入力して文字がグルグル回り込んだ様子を見たまま編集で確認したものです。
5.画像と文字の間に空白を入れる
はい、画像と文字の間に空白を入れます。今のままでは画像に文字の頭がピッタリ引っ付いて見栄えが良くありません。
なので画像のコードのお尻に「半角スペースhspace="数字"半角スペース」と入力します。今回、スマホで見たときの見栄えを考えて空白は５にしました。
ちなみに上の画像は画像と文字の間に空白を入れたものです。プレビューでなく見たまま編集ですが、空白がさっきよりも広くなっていることが分かりますね。
6.回り込みを止めたいところにぐるぐる中止コードを入力
はい、最後に回り込みを止めたいところにぐるぐる中止コードを入力します。このぐるぐる中止コードは、ぴっぴがそう読んでいるだけで正式名称ではありません。ぐるぐる中止コードは次のとおりです。
<p><br clear="”all”" />文章</p>
文章のところに文字の回り込み直後に始まる文章を書いてください。
上の画像はグルグル回り込んだ様子をプレビューで確認したものです。きれいにグルグル回り込むのに文字数が足りなかったので10文字増やしました。
はてな記法とmarkdownで画像の横に文字をグルグル回り込みさせる方法
はい、はてな記法とmarkdownで画像の横に文字をグルグル回り込みさせる方法は次のとおりです。
( ﾟдﾟ)ﾊｯ!
はてな記法とmarkdownは同じコードで文字をグルグル回り込みさせることができます。しかもHTMLと違い、画像と文字の間に自動的に空白が入ります。わざわざ空白を入れなくていいので、はてな記法とmarkdownは便利ですね？
- 画像を貼り付ける
- 画像のサイズを小さくする
- 画像の位置を左右に固定する
- 画像のコードのすぐ後ろに文字を入力する
- 回り込みを止めたいところにぐるぐる中止コードを入力
1.画像を貼り付ける
はい、画像を貼り付けます。ペタペタ！
さっきお話しましたが、今回の記事は画像の貼り付けができる前提でお話しています。なので、もしも画像の貼り付けができない場合は「はてなブログの記事に画像を貼り付ける方法と削除の仕方」をお読みくださいね。お願いします！
2.画像のサイズを小さくする
はい、画像のサイズを小さくします。むぎゅー！
はい、またまた告知です。さっきもお話しましたが、今回の記事は画像サイズを小さくできる前提でお話しています。
なので、もしも画像のサイズを小さくできない場合は「はてなブログの画像サイズの変更｜記事に貼り付けた写真の拡大縮小が自由自在に！」をお読みくださいね。お願いします！
ちなみに今回画像の幅は333にしました。
3.画像の位置を左右に固定する
はい、画像の位置を左右に固定します。左にいてください、エイ！
ただし注意点が１つあります。
小さくした画像の右側に文字を回り込みさせる場合も、必ず位置固定をしてください、画像の位置固定は文字を回り込みさせる前提条件なので。画像の右側に文字を回り込みさせる場合も、必ず画像位置を固定しましょう。
はい、しつこいかもですけど告知です。今回の記事は画像位置の固定ができる前提でお話しています。
なので、もしも画像位置の固定ができない場合は「HTMLで画像の位置を中央や左右に固定する方法｜はてな記法とmarkdownのやり方も紹介」をお読みくださいね。お願いします！
4.画像のコードのすぐ後ろに文字を入力する
はい、画像位置を固定できたら文字を書きます。文字を書く位置は次のとおりです。
[f:id:画像ファイル:wサイズ:hサイズ:位置]あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
これで画像の横に文字がグルグル回り込みます。
5.回り込みを止めたいところにぐるぐる中止コードを入力
はい、最後に回り込みを止めたいところにぐるぐる中止コードを入力します。このぐるぐる中止コードは、ぴっぴがそう読んでいるだけで正式名称ではありません。ぐるぐる中止コードは次のとおりです。
<br clear="all">
</br>
これで文字のぐるぐるを中止することができます。ちなみに中止直後の分は</br>のすぐ後ろに書けばＯＫです！具体例は次のとおりです。
[f:id:画像ファイル:hサイズ:位置]あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん<br clear="all"></br>がぎぐげご
画像の横に文字をグルグル回り込みさせる方法の注意点
はい、画像の横に文字をグルグル回り込みさせる方法には注意点があります。
- 画像幅をスマホのサイズよりも小さくしない
- HTML編集の場合、回り込みさせる文字数を少なくしない
画像幅をスマホのサイズよりも小さくしない
はい、文字をグルグル回り込みさせるときは、画像の幅をスマホのディスプレイ幅よりも小さくしないようにしましょう。
画像の幅をスマホのディスプレイよりも小さくすると、わずかな文字が画像の横に回り込んで読みにくい記事になります💦
なので文字をグルグル回り込みさせるとき、画像の幅に気を付けてくださいね。たぶん、414がいいと思います。*1
HTML編集の場合、回り込みさせる文字数を少なくしない
はい、HTML編集の場合、回り込みさせる文字数を少なくしないようにしましょう。
なぜなら回り込む文字数が少なすぎると、ぐるぐる中止コード直後の文字も画像の横に回り込むからです。
また、ぐるぐる中止コード直後の文字が回り込むからと言って開業すると、スマホで表示したとき、たくさん改行してすっごく読みにくい記事になります。
使われているテーマの記事部分の幅によりますが、少なくとも１２０文字は必要だと思います。ぴっぴが使っているテーマで実験したところ、きれいに回り込むのに１２０文字必要でした。
なので、HTML編集で画像の横に文字をグルグル回り込みさせるとき、文字の回り込みがきちんと中止できるように調整してください💦
なお、はてな記法とmarkdownは調整しなくても回り込みを中止できることを確認しました。なので、こちら２つのユーザーの方はご安心ください。
まとめ｜画像の横に文字をグルグル回り込みさせてブログ記事をオシャレにしましょう！
はい、はてなブログも３つの編集方法で画像の横に文字をグルグル回り込みさせることができます。
- HTML編集
- はてな記法
- markdown
HTML編集の場合チョッピリ問題がありますが、画像の横に文字をグルグル回り込みさせられると、雑誌みたいなオシャレな記事にできますので挑戦してみてくださいね。
以上ぴっぴでした！ ありがとうございます！
はい、ぴっぴからお知らせです💦
ぴっぴのはてなブログでアフィリエイトでは、今回みたいにはてなブログの使い方についてお話しています。
その中にはＳＥＯ対策に関係のある記事もありますので、この機会にぜひお読み頂けると嬉しいです。
*1:一番幅のあるXS Max・11 Pro Maxの短辺が414。
