【画像・装飾関連】

【新】画像(alt属性)ルール

画像保存時のファイル名

以下3つを統一ルールで進ます

  • ファイル名
  • ファイル形式
  • 保存する画像サイズ

それぞれ細かく解説します。

保存する際のファイル名設定

保存時のファイル名→必ず半角ローマ字で設定

単語と単語の間は「-」で統一

例1)「カミカシャンプー 成分」についての画像の場合

→「kamika-shampoo-component」

例2)作品の表紙画像

「秘密の授業」→「secret-class-cover」

※アンダーバーはNG

※ハイフンも必ず半角で

※日本語で保存は絶対にNG

 

ファイル形式

ファイル形式は、基本「jpeg」or「PNG」で統一するようにしてください。

 

画像サイズ

画像のサイズは横1280×縦780に収まる画像を選んでください。

※サイズが大きいほどサイトへの負荷も大きくなる

 

他サイトの画像ファイル名を確認する方法

  1. 画像の上で右クリック
  2. 画像アドレスをコピー
  3. どこでも良いので貼り付け

↓動画解説ver↓

 

画像設置する際の代替テキスト(alt属性)の書き方

代替テキストとはalt属性ともいい、電波が悪いなど記事内の画像が表示しないときに、代替テキストに入力した画像の解説文を表示するために設定します。

なので、

代替テキストには、画像全体を解説した完結な説明文を書いてください。

例えば、

この画像の代替テキストは

「手のひらに光る電球が乗っている画像」

といった感じで、画像全体を完結に説明した文章を記載してます。

※何文字という決まりはないですが、明らかに長過ぎる文章は書かないでください。

 

代替テキスト実践例

秘密の授業表紙

代替えテキスト→秘密の授業の表紙

 

代替えテキスト→部屋でトレーニングしている女性

 

代替えテキスト→カミカシャンプー3本定期コースの値段

画像設置箇所

必ずしもH2見出しの下に設置しなくてもいいです。

見出しと見出しが狭いのに画像ばかり多いのも違和感が出てしますので、スマホでチェックしバランスを見て設置しましょう!