今日も元気に、こんにちは★キャロリーナです！ 初心者の私が、やってみて感じたこと、難しかったことを紹介していきます。
今回は、「画像の横に複数行の文章を表示させる」です。 はてなブログを書いていくうちに、画像の横に文字を表示したいと思いました。
初心者では、やり方がわからなかったので調べて簡単だった方法をご紹介します。
画像の貼り付け
まずは通常通りに、ブログの編集画面に画像を貼り付けます。
通常貼り付けるとこのように、画面の真ん中いっぱいに表示されますよね。
画像を貼り付けた後、「HTML編集」でその画像の該当箇所を探しましょう。
| <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/OL_Caroline/20230315/20230315083321.png" width="990" height="1200" loading="lazy" title="" class="hatena-fotolife" itemprop="image" /></p> |
今回画像を張り付けた該当箇所は、上記のように表示されていました。
画像のサイズを変更して横に文字を表示させる
画像の横に文字を表示させるには、以下の文字列を追加するだけです！
align="left" />画像の横に表示させたい文字。<br clear="all" />
青文字は自由です！例はこんな感じです。
| <p><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/O/OL_Caroline/20230315/20230315083321.png" width="225" height="300" loading="lazy" class="hatena-fotolife" itemprop="image" align="left" /></p> <p> キャロリーナです！</p> |
一度プレビューや見たままモードに切り替えた後で、再度HTML編集画面で確認すると、なぜか「<br clear="all" />」が消えているようです。
ただ、問題なくブログへは反映されました。
ちなみに紫は画像のサイズなので、横に入れる文字を考えたら、調整してみてください！
こんな感じになりました！！プロフィール感出ましたね！
ぜひブログをカスタマイズする際の参考にしてみてください。
