【ワードプレスの記事に画像を挿入する】

ワードプレスの記事に画像を挿入する。記事内に画像を挿入すること自体はとても簡単です。今回は、ワードプレスの記事に画像を挿入するについて書いていきます。画像を貼って、イメージアップを図りましょう。

 

インターネットで商品を売るのに何が必要でしょう?その答えは、あなた自身をイメージさせることであり、即ち、あなた自身を売り込むことです。この章では、記事に画像を挿入する種類について説明していきます。

 

結論を先に話ししておきます
あなたのブログに使える画像の種類について、いろいろ説明していきますが記事内に画像を挿入する為の説明ではありません」。画像の種類で代表的なものはJPEG」「PNG」「GIFなど、いろいろあります。

 

上記で説明した画像の種類について、聞いたことがあるのではないでしょうか。今回は、それ以外にもまだありますので紹介していきます。また画像を使う際は有料のものではなく無料のもので十分です。

 

当ブログ(miブログ)で使っているトップページのヘッダー画像は、無料素材を使っています。ちなみに言うと「高品質なフリー動画素材 - Pixabay」です。この「Pixabay」には「無料の画像」や「無料の動画」などが沢山あります。

 

以前、画像関連の投稿をしておりますので良ければ覗いて見て下さい。

 

あなたのサイトやブログは今何位?「検索順位チェックツールGRC」。

 

【記事に入れる画像を選ぼう】

ワードプレスを使用することで、初心者でも簡単に見映えの良いコンテンツを作成することが可能です。また読者の理解を深めてコンテンツに満足して貰う為にも、画像は欠かせないものだと言えるのではないでしょうか。

縦長の画像より横長の画像を使おう

縦長の画像より横長の画像を使おう

 

当ブログ(miブログ)では、記事内で使っている画像は全て横長です。縦長の画像は一枚も使っておりません。例えばですが、縦長の画像をスマートフォンで見てみると、下方向へのスクロールが長くなってしまいおススメしません。

 

縦方向に撮影する場合、修正を加えるなどした方が良いと思います。その一例を挙げると、上下をトリミングすると言うことです。「トリミングとは、写真の画像処理に於いて、画面の一部だけを切り出す加工を施したもの」を言います。

 

ただ注意してほしいことは、正方形にトリミングしないようにして下さい。Webサイトに於いては、長い間、横長の写真が使用されてきたこともあって、正方形の画像は、ユーザーに違和感を与えてしまう恐れがあります。

 

インスタグラムに於いては、正方形の画像がマストだと言われているようですが、Webサイトに於いては、横長の画像を使用するようにしましょう。

 

縦長画像の特徴

TinyMCE Templatesの特徴

 

縦長の画像では、縦ラインの軸が強調される為、全体のバランス且つ印象からしてみれば、その高さがある意味、固定されてしまいます。また横幅が狭いですから、画像の中央に意識が集中しやすくなります。

 

メインの被写体を強調しやすいと言う特徴もあります。その場合、高さに加え、遠近感を上手く利用すると、奥行きのある画像に仕上げることができますから、立体的な画像を演出するのにも向いていると言えます。

横長画像の特徴

TinyMCE Templatesの特徴

 

横長の画像では、横ラインの軸が強調される為、画像全体に対し、広がりのある印象を植え付けさせてくれます。その為、風景を例に、その広がりを画像で表現したい時におススメと言えるでしょう。

 

例えばですが、画像でも、パノラマで見た場合、横向きで撮影されることが多く、画像全体の余白が多くなりやすいと言う特徴もある訳です。上手く余白を使うことで、空気感や雰囲気を演出することも可能となるでしょう。

 

【画像ファイル形式について】

お分かりだと思いますが、イラストや写真など、大きく分類すると「画像」となる訳ですが、データの表示方法や圧縮方法はそれぞれ異なっています。そして、それらを決めるファイルの種類のことを「画像ファイル形式」と呼んでいます。

ビットマップ画像

ビットマップ画像

 

「ビットマップ画像」とは、コンピューターで扱う画像の表現を表すことを言います。これは画像を「色の点の集まり」で表現しています。画像の「縮小」「拡大」「変形」には向いてませんが、写真などの複雑な画像の表現には適しています。

 

「ビットマップ画像」は「ビットマップ」とも言います。またビットマップ形式」「ビットマップイメージ」「ビットマップグラフィックス」「ラスター画像」「ラスター形式」「ラスターイメージ」「ラスターグラフィックスとも言います。

 

「ビットマップ画像」は、正方形の点(ピクセル)が集合し、構成されている画像のことを指す場合もあります。スマートフォンなどで写真を撮る場合でも、基本的には「ビットマップ画像」として分類されることを覚えておきましょう。

 

ビットマップ画像の特徴
  • イラストや写真=画像などを拡大した場合、画像が荒くなってしまいます。
  • きめ細やかな色彩表現が可能です。
  • 画質に於いて、解像度で決定されます。

 

ベクター画像

ベクター画像

 

「ベクター画像」とは、コントロール・ポイントと呼ばれる複数の点を数値化し、数式によって導き出された曲線を使い、滑らかに結ぶ画像を言います。「拡大」「縮小」や変形しても、画像が劣化することはありません。

 

ポスターやパンフレットなどの印刷物に使われる「イラスト」や「ロゴ」を作るのに向いていると言われています。「ベクター画像」の場合、そのままの状態では、パソコンのディスプレイに表示することはできません。

 

ベクター画像」は「ベクトル画像」とも呼ばれています。「ベクター画像」は、点と線の情報が数値化された画像であり、どれだけ拡大しても「ビットマップ画像」のように、きめが荒くなったり、ぼやけることがありません。

 

ベクター画像の特徴
  • 点と線を数値化し、コンピューター側で再現します。
  • 「ビットマップ画像」と違って、画像が荒くなることはありません。
  • 画像自体が劣化することはありません。

 

【画像ファイル形式の種類】

コンピューターでそれぞれの画像を保存する際、様々なデータ形式を選んで保存することができます。ここでは、画像を保存する際、画像には、どのようなデータ形式があって、特徴があるのかを書いていきたいと思います。

JPEG(Joint Photographic Experts Group)

JPEG(Joint Photographic Experts Group)

 

「JPEG」は「Joint Photographic Experts Group」と書き、読み方は「ジョイント・フォトグラフィック・エキスパーツ・グループ」と言います。「JPEG」とは、静止画像のデータを圧縮した方式の一つと覚えておきましょう。

 

「JPEG」の拡張子は「.jpg」と「.jpeg」の2種類あります。その読み方は「ジェイペグ」です。他にも「jpe」「jfif」「pjpeg」「pjp」などもありますが、全て同じ「JPEG」なので基本的には「.jpg」と「.jpeg」を使うのが一般的です。

 

JPEGの特徴
  • 多くの端末など、様々な環境に於いて、再生することが可能となります。
  • ファイルサイズがそれほど大きくない為、無線やインターネットでのやりとりも簡単にできます。
  • 記録メディアの容量や速度に対し、それほど拘る必要もありません。
  • ちょっとしたレタッチであれば「JPEG」でも十分可能です。
  • 拘り過ぎるレタッチだと、逆に画像が破綻することがありますので要注意。
  • 保存を繰り返してばかりいると画像の劣化が進行する危険があります。

 

PNG(Portable Network Graphics)

PNG(Portable Network Graphics)

 

「PNG」は「Portable Network Graphics」と書き、読み方は「ポータブル・ネットワーク・グラフィックス」と言います。「PNG」とは、コンピューターで扱う画像データのファイル形式の一つを言います。

 

データの圧縮や伸張の際にロスが生じない可逆圧縮を採用している為、写真のような画像の場合「JPEG」に比べ、データサイズが大きいです。一般的に「GIFよりは圧縮率が高く、半透明で表現が可能です。

 

PNGの特徴
  • 「フルカラー」「8bitカラー」どちらにも対応可能。
  • 圧縮率が非常に高く、同じ内容の「GIF画像」より、10%~30%程度、ファイルサイズが小さくなります。
  • 圧縮によって、データが削除されることがない可逆圧縮形式を採用しています。「可逆圧縮とは、データ圧縮方式のうち、圧縮符号化の過程に於いて、元のデータを元通りに復元できるよう圧縮することです」。
  • 複数の透過色を指定することが可能です。

 

高速・高機能・高安定レンタルサーバー「エックスサーバー」。

 

GIF(Graphics Interchange Format)

GIF(Graphics Interchange Format)

 

GIF」は「Graphics Interchange Format」と書き、読み方は「グラフィックス・インターチェンジ・フォーマット」と言います。GIF」とは、画像フォーマットの一つであり、拡張子は「.gif」が用いられています。

 

GIF」は、一つのファイルに対し、複数の画像を収録してアニメーション表示させたり、特定色を透明化することで、背景を透過することが可能な為、Webサイトの中で利用されることが多いと言えます。

 

GIFの特徴
  • 可逆圧縮(色数は減少します)。可逆圧縮とは「PNG」同様、データ圧縮方式のうち、圧縮符号化の過程に於いて、元のデータを元通りに復元できるよう圧縮することです。
  • とてもシンプルで、色の境界がはっきりしているデザインに非常に強いと言われています。
  • ファイルサイズが「JPEG」同様、それほど大きくない為、Web広告やバナーに多く用いられています。
  • アニメーション機能があります。アニメーションとは、簡単に言うと、動きをつけた画像と言う意味です。「GIFアニメ」とも言われます。
  • 透過可能に関して言えば、背景色の1色のみ有効です。

 

SVG(Scalable Vector Graphics)

SVG(Scalable Vector Graphics)

 

「SVG」は「Scalable Vector Graphics」と書き、読み方は「スケーラブル・ベクター・グラフィックス」と言います。「SVG」とは「大きさを変えられるベクター画像」のことを意味します。

 

「JPEG」や「PNG」などがピクセルの集まりとして表現されるラスター画像であるのに対し、ベクター画像は、曲線を描いたり、一定の範囲を塗り潰したりと言った処理を座標と数式によっておこなっています。

 

SVGの特徴
  • 「拡大」「縮小」をおこなったとしても、画質が荒くなることはありません。
  • 写真として使われる場合、あまりおススメはできません。むしろ不向きです。
  • 「GIF」よりも軽いと言えます。
  • ワードプレスのテキストエディタで編集可能です。
  • 文字など、シャープさを求められるものに向いていると言えます。
  • アイコンなど、色数が少ない画像に向いていると言えます。
  • レンタルサーバー側の設定が古いままになっていると、場合によっては使用できない可能性があります。

 

TIFF(Tagged Image File Format)

TIFF(Tagged Image File Format)

 

「TIFF」は「Tagged Image File Format」と書き、読み方は「タグド・イメージ・ファイル・フォーマット」と言います。「TIFF」とは、画像を保存する形式の一つです。ファイル拡張子は「.tiff」「.tif」です。

 

「TIFF」は名前の通り、画像データの先頭にファイル形式を示すタグが記録されています。このタグにより「モノクロ」「カラー」など、色数や解像度なども含め、複数の画像情報を持つことが可能となります。

 

TIFFの特徴
  • 先程も書いてますが、拡張子は「.tiff」と「.tif」です。
  • 取り扱っている色は「1~8、12、24、32ビット」です。
  • 圧縮率はそれほど高い訳ではありませんが、可逆圧縮です。可逆圧縮とは、データ圧縮方式のうち、圧縮符号化の過程に於いて、元のデータを元通りに復元できるよう圧縮することです。
  • データ配列などのデータを、タグと呼ばれる部分に記録している為、同じ「TIFF」ファイルの中にも、様々なフォーマットが存在しています。

 

ここでの投稿は以上とします。ワードプレスの記事に画像を挿入するについて、まずは画像を挿入する前に、どのような形式の画像ファイルがあるのかを勉強した方が良いです。何も分からず画像を扱うのも危険です。

 

私自身が画像の形式ファイルを覚えるのに必死で勉強したものです。せっかく良い写真を撮ったのに、編集してみたら、可笑しくなってしまったと言うのもザラにありますからね。そうなると泣くに泣けない状態です。

 

 

トップページへ戻る

おススメの記事 - Recommended articles -