WordPress

ワードプレスなら簡単にできる!画像の横に文字を配置する方法

  • このエントリーをはてなブックマークに追加
Shortcode Ultimate

最近「Shortcodes Ultimate」というプラグインにはまっています。

今日はわたしが特にお気に入りの「行」というショートコードをつかって、画像の横に文字を配置する方法をお伝えします。

画像+文字の2カラムにする

ブログの横幅いっぱいにデカデカと表示させるまでもない写真を、小さく表示したら、右側が空白になるでしょ?

そこに文字を入れれたらな〜って思ってたのです。

Yhoo!などのニュースサイトでよく見かけるこんな感じで↓↓

写真の横に文字を配置

写真の横に文字を配置

 

七星
写真のサイズを小さくして、左寄せで配置してみたらどうやろ?

 

考える女の子画像の横幅を300pxに設定し、左寄せで配置。

すると・・・

やったぁ〜!右側の余白に文字が入りました!!

 

でも、これには落とし穴があったのです。

PCでみたら、こんな感じ↓画像の横にちゃんと文字が配置されているのです。

PCで見た画面

PCで見た画面

が・・・・

スマホで見ると、こんなことになるんです。。。

スマホで見た画面

スマホで見た画面

 

七星
あちゃ〜、こりゃあかんわ。
めっちゃ見にくい・・・

 

てなわけで、この方法は却下となりました。

Shortcodes Ultimateの「行」を使う

ショートコードをつかって簡単に写真の横に文字が配置できると知り、さっそくやってみました。

まずは、記事入力画面の上部にある「ショートコードを挿入」ボタンをクリック。

ショートコードを挿入

出てきたボックスの中の「行」を選択。

「行」を選択

 

「コンテンツ」の【su_colum size=”1/2″】のsizeの数字を変更する。

「行」コンテンツ

記事内の半分を画像にし、もう半分に文字を入れたい場合は、

【su_colum size= “1/2” 】コンテンツ【/su_colum】
【su_colum size= “1/2” 】コンテンツ【/su_colum】

と表記します。

例えば、写真は少し小さめに表示して、文字の量を多く入れたい場合は。

【su_colum size= “1/3” 】コンテンツ【/su_colum】
【su_colum size= “2/3” 】コンテンツ【/su_colum】

や、もっと写真が小さくて良い場合は

【su_colum size= “1/4” 】コンテンツ【/su_colum】
【su_colum size= “3/4” 】コンテンツ【/su_colum】

でもOKです。

そして、【】と【】の間の文字(コンテンツと書いている部分)を写真に置き換えたり、実際表示させたい文字に変更したらOK!

1/2+1/2の場合の表示

考える女の子
ここに文字を入れます。

これは1/2のテストです。

テスト。

1/3+2/3の場合の表示

考える女の子
ここに文字を入れます。

これは1/3+2/3のテストです。写真が小さくなった分、横に文字が多く配置できます。

1/4+3/4の場合の表示

考える女の子
ここに文字を入れます。
これは1/4+3/4のテストです。写真がさらに小さいので、文字が横に長く表示されます。

スマホで見てみると・・・

1/2+1/2

1/2+1/2

1/3+2/3

1/3+2/3

1/4+3/4

1/4+3/4

 

全部同じように表示されていました。
でも、写真の横に文字が回り込んだりしてなくて、とても見やすくなっています。

「行」の応用

「行」のショートコード、かなり使えます。

「行」にプラスして「ノート」をつかって、背景に色をつけてみたり・・・

「行」+「ノート」

「行」+「ノート」

 

3分割にすることも可能。

メルマガ登録画面

メール講座登録画面

1/3+1/3+1/3 で作成しました。これも背景はノートで色をつけています。

※ノートの使い方は↓↓を参照ください。

メルマガ登録用の1カラムのページもこんな感じで。3/4+1/4で作ってます。

3/4+1/4

3/4+1/4

 

とにかくめっちゃ簡単にできちゃうので、お気に入りです♪

ぜひ活用してみてくださいね^^

Shortcode Ultimateのインストール方法

プラグインの「新規追加」の画面で「Shortcodes Ultimate」と検索すると出てきます。

Shortcodes Ultimateプラグインインストール

それをインストールし、有効化するだけ!

いろいろと設定するところがありますが、何も触らず、すべてデフォルトでOK!

とっても簡単です♪

同じテーマでこんな記事も書いています

The following two tabs change content below.
七星 奈津子

七星 奈津子

ブログ集客の専門家eSQUARED株式会社
ブログ集客プロデューサー/ライター/コラムニスト。 読者(消費者)との関係をつくり、集客や販売につなげる発信で5年10年後もお客様に愛される会社・お店づくりのためのメディアづくりをサポートしている。 これまで発信してきたもの、持っているコンテンツをわかりやすく見やすい形に編集してコーディネイトすることを得意とする。またコミュニケーションの中で、その人の中にある光るもの・強みを引き出すことも得意。 講座や個別サポートでは、その人ならではの魅力を引き出し、わかりやすく伝わりやすい言葉にして発信するお手伝いをしている。
7つ星ブログ講座

この記事へのコメントはこちら

Loading Facebook Comments ...

コメントを残す

*

CAPTCHA