サイト作成

無料・高性能・商業利用OKなWordPressテーマを使ったホームページ制作 -「お客様の声」-

僕が実際にLigntningテーマで作成したサイトの「お客様の声ページ」を基にどのように作成したかを解説してきます。

テーマはLightningで解説していますがどのテーマでも同じように再現可能です。

下の完成予定図はサンプルサイトで構築したお客様の声のページになります。とても長いので「⇒」マークをクリックして確認してください。

完成予定図はこちら

⇒ クリックして確認する

使用したプラグイン

Word Balloon

プラグインのインストールがまだの方

 

お客様の声の作成内容

A様邸

画像を挿入

まずは写真を挿入するため「メディアを追加」をクリックします。

 

画面が切り替わったらメディアライブラリのタブを開きます。

僕の場合は既に使用した写真が表示されていますが、まだの方は用意した写真をドラッグアンドドロップでこの画面上に移動させてください。

使用したい写真を選択したら「固定ページに挿入」をクリックします。

 

挿入しても画像は小さく、場所も左寄せのままのなので編集をします。

画像の上にマウスカーソルを移動させ1クリックすると「編集」が表示されるのでそちらをクリックします。

 

編集画面に切り替わったら、配置、サイズをお好みに調整して右下の「更新」をクリックします。

僕は配置は「中央」、サイズは「大サイズ」で選択しました。

 

これで無事に画像が挿入されました。

 

吹き出しを挿入

次は吹き出しを挿入していきます。

アスグッド
※挿入の前にプラグイン「Word Balloon」がインストールされ有効化し、初期設定まで済ませておく必要があります。 まだお済でない方はこちらの記事(【プラグイン】超高性能な吹き出しが「Word Balloon」で簡単につくれた)を参考に先に済ませてきてください。

 

挿入したい場所にカーソルを合わせて、ビジュアルエディタに「Word Balloon(ふきだし)」が表示されているのでそちらをクリックします。

僕の場合は写真の下に表示させたいのでそちらを指定しています。

 

吹き出しの挿入が表示されたら、吹き出しの中に表示させたい文章を入力し、表示する人、表示する位置、吹き出しの形をそれぞれ指定します。指定し終えたら「挿入」をクリックして挿入します。

僕の場合は、A様邸の吹き出しなので「Aさん」「左側表示」「セリフ吹き出し」に指定しました。この指定がデフォルトとなります。

 

無事写真の下に吹き出しも挿入されました。

 

下の画像は編集画面と実際に表示されている画面の比較になります。

文字だけでお客様の言葉を表示するのもいいのですがどうしても味気ないというか、とても寂しい感じがして何となく雰囲気が伝わってこない気がします。

特にお客様商売の場合、購入者の意見やクチコミは購買意欲に繋がりますし、安心・安全を訴えるのにとても大切だと思います。

そのため写真の下に購入者が実際に語ったような演出(吹き出し)にしました。本当にの些細な事ですが文字だけの時よりも印象が良くなったと思います。

 

アスグッド
あとはお好みで写真の位置や吹き出しの形を変えてみるだけでも見た目がだいぶ変わります。
位置や形だけでなくもっと細かな設定が1クリックで出来るので非常に便利なプラグインです。
ご自身のサイトの色に合わせた演出や、男性・女性で違った演出の使い分けなどをすれば印象もガラッと変わってくると思います。

 

B様邸

B様邸も同様に家の写真を挿入後、プラグイン「Word Balloon」を使って吹き出しを挿入しています。

 

C様邸

C様邸も同様に家の写真を挿入後、プラグイン「Word Balloon」を使って吹き出しを挿入しています。

  • この記事を書いた人
アバター画像

アスグッド

鍼灸師として鍼灸整体院を経営してます。

『明日がもっと良くなればいいなぁ』との願いから名前を付けました。

プロフィール詳細は→こちら

-サイト作成
-, , , ,

© 2024 千里の道も一歩から