WordPressのサイトやブログには、簡単に画像を挿入できます。
>> WordPressの画像挿入方法
挿入自体は簡単ですが、目的に合わせて少し工夫するだけでリッチな印象を与えたり、内容がより伝わりやすくなります。そこで今回は、ひと工夫で印象が変わる画像の見せ方を5つご紹介いたします。
WordPressサイトの画像の見せ方6選
画像の見せ方ひとつでコンテンツはぐっとわかりやすくなります。印象や見る側の理解度も変わってきますので、それぞれ見ていきましょう。
枠と影をつける
WordPressでは、単に画像を挿入するだけだと次のように表示されます。例えば、次のような画像だと、画像の白い部分と白い背景が同化してしまうんですよね。
これでは見にくいですし、不恰好なので画像に枠線と影をつけます。
するとこのように境界線が明確でメリハリがつくわけです。
でも画像一枚一枚を加工したり、CSSを使って再現するのは少し面倒ですよね。TCDテーマをお使いの方は、「frame」というクラスをimgタグに指定してみてください。
<img src=”sample.jpg” class=”frame” />
これだけで上記のような枠線と影が反映されます。TCDテーマには、他にもこういった汎用クラスを多数ご用意しています。よろしければ、こちらの記事もご覧ください。
TCDテーマには、調整用のCSS（汎用クラス）が内蔵されています。 あらかじめスタイルが指定されているため、そのクラスを指定するだけで微調整や装飾が可能です。 「ちょっとここを調整したいな」という時に、CSSのクラスを新設してスタイルシート（カスタムCSS、追加CSS）に追記という作業は...
| 画像に枠線と影をつける | |
| メリット | 画像と本文エリアにメリハリがつく |
| デメリット | 特に無しだが、中には不要な画像もある（ロゴ画像など） |
| 利用シーン | 記事内に挿入する画像のほぼすべてに使える |
キャプション
画像の下に表示するキャプションは、WordPressの標準機能に備わっています。
WordPressテーマ「PORTAL」のトップページ
メディアライブラリで画像を選択して編集可能なこの「添付ファイルの詳細」で設定可能です。
ここで「キャプション」という項目にテキストを入力すると画像の説明を記載することができます。
単に画像を添付するだけでなく、少し補足説明を入れてあげるとわかりやすくなることもありますよね。
また、添付ファイルの詳細にはSEOの観点から入力しておいた方がいい項目もあります。詳しくはこちらの記事を参考にご覧ください。
WordPressで添付ファイル（画像など）を挿入する際は、メディアライブラリを使います。一般的に下記画面から画像を選択して記事やページに挿入されていると思います。 当記事では、上記赤枠箇所の添付ファイルの詳細（代替テキスト・タイトル・キャプション・説明）についてそれぞれの役割を解説い...
| WordPress標準機能のキャプション | |
| メリット | 標準機能なのですぐ使える |
| デメリット | 特に無し |
| 利用シーン | 画像に補足説明が必要なとき |
タブメニュー
タブメニューで画像を使うと、スペースがコンパクトにまとまり、情報を俯瞰させることができます。
- 実際の見え方
- 設定画面
例えば、上記のように「実際の見え方」と「設定画面」をタブメニューに入れた場合、設定箇所の説明がタブメニュー内で完結します。画像を並べる必要がないので、1枚1枚を大きなサイズで見せられます。
タブを増やして、PCでの見え方・タブレットでの見え方・スマホでの見え方などとしても、スペースが広くなることもありません。各デバイスでの見え方などもコンパクトに一箇所で伝えられます。
何を確認できるのか、タブ名を見ただけでユーザーに伝わることもタブメニューのメリットです。
タブメニュー設置するにはこちらでご紹介しているプラグインが便利です。
ブログやサイトをわかりやすくするには、情報の整理が必要不可欠です。 要点を箇条書きにしたり、文章をほどよく改行するような微調整でもわかりやすくなりますが、こういったタブメニューで情報を整理するのも効果的です。 内容によってはぐっとわかりやすくなります。 というわけで今回は、...
ただし、ユーザーがクリックしなければ閲覧できない点は、時にデメリットになる場合もあります。コンテンツの種類によってタブメニュー化する必要性があるか吟味しましょう。
| タブメニュー | |
| メリット | 省スペース化、コンテンツの整理ができる |
| デメリット | ユーザーがクリックしなければ一部しか閲覧できない |
| 利用シーン | 数タイプの画像を一箇所で俯瞰させたいとき |
スライダー
複数のバリエーションを自動で見せたいときは、画像スライダーが便利です。
スカイブルー
例：WordPressテーマ「PORTAL」のプリセットカラー
ユーザーが操作して画像を切り替えられるので汎用性は高いです。ただし、容量の大きな画像を使いすぎるとページが重くなる可能性もあるので注意が必要です。
また、プラグイン無しで画像スライダーを実装するのはあまり現実的ではありません。目的によってスライドやアニメーションの速度を変更したり、微調整が必要だからです。
画像スライダーの設置にはこちらのプラグインが便利です。
このようなスライダー（スライドショー）なら複数の画像を並べるよりもスマートに見せられます。大きいサイズで、かつスペースを削減しながらアニメーションさせて見せることが可能です。 そこで今回は、ブログ記事やサイト内に簡単にスライドショーを設置できるプラグインをご紹介いたします。 ...
このプラグインならスライドやアニメーションの速度はもちろん、画像に対するキャプション、サイズ感なども詳細に設定可能です。
| 画像スライダー | |
| メリット | 大画面で閲覧可、自動で切り替わる |
| デメリット | 使い方によってはページが重くなる |
| 利用シーン | 自動で動く写真ギャラリー、バナー広告などを見せたいとき |
GIFアニメーション
軽量な画像で動きを表現したい時には、GIFアニメーションが便利です。
画像の拡張子の一つであるGIFを使って画像をアニメーションさせることができます。簡単な操作説明や変化を画像で表現したい際に活用できます。
GIFアニメーションは、動画を変換するか複数の画像を組み合わせて簡単につくることができます。Macユーザーならこちらでご紹介している「picgif」というアプリが便利です。
GIFアニメーションの変換や編集ができるフリーのMacアプリ「PicGif Lite」をご紹介します。色んなGIFアニメ編集ツールを使ってみて、実用的な機能が盛り沢山でしたので、よろしければ使ってみてください。 PicGif Liteは、GIFアニメーションでも減色しにくい（画質が粗くなりすぎ...
軽量化できるオプションもあって使いやすいので、当ブログでもよく使っています。
| GIFアニメーション | |
| メリット | 画像の変化や動きを表現可能、動画と比べると軽量 |
| デメリット | アプリで簡単にできるが、GIFを作成して軽量化という一手間がある |
| 利用シーン | 簡単な動きをできるだけ軽量に表現したいとき |
ビフォアフター
最後にご紹介するのは、ビフォーアフター向けのツールです。
上記例ではPNG形式とJPG形式の画質と容量の違いを示しています。こちらの記事でご紹介しているWordPressプラグインを使って再現可能です。
記事を執筆するときに画像を用いる機会は多いと思います。中には画像を比較検証したり、ビフォーアフターを画像で並べて比較することも少なくないでしょう。しかし、大きな画像などの場合は、縦に並べてスクロールしなければ見られない場合もあります。画像の比較をする際は、極力スクロールせずに、同じ画面で比較したいも...
ここまでご紹介してきた見せ方に比べて汎用性は落ちますが、2枚の画像の比較には最適だと思います。色味や画質などのわずかな違いを表現する際に特に便利です。
つまみをドラッグして画像を切り替える操作感は、ビフォーアフターを確認するという作業を「楽しいユーザー体験」に変えてくれます。設定する画像次第でかなりスタイリッシュな見せ方を実現できるツールです。
| ビフォアフター向けのツール | |
| メリット | 画像の比較に最適、リッチな操作感 |
| デメリット | 画像2枚の比較のみなので汎用度は低い |
| 利用シーン | 画像を比較したいとき、ユーザー自身に画像の変化を体験させたいとき |
目的に合わせて画像の見せ方を変えよう
WordPressサイトの画像の見せ方を6つご紹介いたしました。
画像の見せ方ひとつでもバリエーションがあり、それぞれ向き不向きがあります。少しの工夫で印象が変わり、最適な見せ方をチョイスすることで内容も伝わりやすくなります。
ぜひ目的に合わせて画像の見せ方を変えてみてください。
画面のスクショ・画像作成・編集に役立つ記事一覧
Macでスクリーンショットを撮る時は、一般的にショートカットキーを用います。当記事では、スクリーンショットを撮る際に必須のショートカットキーから便利な小技まで紹介していきます。そんなの知ってるよって方もぜひ目を通してみてください。 先に小技を見る 【必須】基本的なスクリーンショットの撮り方 ...
Webサイトやブログ内に画像を挿入することは多く、特にアプリやツールの解説記事などに画像は必須ですよね。便利な画像編集アプリは数多くありますが、実はMacデフォルトの「プレビュー」で対応できることも多いです。そこで今回はプレビューだけでできる画像編集機能の使い方をご紹介いたします。 Macのプ...
この記事では、Webライターのための画像作成テクニックをお伝えします。 見栄えのいい画像を作れるスキルは、ライターとしての価値を底上げしてくれます。 他ライターとの差別化になりますし、単価も上げやすいです。 しかも、画像作成のスキルは習得が容易です。プロのデザイナーを目指すなら話は別で...
コメント