キャンペーンのお知らせや、新メニューの紹介を、
サロンのホームページの右側などに、バナーで貼り付けたい場合があります。
例えば、こんな風に、「キャンペーン」を貼り付けたり。
画像編集ソフトを使用して、オシャレに仕上げる必要がある場合もありますが、
例えば「９月のキャンペーン」など、こまめにテキストを差し替えたい場合も出てくると思います。
バナーの文字を画像にするメリット・デメリット
バナーの文字を画像にすると、デザインを細やかに決められるので、クオリティが高まります。
また、スマートフォンで表示した時も、テキストごと縮小してくれるので、崩れることがありません。
デメリットとしては、環境にもよりますが
などが考えられます。
そこで、バナーを「背景画像 ＋ テキスト」で表現する方法をお伝えします。
背景になる画像を決める
まずは、背景になる画像を選択します。
この時、画面のサイズによって背景画像を伸縮したりしたいので、あまり厳密にレイアウトが決まっている画像ではないほうが好ましいです。
例えば、人の顔が入っている画像だと、顔のおかしなところで切れてしまったりすることもあります。
[affiliate id=4578]
今回は、こんな感じの、どこで切れても大丈夫な画像を、背景として設定してみます。
まずは、箱を作る
リンクの貼り方は、ご存知でしょうか？
リンクは、「エイチレフ（href）」で指定します。
<a href="http://リンクを貼りたいURL">リンクを貼りたい文字列</a>
これで、リンクを貼ることができます。
こんな感じになります↓
リンクを貼りたい文字列
この箱に、先ほどの写真を入れるようにします。
写真を背景に設定するには、style=””というタグを使います。
<a href="http://リンクを貼りたいURL" style="background-image:url('画像のURL');">リンクを貼りたい文字列</a>
となります。
先ほどの画像を使う場合は、
<a href="http://リンクを貼りたいURL" style="background-image:url('https://www.healing-solutions.jp/wp-content/uploads/2015/06/elly134091024_TP_V-850x569.jpg');">リンクを貼りたい文字列</a>
となります。
そうすると、こうなります。
ちょっとずつ、近づいてきましたね。
箱のスタイルをCSSで整える
１つ１つの箱に、styleを設定していくこともできるのですが、
それだと複数のバナーを管理したい時には、とても面倒です。
なので、見た目を一括で指定できる「class（クラス）」というものを使います。
クラスというのは、小学校の学級クラスをイメージしていただければ大丈夫です。
「はい、３年１組の生徒は、緑色の帽子をかぶってー」
というような指示。
そうすると、３０人くらいの生徒を一括で指定しつつ、同じ指示を出すことができます。
クラスの設定は、「class=”クラス名”」となります。
<a class="banner-block" href="http://リンクを貼りたいURL" style="background-image:url('https://www.healing-solutions.jp/wp-content/uploads/2015/06/elly134091024_TP_V-850x569.jpg');">リンクを貼りたい文字列</a>
これで、「banner-block」というクラスの生徒に、全員同じ指示を出すことができます。
そして、その上で、個別に背景画像を設定しているということになります。
CSSの設定は、<style>の中に
クラスに対するデザインの設定は、<style>の中に書いていきます。
できれば、ソースコードの</head>の内部に記入するのが好ましいですが、
こんな感じで、本文の中のソースコードに指定しても、動くことは動きます。
<style>.banner-block{ ここに設定; }</style>
本文の中と、ソースコードの違い
ん？ ソースコードって・・？
と、思われた方もいるかもしれません。
ご存知かもしれませんが、ホームページは、htmlというタグで書かれています。
それを、ブラウザが解析して、見た目を整えて表示してくれています。
なので、設定やデザインは、htmlというタグを使って書かなければいけません。
WordPressの場合は、ビジュアルではなく、テキストのほうにタブを切り替えて編集することになります。
では、
という指示を書いてみます。
<style>.banner-block{width:300px;height:120px; text-align: center; /* 文字を横中央に */ font-family: '明朝体';font-size:1.6em;/* 文字サイズを少し大きく */display: block; /* ブロック化するおまじない */ }</style>
リンクの文字の下線をなくす
先ほどのスタイルに
text-decoration: none;を追記します
テキストを縦位置中央に配置
これには、幾つかの方法があります。今の所、１行で折り返しがないという前提で進めます。
テキストが折り返す場合は、別の方法をとらなくてはいけないのでご注意ください。
先ほどのスタイルに
line-height: 120px;
を追記します。「高さと同じだけ行間を空ける」という設定です。
中の文字を読みやすくする
テキストに白い影をつけて、文字を浮かび上がらせます。
text-shadow:-1px -1px #FFFFFF,1px -1px #FFFFFF,-1px 1px #FFFFFF,1px 1px #FFFFFF,0px 0px 4px #FFFFFF;
最後は、せっかくなので中央に配置して、バナーっぽくしてみます
margin-left:auto;margin-right:auto;
サイズを変えてみる
最後に、サイズをもう少し大きくしてみます。
width:450px;height:250px;line-height:250px;
にすれば、こうなります。
まとめ
見た目的にどのくらい整えるかにもよりますが、概ね、こういった方法でバナーを作成することができます。
リンクそのもののコード
<a class="banner-block" style="background-image: url('画像のURL');" href="http://リンクを貼りたいURL">リンクを貼りたい文字列</a>
バナーのスタイルを定義するclass
.banner-block{width: 300px;height: 120px;text-align: center;font-size: 1.6em;font-family: '明朝体';display: block;line-height: 120px;text-decoration: none;text-shadow:-1px -1px #FFFFFF,1px -1px #FFFFFF,-1px 1px #FFFFFF,1px 1px #FFFFFF,0px 0px 4px #FFFFFF;margin-left: auto;margin-right: auto;}
比較的、シンプルなバナーの修正なのに
画像を書き換えるというだけで、毎回３０００円とか、毎月10,000円とか、
予算を組んでいるサロンオーナー様もいらっしゃると思います。
上記のことをするにあたって、
「逆に、労力がかかる。その分働いたほうがいい」という場合は、
業者に依頼する選択肢もありますが、
シンプルなバナーを置き換えるだけであれば、比較的簡単に変更できる・・・かもです。
参考にしてみていただければ嬉しいです。
