テキストや写真を中央や右側に寄せる方法
"道路工事きもまろ"ことワンタンです!w.こんにちワ.(^∇^)
文章や画像って、普通は、下のように、左に寄せて表示されると思います。
---例---
文章、文章、文章、・・・
---------------
文章や画像を真ん中に配置したり、あるいは、右側に寄せたりする方法を御案内してみたいと思います。
文章又は画像の中央寄せ、右寄せ
※アメブロの場合でしたら「ＨＴＭＬ表示」、ワードプレスでしたら「テキスト」にする等、記事編集画面をＨＴＭＬが使える状態にしておいて下さい。
下のようなコードを使います。
*1.中央寄せの場合
<div align="center">テキスト、画像コード</div>
*2.右寄せの場合
<div align="right">テキスト、画像コード</div>
・中央がcenter、右がrightです←そんなの知ってるよヾ(▼ﾍ▼；)
画像の横にテキストを並べるようにして、それをまとめて、中央や右側に寄せたりする方法もあるんですが、それを書くと長くなっちゃいますので、今回は、画像とテキストを、それぞれ別にしたものを「中央寄せ」、「右寄せ」にする方法を御案内します。
1.テキストを中央や、あるいは右に寄せる
a.中央寄せ
<div align="center">文章、文章、文章、・・・</div>
上のように、コードで文章を囲むと、下のように表示されます（↓）。
文章、文章、文章、・・・
b.右寄せ
※中央寄せと同じ要領です。
<div align="right">文章、文章、文章、・・・</div>
↓
文章、文章、文章、・・・
2.画像を中央や、右に寄せる
文章を寄せるのと同じ要領です。文章の代わりに、「画像表示タグ」を上のコードで囲います。
ちなみに上の例に使った画像のタグは、以下のようになってます。
<a href="http://stat.ameba.jp/user_images/20150530/02/wantan-52/bc/fc/j/o0355039213321869300.jpg"><img src="https://farm6.staticflickr.com/5542/18870297351_409064bf48_o.jpg" alt="重盛さと美" width="218" height="242" border="0" /></a>
a.中央寄せ
<div align="center"><a href="http://stat.ameba.jp/user_images/20150530/02/wantan-52/bc/fc/j/o0355039213321869300.jpg"><img src="https://farm6.staticflickr.com/5542/18870297351_409064bf48_o.jpg" alt="重盛さと美" width="218" height="242" border="0" /></a> </div>
↓
b.右寄せ
<div align="right"><a href="http://stat.ameba.jp/user_images/20150530/02/wantan-52/bc/fc/j/o0355039213321869300.jpg"><img src="https://farm6.staticflickr.com/5542/18870297351_409064bf48_o.jpg" alt="重盛さと美" width="218" height="242" border="0" /></a> </div>
↓
**関連**
写真の横に文章を書く方法
○思うこと
記事幅いっぱいに、文章や画像を表示させる場合は、問題ないと思いますが、ちょっとした補足説明や小さめの画像は、中央や右側によせた方が、解り易い時もあるんじゃないでしょうか？
そんな時、この方法を憶えておくと便利だと思います。
記事幅いっぱいに、文章や画像を表示させる場合は、問題ないと思いますが、ちょっとした補足説明や小さめの画像は、中央や右側によせた方が、解り易い時もあるんじゃないでしょうか？
そんな時、この方法を憶えておくと便利だと思います。
☆ブィブィ ('-^*)/
😸😸邪悪な者と戦います！！😸😸
ね！？