ビジュアルストーリーテリング!!WordPressでのイメージ画像の効果的な活用法

ワードプレスではイメージ画像を配置することは簡単ですが、角を丸くしたり、カーソルを当てた際に変化を加えたりするにはCSSにてコードを打ち込む必要があります。

その前に覚えておきたいのが画像挿入の方法ですよね。

目次

画像の種類について

画像には「GIF(ジフ)」「JPG(ジェイペグ)」「PNG(ピング)」などがあります。

GIF形式

色数が256色まで表現できる形式です。数の少ないイラストなどで使用すると効果的!!

特徴は透明色を扱うことができ、動きのあるGIFアニメーションを作成することが可能。

JPG形式

色数が1670万色まで表現できる形式です。写真やグラデーションのあるイラストなどで使われます。

PNG形式

色数が280万超色まで表現できる形式です。PNG形式を表示できないブラウザーもありますので注意が必要です。

写真や画像はJPG、イラスト系はPNGと思っておけば大丈夫です。

画像の挿入方法について

画像を表示させるタグは<img>です。

終了タグは?と思った方もいますが、<img>タグは空要素なので、終了タグは必要ありません。

属性値の入力

src属性alt属性の入力が必要です。

src属性とは? 読み方は「ソース」です。画像がどこのファイルにあるのか、参照先を指定しなければいけません。
外部から読み込むファイルなどの所在を記述するものです。
alt属性とは? 読み方は「オルト」です。代替テキストを意味しています。
ネット環境によって画像が読み込まれなかった際に画像が表示されません。その際に何の画像が入っているのかをテキスト文で表示させるためのものです。

src属性がないと画像を表示させることはできないと覚えておきましょう。

画像挿入コードの書き方

例)<img src=”https:◯◯◯◯.jpeg” alt=”インテリア用カメラ” />

結果を見てみましょう。

書き方を失敗したりネットワーク環境によって画像がうまく表示されなかった場合にテキスト内容が出ます。

ポイント alt属性は記入しなくても画像を挿入することは可能ですが、SEOの評価に影響を与えます。

画像を沢山挿入して「alt属性を自分のブログ名にしたら評価が上がるんじゃないか」と考えた方はストップ!!

WEBに詳しい方ならご存知でしょうが、未経験者の方はキチンとルールを覚えておきましょう。

alt属性は写真に関係する文言を入れなければいけません。

ホームページを作成する上で最低限のルールが存在します。

悪質と判断されればサイトは掲載できなくなります。

横幅と高さの設定

「width」と「height」の2種類があります。

画像の大きさを変更する際や指定の大きさをコードに入れておくと良いです。

サイズのコード入力方法

例)<img src=”https:◯◯◯◯.jpeg” alt=”インテリア用カメラ” width=”100px” height=”150px”>

属性値はスペースを空けて続けて入力を行います。

写真や画像の挿入方法は以上になります。
中級編では、画像の角を丸くしたり、画像をの位置を変更して本文を右に置くなどのデザイン方法を解説していきます。

よかったらシェアしてね!
  • URLをコピーしました!
目次