そらより

おもしろいと、かわいいと、おいしいと、うれしい。

WordPressで画像に文章を回り込ませる簡単な方法

      2016/08/16

 

WordPressで投稿記事をデザインするとき、画像の配置に悩むことはありませんか。記事スペース左右一杯に配置するほどの画像ではないので、控えめに置くと、妙な空きスペースができてしまう。

たとえばこんな感じです。

mawarikomi00

そんなとき、こうできたらちょっとカッチョよくないですか。

mawarikomi01

 

今回はそれについてチャレンジし、思いのほか簡単にできたので設定方法をシェアします。すでにご存じの方もいらっしゃるかと思いますが、WordPress初心者の方のお役に立てればと思います。使うのはプラグインTinyMCEAdvanceです。

 

スポンサーリンク

 

なお、そらよりブログはSTINGER7です。上位バージョンのSTINGER PLUS+を含め、文字の回り込みを設定するにはstyle.cssにあらかじめ特定のコードを記述しておかなくてはなりません。詳しくはこちらのサイトをご参照ください。

さて、では画像に文章を回り込ませる設定手順です。

1.画像を選択し、回り込みマークをクリック

mawarikomi02

画像を選択すると配置方法を選ぶパネルが表示されます。赤く囲んだ部分は「右寄せ」のマーク。これをクリックしておきます。

 

2.配置したい場所にドラッグ

mawarikomi03

画像を本文に食い込ませたい部分にドラッグします。赤いマルで囲んだ部分をご覧ください。中央にカーソルがあります。本文のこの位置まで画像の左端を持って移動します。これにはちょっとコツがいるんですが、ポイントは

・画像の左右の幅から余白を持たせること
もう一度赤いマルの中央のカーソルをご覧ください。「だ」と「さ」の間にカーソルがあります。そのまま視線を下に移してください。元にあった画像の左端から若干の余白のあることがおわかりいただけるはずです。

・画像でどかされる文字量に注意
画像の左上端が「だ」と「さ」の間にカーソルの位置にくるとしたら、そこから右の文字5行分が画像によって左に回り込むことになります。その分量をイメージしながらカーソルを表示させる位置を決めます。ビジュアルモードは実際に表示される文字の大きさと異なります。そのため文字の配分を最初から厳密に設定するのは困難です。およその目分量で配置し、何度かやり直すことを覚悟してやってみるとよいと思います。

 

3.上下左右の余白を数字で設定する

mawarikomi04

次に画像が選択されたままの状態でTinyMCEAdvanceの①「画像の挿入/編集」ボタンをクリックし設定パネルを表示させます。

②「詳細」タブをクリックし、③スタイルの「上下余白」と「左右余白」に任意のピクセル数を入力します。そらよりはとりあえず上下8px、左右16pxと決めています。

「OK」で確定します。

 

4.テキストモードで微調整

mawarikomi05

前項の設定でお気付きかもしれませんが、じつは左右を16pxと設定したため、画像の右側のマージンも16px分空くことになります。これでは段落の右端と画像の右端に段差ができてしまいデザイン的に美しくありません。

そこでテキストモードに移り、各マージンの数字を変えてあげるのです。

上の画像の青い帯の部分がそのコードに当たります。

最初は先ほど設定した数字 8px 16px 8px 16px となっているはずです。この数字の順番に注意してください。これは「上、右、下、左」の順になっています。つまり右端に画像を配置する際は2番目の数字をゼロにする必要があります。変更後はこうなります。 8px 0px 8px 16px ゼロにした部分にはpxがなくても、残してもかまいません。ただし左右が半角空いていることに注意してください。

なお段落の最上部で画像を右寄せにしたとき、上部に文章が1行入り込んでしまう場合があります。その際は画像を移動するときのカーソルの位置を文章の先頭にくるように配置します。またテキストモードで0px 0px 8px 16pxにし、上部の空きをゼロにしてみてください。

これで、キレイに収まるはずです。

 

5.スマホ画面を要チェック

PCだけでなく、スマホでどう見えるのかチェックしておきましょう。

smapho01

おやおや、ちょっと回り込んだ本文のスペースが狭すぎちゃいましたね。

今回使用した画像は左右が255pxのものです。STINGER PLUS+の記事スペースの左右はマックス640px。スマホできれいに表示させるには画像の左右をもっと縮めるか、スマホでジャストサイズになる数値を割り出す必要があります。

試しに左右350pxの画像を配置してみました。PCではこう見えます。

mawarikomi06

スマホで見ると、こうなりました。

smapho02

うん。キレイに収まりました。そらよりのスマホはHUAWEI Ascend G620Sです。画面サイズ は5インチ。画面解像度は1280x720pxです。各スマホの仕様によって見え方は異なるでしょうが、どれにも合わせることはちょっと無理なので、これでよしとしておきましょう。とりえず今のところは画像の左右サイズ350pxで決め打ちです。

 

ネットを検索するとスタイルシートを変更する方法がありましたが、とりあえずそらよりはこの方法が簡単で好きです。よかったらお試しください。

 

スポンサーリンク

 

スポンサーリンク

 

クリックしていただけると幸いです
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

歳の差婚250 1
「年の差婚(交際)」の最適年齢を割り出す法則が海外にあった!

数年前から「年の差婚」がブームです。人気キャスターや人気女優、人気歌手が、歳の離 ...

補色01 2
赤い点を30秒間じっと見つめてください。天井を見上げると不思議なことが!

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や ...

パーティ開け11 3
「パーティ開け」不要!スナック菓子はもっとスマートにシェアできる!!

ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べると ...

 - WordPress, デジタル , ,

Copy Protected by Chetan's WP-Copyprotect.