画像横並びする方法

ワードプレスで複数の画像を横並びにする方法~アフィンガー

ワードプレスの投稿記事内に写真やイラスト、テキストなどを2列、3列に横並びさせる方法と、こうした機能が実装されているおすすめテーマを紹介します。
ワードプレスは、日記ブログを書いたり、アフィリエイトサイトを作ったり、会社のホームページなどを作るのにとっても便利です。
一度使うとワードプレスの利便性、完成度を実感すると、今度は自分なりに撮影した画像を入れたり、テキストを装飾したり、表組をしたりと色々と応用範囲が広がります。

しかし、知識や技術が浅いと困るのが、次の応用ステップですね。つまり、僕みたいにCSSや、HTMLが苦手な人が困るのは、画像を二列にしたり三列にしたりと横並びさせることに苦労します。

そこで、複数の画像を横並びさせる方法をググって見れば、HTMLでこうする、あ~すると言う指南書サイトがいっぱいでてきて、今度はどのサイトを見ればいいのか悩むところ。

パグ蔵
パグ蔵
指南書サイトがいっぱいあって、どれを見ればいいんじゃ?

結局は、よくわからずに有耶無耶にして、あれこれするとサイトのデザインが崩れて、よりひどい状態になることも、僕は経験しました。

このページを書いた理由

画像を並べる
複数の画像(上図参照)を横並びにするにはスタイルシートとHTMLの知識がないと普通できません。
僕もやっとこ知識を学んで理解できるようになりましたが、サイトの構成によって画像配置に神経を使います。
つまりユーザーが見やすい画像配置にこだわる、結果、稼げることになるから。
それで、特によく使うのが、2枚や3枚の複数の画像を横一線に並べる方法。

この作業は簡単なようで複雑です。
スタイルシートをあれこれ調整したり、面倒くさいからテーブルソースにぶち込んふだりしてお茶を濁すということはシバシバ(汗)

ゴンチャン多分、僕と同じ悩みを持っている人もいると思うので、解決方法を共有したいと思います。
管理人
管理人

画像を横並びさせる2つの方法

あらかじめ横並びボタンが用意されたテンプレートを選ぶ

最近はワードプレステーマに予めクイックタグ内に「横並びする」ボタンがついています。例えば、僕がアフィリエイトサイトを作る時にサイトテーマに合わせて、市販されているワードプレステーマ(テンプレート)を購入していますが、その中のひとつで、デザイン性が優れていて、完成度も抜群にキレイになるTCDテーマがあります。
このTCDテーマの投稿記事内本文書き出し部分の上に「レイアウト2C」「レイアウト3C」というクイックタグボタンがあります(下図参照)。

画像横並び

これはとっても便利で、自分が書いている記事に入れたい画像を2個または3個並べるレイアウトボタンを選んで、そこへ「メディアを追加」して、画像を貼り付ければ、あっという間に画像が横並びできます。
こうしたクイックタグが付いているWPテーマを選べばサイト作りで立ち止まることもありませんね。

あるいは、今あなたがご覧になっている僕のサイトですが、こちらは「アフィンガー」という人気のテーマを使っています。
アフィンガーには今から解説する「無料プラグインの機能」がすべて導入済みなので、簡単に画像を横に並べたり、テキストに背景色を付けたり、表組み、会話風の吹き出しなどなど、サイト作成に便利な機能はすべて付いています。このテーマのお値段は14,800円(税込)ですが、一度買っておけば、複数のサイトを作るときにも大変便利です。

[st-mybutton url=”https://www.infotop.jp/click.php?aid=61947&iid=75194″ title=”アフィンガーの便利な機能を見る” rel=”” fontawesome=”” target=”_blank” color=”#fff” bgcolor=”#e53935″ bgcolor_top=”#f44336″ bordercolor=”#e57373″ borderwidth=”1″ borderradius=”5″ fontsize=”” fontweight=”bold” width=”” fontawesome_after=”fa-angle-right” shadow=”#c62828″ ref=”on”]

プラグインを使って画像を横並びさせる方法

有料テーマを買わずになんとか自分なりに勉強して、画像を横並びさせたり、テキストを装飾したりしたいと言う人には「Shortcodes by Angie Makes」プラグインを利用する方法があります。
こちらはワードプレスを機能を拡張させるために作られた無料ツールです。こうしたツールは用途や目的に応じて開発されていますが、今から紹介するプラグイン「Shortcodes by Angie Makes」は、画像を横並びさせたり、購入ボタンを挿入したり、アンケートを作ったり、絵文字やタブ記事などなど、自分のサイトの目的にあったカスタマイズができる便利なプラグインです。

有料テーマを買わないで、自分でなんとかやりたいという人にはおすすめです!
管理人
管理人

この「Shortcodes by Angie Makes」プラグインを使えば、記事内に自分が置きたい場所に画像を表示させることができます。
では、さっそく手順を紹介しますね。

Shortcodes by Angie Makesインストールから設定方法

まず、ご自分のワードプレス管理画面にある「プラグイン」→「新規追加」すれば下図のように「プラグイン追加」の画面が表示されます。
下図のように「Shortcodes by Angie Makes(←このままコピペでよい)」を①プラグイン検索へコピーペーストする。
そうすれば②「Shortcodes by Angie Makes」のインストール画面が表示されるので、インストールをして有効化すればOK.
画像横並べるプラグインインストール

Shortcodes by Angie Makesの使い方(一例)

インストール~有効化ができたところで、いよいよ画像を並べる作業開始してみましょう。
テスト記事投稿画面(ビジュアル画面を選択)を開いて、まず手慣らしに並べたいあなたが保存している画像を2枚選んでください。

ここでは、2枚の画像を横並びにするので(1/2+1/2)を選択します(下図参照)

下図のように「Sample Content部分」を削除して、1枚目、2枚目の画像を追加する。

※ご自分の画像を選択するには下図参照

画像を選択したら「更新→変更プレビュー」確認する

図のように設置したら、記事更新ボタンをクリックして出来上がり具合を確認しましょう。

尚、画像の下に簡単な説明文(テキスト)も追加することも可能です。

ここでは、2枚画像を並べるために(1/2+1/2)を選択しましたたが、3枚画像を並べる場合は(1/3+1/3+1/3)を選択(下図参照)します。

Shortcodes by Angie Makesはこんな機能もあります

サイト内の滞在率を高くするタブ

ユーザーがあなたのサイトに訪問してきたら、サイト内をゆっくり見てもらえる工夫をすればグーグルの評価も高くなります。
それは、下図のように1つの記事の中で情報を2個や3個のタブを作って、情報を書くことができます。
こんなタブ記事もできる(画像挿入OK)
デフォルトはタブが2つだけど、タブを増やすこともできるよ。
[wc_tabgroup layout=”box”]

[wc_tab title=”男性用”]

男性の身だしなみにかかせない香水選びのポイントを紹介。
モナコ観光ガイド
[/wc_tab]

[wc_tab title=”女性用”]

女性のさりげないおしゃれに香水はかかせない。

[/wc_tab]

[wc_tab title=”子ども用”]

最近は子供用お香水も発売されキュートな香りが人気だ。
子供用香水
[/wc_tab]

[/wc_tabgroup]

吹き出しも簡単にできます

記事内のテキストにアクセントを付けて、ビジュアル効果を高める「吹き出し」も簡単に!
体験談や口コミ、自己紹介などに便利。コンテンツの見栄えもよくなる。(下図)

[wc_testimonial by=”桜子さん” url=”” position=”left”]1週間で化粧ノリがよくなった![/wc_testimonial]

アフィリエイトサイトや通販サイトに便利な価格表の表示もできる

「Elments」→「Pricing Tavle」を選択する

デフォルトのサンプルテキストは英字なっているが、日本語に修正すればよい。

フォントアイコンが作れる

記事の内容によっては、注意や参考といったワンポイントで紹介したい場合は、その記事内容にあったアイコンを付けることで読者に訴求できる。
色々なアイコンも挿入できます(下図参照)

テキストに背景色を付ける

テキストに背景色を簡単に付けることができます(下図参照)

テキストの内容によって特にアピールしたい箇所に黄色、赤、青、緑、グレーなどの背景色をワンクリックで表示できます。
[wc_highlight color=”yellow” class=”テキストを黄色で囲んだ”]Sample Content[/wc_highlight]

[wc_highlight color=”red” class=”テキストを赤で囲んだ”]Sample Content[/wc_highlight]

[wc_highlight color=”blue” class=”テキストをブルーで囲んだ”]Sample Content[/wc_highlight]

[wc_highlight color=”green” class=”テキストをグリーンで囲んだ”]Sample Content[/wc_highlight]

ボタンも簡単に設置できます


ユーザーを広告主の公式サイトへ誘導したり、読んで欲しい記事へ誘導するなどのアクションボタンも簡単に設置できます。

[wc_button type=”primary” url=”http://webplantmedia.com” title=”Visit Site” target=”self” position=”float”]簡単に設置できる[/wc_button]

[wc_button type=”danger” url=”#” title=”Visit Site” target=”” url_rel=”” icon_left=”” icon_right=”” position=”” class=””]公式サイトで購入[/wc_button]

[wc_button type=”warning” url=”#” title=”シニアの情報サイト” target=”” url_rel=”” icon_left=”” icon_right=”” position=”” class=””]健康について読む[/wc_button]

[wc_button type=”secondary” url=”#” title=”Visit Site” target=”” url_rel=”” icon_left=”” icon_right=”” position=”” class=””]財産を増やすコツ[/wc_button]

[wc_button type=”success” url=”#” title=”Visit Site” target=”” url_rel=”” icon_left=”” icon_right=”” position=”” class=””]再就職するには[/wc_button]

などなど多機能な作業ができる便利なツールですが、中には「これっているか~?」というような機能もあるので、自分のサイトに合わせてつかってください。

まとめ

このページでは、画像を並列にする方法を解説してきました。
「Shortcodes by Angie Makes」のツール表記はすべて英字になっているので、慣れるしか方法ありません。
また、お使いのテンプレートなどによっては、PCでは正常に配置されているけど、スマホで見たら、改行されたり、デザインが崩れたということもありますので、注意してください。
こうした画像配置やアイコン、キャッチなどの読者の目をひきつけたり、広告主サイトへの誘導、購入ボタンなど、「Shortcodes by Angie Makes」の機能をワンクリックで表示できるテンプレートが市販されているので、そちらを購入してサイトを作成したほうが、イチから覚える手間暇も省けて、サイト作成に集中できます。

今現在、ご覧になっている当サイトは「アフィンガー」という人気のテーマ(テンプレート)を使用しています。[st-kaiwa4]※ご覧になっている、女性の会話や、赤マーカーや黄色いマーカーなどの装飾もワンクリックででっきます[/st-kaiwa4]

アフィンガーには、ここまで説明したプラグインの装飾機能は、最初から導入されており、ワードプレス初心者には、おすすめのテーマです。
[st-mybutton url=”https://www.infotop.jp/click.php?aid=61947&iid=75194″ title=”アフィンガー詳細・購入はこちら” rel=”” fontawesome=”” target=”_blank” color=”#fff” bgcolor=”#e53935″ bgcolor_top=”#f44336″ bordercolor=”#e57373″ borderwidth=”1″ borderradius=”5″ fontsize=”” fontweight=”bold” width=”” fontawesome_after=”fa-angle-right” shadow=”#c62828″ ref=”on”]

装飾タグ機能が充実しているおすすめテーマ

無駄な時間を使わずにサクサクとカッコいいサイトが作れるおすすめテーマ

上記のような装飾機能が付属しているおすすめテーマをご紹介します。

  • アフィンガー・・・初心者向けとして、サイトデザインも簡単にできます(当サイトのテンプレート)
  • 2万人を超えるユーザーが選んだSEOテンプレート【賢威】賢威・・・SEOにも強く、サイト作りのサポートも充実している(僕は情報量の多いサイトにも使っているテンプレート)
  • JIN・・・初級者、中級者におすすめのテンプレート
  • クールでかっこいいWPテーマ・・・初級者、中級者向け1万円未満のテーマ(僕のエキスを注入した稼ぎに特化したテンプレート)
  • TCDテーマ・・・情報量の多い個人の趣味ブログ、中小法人企業の公式サイトにおすすめ(僕の会社の公式サイトに使っています)

[st-card myclass=”おすすめ” id=”8541″ label=”おすすめ” pc_height=”” name=”” bgcolor=”” color=”” fontawesome=”” readmore=”on”]

  • コメント ( 0 )

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。