Photoshopでバナーを作る
サイトへ自分で作成したバナー広告などを入れてみましょう。
バナーのテーマは自由
※PC、スマートフォン用の２種類作成
01 横長の場合はバナーは２種類作る
バナーは目立たせるだけでなく、内容がしっかり伝わらなければなりません。
細長いバナーだとスマホで見た時に文字が小さくて読めないなんてこともありますので
PC用とスマホ用のサイズの違うバナーを作成しましょう。
PC用（例：940×300px）
スマホ用（例：640×300px）
02 PCとスマホで表示・非表示を切り替えるためのCSS
バナーをPC・スマホで表示を切り替えるためのCSSを入れておきます。
CSS
@media screen and (min-width: 768px) {
.sp {display:none;} /*PCで非表示にするスマホ用コンテンツ*/
}
@media screen and (max-width: 768px) {
.pc {display:none;} /*スマホ非表示にするPC用コンテンツ*/
}
HTML
<div class="pc">
<p><img src="ph1.jpg"></p>
</div>
<div class="sp">
<p><img src="ph2.jpg"></p>
</div>
実際は alt="○○" も入れておきましょう 「<img src="ph1.jpg" alt="キャンペーン">」
実際に切替した画像 ↓ 画面を変えて見てみましょう
03 バナーにリンクをつける
設置したバナーにリンクを設定する場合
HTML
<div class="pc">
<p><a href="https://p1room.com/"><img src="ph1.jpg"></a></p>
</div>
<div class="sp">
<p><a href="https://p1room.com/"><img src="ph2.jpg"></a></p>
</div>
01 Photoshopでコピー、ペースト
フォルダー内に入っている「dog.jpg」や「hamburger.jpg」は切り抜いて使うのが便利です。
Photoshopで画像を開いて「被写体を選択」で切り抜きが出来ます。
点線で囲まれたところはコピーして、別のファイルへペーストできます。
02 切り抜きができない場合
「flower.jpg」や「leaf.jpg」のような切り抜きが出来ない写真の時にぼかしを入れて消すというのも一つの方法です。
1）Photoshopで画像開き、全体をコピー→新しいページを作りそこへペーストします。
2）多角形ツールでカットしたいところを囲って選ぶ
4）メニュー → 選択範囲 → 選択範囲を変更 → 境界をぼかす
ダイアログが出るのでここでは「30px」ぐらい
5）編集 → カット
6）選んだところが消えたので、背景に他の写真を入れたりしてみましょう。
そのままバックグラウンドカラーを入れてもきれいです。
