画像回り込みを使いこなそう。
前回に画像を使ったリンクの貼り方を説明した際、画像の配置に付いても軽く触れたと思います、今回は、その画像を上手く配置して、ページをレイアウトする方法を説明していきたいと思います。
回り込みを使いこなせば、雑誌のページのようなレイアウトを作る事ができますので、チャレンジしていきましょう。
記事を書き始めた最初の頃は画像を使うにしてもこのようにページの中央に画像を配置する事から始めると思います。
中央に画像を入れると、ページのレイアウトとして扱いやすいのとレイアウトを想像しやすいメリットがありますね。
しかし全てのページが同じように画像は中央となると見ている人も書いている本人も飽きてきてしまいます。
ここで少し画像を貼り付けるタグの話になります、ビジュアルエディタで画像を貼り付けてからエディタをテキストにしてみて下さい。
するとこのようなタグが表示していると思います
<img class=”aligncenter ” src=”https://tomakomaihpdesign.com/wp-content/uploads/2017/02/54.jpg” alt=”クレヨン” width=”400″ height=”auto” />
こんな感じのタグになってますでしょうか、簡単に説明すると、img の所が画像を貼るタグの本体ですclass=の所で画像の配置を指定しています。
src ここで画像のあるアドレスを指定しています、altは画像が表示されない時のためにテキストで画像の説明をする所です、width=”400″ height=”auto”で画像のサイズを指定しています。
ビジュアルエディタ上で画像をクリックすると画像の配置変更が出来ます、この状態で一番左のアイコンを押すと画像は左に行きテキストが画像の右側に回り込みます、この時に画像の大きさ（縦の長さ）とテキスト文字数が合わないと右に回したく無い文字まで右に回り込んでしまう事になります、
下がその例です
これが横に入れたい文字「あああああああああああああああああああああああああああ」
これは画像の下に配置したい文字「いいいいいいいいいいいいいいいいいいいいいいいいいいい」
画像の回り込みを使いはじめた時にはこのような問題にぶつかると思います、そして、だいたいの人はこの時の解決策として思い通りの形になるまでリターンキーを押すようですね、
しかしレイアウトを作るために上記の方法を取るのは愚策です、その行為によって検索サイトから記事への評価が悪くなってしまいます、せっかく書いた記事ですので多くの人読んでもらう為にも評価が落ちない方法でレイアウトをしないといけません、
回り込みが上手くいかない原因
上手く回り込みを使いこなせない原因としては上記で説明したように画像の大きさとテキスト数が合わないのが主な原因になります、解決するとしたら、画像をテキスト数に合わせる方法、テキスト数を画像に合わせる方法、
改行タグを使う方法とあります。
解決するにはタグを使おう
画像のサイズを合わせる方法
上記で画像タグの説明をした時の画像サイズを指定する部分width=”400″ height=”auto”ここを少しいじると画像の大きさを変更出来ます、これなら面倒な画像編集作業を行わずにすみます。
この表記が無いタグの時はコピペで追加して下さい、width=”400″ここでは画像の横サイズの大きさを指定しています、画像が大きすぎる場合はここの数字を小さくします。
height=”auto”ここでは縦のサイズを指定していますが、イジっていないタグだとここにも数字が記載されているはずです、しかしwidth=”400″だけ変更し、heightを変更しない場合、画像の縦横比が変わってしまい画像が横長になってしまいます、そこでheightの部分にautoと入れます、autoを入れると、横の変化に対して自動で縦も変化してくれ縦横比を合わせてくれる便利なものです。
文字で調整する方法、
文字数を調整する、画像に対して文字が少ないのであれば、新たに文字を追加するだけで問題は解決します、逆の場合は文字を減らすだけです。
しかし、文字数を合わせるのは結構大変な作業となります。
文字をいじるのが苦手な方には、文字自体の大きさを変更する方法もあります。
ビジュアルエディタにフォントサイズを変更出来るメニューがあれば文字自体の大きさを変化させる事で画像に合わせる事が出来ます、ビジュアルエディタの機能拡大をしていない方はこちらの記事を参考にして下さい
最後に改行タグを使う方法を記載します、
この方法が一番楽だと思いますよ、
回り込みの文字数が足りない場合はエディタをテキストエディタに変更し、文章の最後にこのタグをコピペするだけで、この問題を解消する事が出来ます。
<br clear=”all”>
このタグを入れるだけで画像右に余計な文字が回り込む事を禁止出来ます、
使いこなせばページレイアウトに種類が増える
この回り込みを使いこなすだけで、ブログ記事のレイアウトの幅が一気に広がるはずです、雑誌のインタビュー記事のようにテキストの中に画像を入れる構成、少しおしゃれなページのように画像を左、画像を右にと交互に画像を配置する構成、それと今まで通りに中央に画像を配置する方法も組み合わせれば、好みのページレイアウトを作れるはずです。
単純な中央配置から脱却して、自分好みのレイアウトを作れればブログがもっと楽しくなるはずです。
※記事中に記載されているタグで「”半角のダブルクォーテーション」が「”全角のダブルクォーテーション」に変わっています「全角のダブルクォーテーション」ではタグが機能しませんので、使用する時は全て「半角のダブルクォーテーション」に変更してからご使用下さい。
Follow me!
