山と映画を愛する男の『趣味』と『実益』を兼ねたブログです。

そこに山と金があるから

WordPressで画像を横並び、画像の横に文字を配置する方法

更新日:


ブログに画像を挿入して、大きな画像を表示すれば見栄えはいいですが、小さな画像の場合、左右どちらかに寄せると片方にスペースが開いちゃいますよね。これはスペースが勿体ないし、何より見栄えが悪いです。

 

上記に画像の横の空いたスペースに文字を挿入して見栄えを良くしましょう!

スペースも有効活用できて、見栄えも良くなりました!

しかし、これをスマホ表示すると

PCと比べて横に表示できる文字数が少なくなるので、文字がズレて見栄えが悪くなります。
PCだけの表示なら問題はないのですが、スマホからのブログに訪れる方も少なくはありません。
この方たちにも完璧な状態のブログを見ていただきたい。
じゃあどう改善すればいいのか。
私はhtmlが大嫌いです。

これを改善するために、プラグインの『Shortcodes Ultimate』を使います。

プラグイン⇨新規追加⇨Shortcodes Ultimate⇨インストール⇨有効化で準備OKです。

 

実際に使用してみよう!

①記事作成ページの上に『ショートコードを挿入』という項目が追加されます。
これをクリックします。

 

②下記の画面が出てくるので、次は『行』をクリックします。

 

③ショートコードが表示されるので『ショートコードを挿入』をクリックします。

 

④記事にショートコードが追加されました。

このコードの画像部分に直接画像を挿入し、コンテンツの部分に文字を挿入します。

 

⑤下のように表示されれば成功です。

 
お金は幾らあっても足りません。
どうすればお金を稼げるのか?
真面目に働くのか、
宝くじで一獲千金を狙うのか。
決めるのはあなたです!

 

スマホで表示しても、画像の横で文字が回り込まず、画像下に表示されるので、綺麗にまとまっています。

 

行を応用してみよう!

ショートコードを下記のように書き換えると画像と文字のバランスを変更することも可能ですし、画像を横並びにすることも可能です。

 

横並びで画像を4つ表示したい場合は下記のように書き換えます。

 

すると

このように横に4つの画像を並べて表示することが出来ます。超簡単です。

 

行とノートを併用してみよう!

文字を横並び3列にする場合は下記のように記載します。
その3列に背景を付けてみましょう!

ショートコードを挿入⇨ノート⇨ショートコードを挿入でOKです。

色、隅の角度などを、ご自分の気に入るように調整して、
挿入されたノートのショートコードで下記の横並び3列を囲みます。

 

すると

セ・リーグ
①阪神タイガース
②読売ジャイアンツ
③広島カープ
④ヤクルトスワローズ
⑤中日ドラゴンズ
⑥DeNAベイスターズ
パ・リーグ
①日本ハムファイターズ
②楽天イーグルス
③西武ライオンズ
④千葉ロッテマリーンズ
⑤オリックス
⑥ソフトバンクホークス
メジャーリーグ
①シアトルマリナーズ
②テキサスレンジャーズ
③ミネソタツインズ
④ニューヨークヤンキース
⑤ボストンレッドソックス
⑥ロサンゼルスドジャース

となります。

普通はhtmlなどのややこしいコードを入力する必要があり、これが個人的にかなり面倒臭いです。

htmlを入力する手間、難しさを払拭してくれるプラグイン『Shortcodes Ultimate』の機能は最高です。

 

 



-WordPress
-, ,

Copyright© そこに山と金があるから , 2017 All Rights Reserved Powered by AFFINGER4.