THE THOR(ザ・トール)で画像にテキストを回り込ませるには?

本ブログではプラグインほぼ不要で多彩な機能が売りのWordPressテーマであるTHE THOR(ザ・トール)を利用していますが、どんなに高機能であっても思ったようにいかないことはあるものです。

今回は画像関連で四苦八苦したうえでようやく自分なりの答えを導き出すことが出来た事象について備忘録としてまとめておきたいと思います。

画像にテキストを回り込ませたい!

ブログを作成するうえで何かしら画像を挿入する機会というのは結構ありますよね。

例えば・・・

こんな感じで記事の最中に画像を挟む場合ですが、配置はなし、フルサイズでメディアを追加すると左右いっぱいに画像が表示されテキストは下に表示されます。

これを・・・

こんな感じで配置は左、サイズは中を選んだ場合ですが・・・。

テキストは画像の右側を回り込むように表示されます。

がしかし・・・

スマホから見た場合はこんな感じ。

見た目が格好悪いですし、なにより読みずらいですね。

エディタ上では段落を設けたいところで「Shift + Enter」で改行してうまく文字の回り込みが出来ているように見えるのですが・・・

プレビュー画面を見るとやっぱり余白が出来てしまっています。

PC表示では左側に配置している画像の右側にテキストを回り込ませ、スマホ表示の場合は画像の下にテキストを表示できるようになればベストなのですが、どうすれば良いものか・・・。

THE THOR(ザ・トール)のカラム機能を使おう!

はい、これが答えです。

THE THOR(ザ・トール)のエディタ画面上には「カラム」という機能が搭載されています。

本来の機能としては画像を横並びにする場合などに使うようです。

例えばこんな感じですね。

姉・あおちゃん
妹・みどりちゃん

2カラムの場合は左右の比率を1:1、3:7、7:3のいずれかを選び、なおかつPCのみでの表示、あるいはPC・スマホ両方での表示かのいずれかを選択することが出来ます。

PCの場合には最大で4カラムまで選択することが出来ますが、その場合スマホでの表示は縦4カラムとなるようです。

というわけでさっそく先ほどの画像を2カラム、1:1、PCのみの表示で設定してみたいと思います。

左側のカラムには画像を配置、右側のカラムにはテキストを記入すると・・・

こんな感じで配置は左、サイズは中を選んだ場合ですが・・・。

テキストは画像の右側を回り込むように表示されます。

完璧ですね!

はい、見事に画像の回り込みに成功しています!

スマホでは上に画像、下にテキストが配置されていますのでスマホからこの記事を見ている方は「?」となっているかもですが、もしよろしければPCからもご確認いただければ言っている意味が分かると思います。

あとがき

現在ではインターネットを利用する媒体はスマホが9割を占めているとのことですので、スマホの表示さえしっかりしていれば問題ないようにも思えるのですが、実際の編集作業はPC上で行うため、PCでの見た目もやっぱり気になってしまいますよね。

THE THOR(ザ・トール)では今回ご紹介した機能のようにスマホ、PCどちらから見ても見映えが良くなるような配慮がしっかりされているので嬉しいですね。

やっぱりTHE THOR(ザ・トール)はおすすめできるWordPressテーマですよ!