ワードプレスではイメージ画像を配置することは簡単ですが、角を丸くしたり、カーソルを当てた際に変化を加えたりするにはCSSにてコードを打ち込む必要があります。
その前に覚えておきたいのが画像挿入の方法ですよね。
画像の種類について
画像には「GIF（ジフ）」「JPG（ジェイペグ）」「PNG（ピング）」などがあります。
GIF形式
色数が２５６色まで表現できる形式です。色数の少ないイラストなどで使用すると効果的！！
特徴は透明色を扱うことができ、動きのあるGIFアニメーションを作成することが可能。
JPG形式
色数が１６７０万色まで表現できる形式です。写真やグラデーションのあるイラストなどで使われます。
PNG形式
色数が２８０万超色まで表現できる形式です。PNG形式を表示できないブラウザーもありますので注意が必要です。
写真や画像はJPG、イラスト系はPNGと思っておけば大丈夫です。
画像の挿入方法について
画像を表示させるタグは<img>です。
終了タグは？と思った方もいますが、<img>タグは空要素なので、終了タグは必要ありません。
属性値の入力
src属性とalt属性の入力が必要です。
外部から読み込むファイルなどの所在を記述するものです。
ネット環境によって画像が読み込まれなかった際に画像が表示されません。その際に何の画像が入っているのかをテキスト文で表示させるためのものです。
src属性がないと画像を表示させることはできないと覚えておきましょう。
画像挿入コードの書き方
例）<img src=”https:◯◯◯◯.jpeg” alt=”インテリア用カメラ” />
結果を見てみましょう。
書き方を失敗したり、ネットワーク環境によって画像がうまく表示されなかった場合にテキスト内容が出ます。
画像を沢山挿入して「alt属性を自分のブログ名にしたら評価が上がるんじゃないか」と考えた方はストップ！！
WEBに詳しい方ならご存知でしょうが、未経験者の方はキチンとルールを覚えておきましょう。
alt属性は写真に関係する文言を入れなければいけません。
ホームページを作成する上で最低限のルールが存在します。
悪質と判断されればサイトは掲載できなくなります。
横幅と高さの設定
「width」と「height」の２種類があります。
画像の大きさを変更する際や指定の大きさをコードに入れておくと良いです。
サイズのコード入力方法
例）<img src=”https:◯◯◯◯.jpeg” alt=”インテリア用カメラ” width=”100px” height=”150px”>
属性値はスペースを空けて続けて入力を行います。
写真や画像の挿入方法は以上になります。
中級編では、画像の角を丸くしたり、画像をの位置を変更して本文を右に置くなどのデザイン方法を解説していきます。
