画像

画像フォルダ

テーマ内の画像ファイルは原則としてすべてimgフォルダ直下にいれてください。

特別な理由がない限りサブフォルダはつくらないでください。

画像を軽量化するソフトを使用する際、フォルダごとに作業するのが大変な為です。

 

納品時、使用しなかった画像ファイルはフォルダから削除してください。

 

 

 

画像の書き出し

ロゴ、イラスト、図、アイコン

  • 拡張子はpng
  • サイズは2倍(retina対応のため)

 

写真

  • 拡張子はjpg
  • サイズは1倍以上(表示速度優先)

ただし、retinaモニターで見た際に明らかに画質が悪いものについてはサイズを2倍にしてください。

3倍以上の対応は不要です。

 

 

 

画像命名規則

小文字英数字ハイフン(-)、アンダーバー(_)のみ使用してください。

例外もあるかと思いますが、その場合も「どこ」で使われている「何」の画像か、第三者が見てわかるように命名してください。

 

⑤の前だけアンダーバー(_)の理由は、マウスオーバーなどjsでの処理を行う場合があり、他と区別をつけるためです。

 

 

① ページ名

場所 命名例 備考
特定のページで使用の場合 home
company
ページスラッグに合わせる
特定のテンプレートで使用の場合 single(single.php)
archive(archive.php)
ブログなど
サイト全体で使用の場合   入力不要

 

 

② エリア名

場所 命名例 備考
ヘッダー header
フッター footer
サイドバー aside
メインエリア intro
recommend
id名 or どの場所か推測しやすい英単語
サイト全体で使用の場合 入力不要

 

 

③ 役割名

第三者がわかる内容であれば追加・変更可

 

役割 省略名
背景 bg
バナー bnr
ボタン btn
アイコン ico
写真・イラスト・図 img
ロゴ logo
テキスト txt

 

 

④ 番号 or 説明

  命名例 備考
番号 1
02
003
桁数はサイト全体で統一
red(赤)
blue(青)
推測しやすい英単語
説明 twitter
smile
推測しやすい英単語

 

 

⑤ 状態

用途 接尾辞
retina対応画像 @2x logo@2x.png
mouseover時画像
mouseoff時画像
_on
_off
btn_on.png
btn_off.png
960px未満(スマホ)専用画像
960px以上(PC)専用画像
_p
_d
home-bnr-campain_p@2x.png
home-bnr-campain_d.png

 

 

 

【参考】命名例

logo.png → 全ページ共通のロゴ

logo_d.png → 960px以上のデバイスでのみ使用するロゴ

logo_p@2x.png → 960px未満のデバイスでのみ使用するretina対応ロゴ

footer-logo.png  → フッタでのみ使用するロゴ

home-slider-img-01_p.jpg → トップページのスライドショーの1枚目で960px未満のみで使用する画像

staff-tanaka.jpg → スタッフ紹介ページの田中さんの写真

company-staff-tanaka.jpg → 会社概要ページのスタッフ項目の田中さんの写真

single-main-bg.jpg → single.phpテンプレートのmainエリアの背景画像

blog-main-bg.jpg → ブログ共通で利用するmainエリアの背景画像(single.php、archive.php、category.phpで共通で使いたい場合。わかりやすければOKです)