カテゴリ: プログラミング
February 28,2021 at 9:40 AM

【コーディング】友人のブログ用のバナーを作りました。デザインとHTMLの知識で簡単。

こんにちは!こんばんは!おはようございます!

2021年2月28日。ブログを本格的に始めてから早くも一か月が経ちます。

つい数日前にブログ仲間の友人から言われた、

「カズキのブログのバナー作ってよ」

の一言から気が向いたので、一日かけて我々2サイトの2タイプずつで4つのバナー広告を作成したのでした。

たしかにどうせ友人のブログを紹介するのであれば、画像やイラスをを使って訴求するに超したことはない。

というわけで今回は、先日のバナー作成の手順と設置方法についてまとめたいと思います。

ブログ運営初心者の方は参考にしてみてください。

全体の流れ

バナー作成における最もシンプルな手順はこちらです。

  1. レイアウトを決定する
  2. 訴求のためのテキストやロゴを決定する
  3. 背景画像を決定し全体をデザインする
  4. コーディングする
  5. サイトに設置する

大まかに分ければこれらの工程に分けることができます。

それでは順に解説していきます。

手順1. レイアウトを決定する

まず、バナーがサイトにどのように掲載されるのかをイメージします。

バナーのレイアウトを検討する際に最も大事な要素は、サイトのどの部分に設置するかという点です。

候補1. サイドバーに設置する

WordPressなどを使用したブログサイトで一番多いバナー設置場所はサイドバーでしょう。

サイドバーはブログのトップページであれ投稿ページであれ、大抵スクロールをほぼ伴うことなく訪問者の視界に入っていくことが可能です。

画面高さに収まる程度にコンパクトで、かつスクロールに追従していくタイプのサイドバーであれば尚効果的です。

常にサイト訪問者の視界に入っておくことができます。

訴求効果の大きさ故、より費用対効果の大きいアフィリエイトのために使うこともできますが、

逆に明らかな営利目的を伴わない友人のブログを紹介するためにスペースを活用するのも一つの有効な手段といえます。

サイドバー用のバナーで推奨されるサイズは、約300px×約300pxの正方形タイプ。

正確な数値はテーマによって分かれるところですが、

小さいよりは大きいサイズでデザインした方が、太いサイドバーに設置した時でも画質が落ちません。

また、この正方形タイプのバナーはフッターなどを2分割または3分割したスペースにも使うことができます。

候補2. 投稿ページ内に設置する

もう一つの主な設置場所は投稿ページの行間に設置するというもの。

投稿ページ内で別のサイトを紹介する際は、やはり文字によるリンクだけでは物足りません。

画像入りのバナーで訴求することで宣伝効果が上がる上、サイト自体華やかさが増すという効果を期待することができます。

今回僕がここで使用するために採用した縦横サイズ比率は1200px×500pxです。

ここは好みですが、もっと高さを抑えて横長にするのもありだと思います。

手順2: ロゴやテキストを検討する

次に、使うスペースの中でどんな内容で訴求するかを検討します。

基本的にはブログで使用しているロゴやデスクリプション(説明文)などがあれば、そのまま使うと良いでしょう。

ブログ自体がもつブランドイメージを使うことで、統一感が生まれます。

ロゴなどを持っていないブログでも、フォントやテーマカラーなど何かしらの特徴をとらえて反映させることができるでしょう。

ちなみに僕のこのサイトでは現在はテーマの関係上眠っていますが、ロゴとデスクリプションをそのまま活用しました。

まずはラフ画を作成するのが良い

えー、今回僕はすっ飛ばしてしまった工程ですが、まずは簡単でいいのでラフ画を作成するのがいいでしょう。

ラフ画とは、大まかなレイアウトをまとめた簡単な設計図のようなものです。

ロゴやテキストをどこに配置すると良いか、背景画像はそれに合わせてどんなものを選べばよいか、考えをまとめやすくなるでしょう。

筆者はPhotoShopを使用

デザインに活用するツールですが、やはりおすすめは王道のPhotoShop

とはいえ、指定するサイズで満足できる画質の画像を合成することさえできれば、どんなソフトでも問題ないでしょう。

デザインソフトの質とできる作品の品質は決して一致するとは限りませんからね。

手順3: 背景画像を選択し全体をデザインする

ラフ画で構想が固まってきたら、PhotoShopで各画像ファイルを配置して組み立てていきましょう。

パーツをバランスよく配置

ちなみに今回僕が背景に使用した画像は、以下のように右上に太陽が出ているという構造。

このレイアウトに逆らわず、必要な文字情報はすべて左側に寄せてバランスをとりました。

それでも左側全体の情報量が重たく、右上の隅の部分が物足りなく思えてしまうので、そこには小さくサイトのアイコンを配置。

右下のスペースにはボタンも配置する仕様にしました。

スペースを埋めるだけでなく、「あ、ここをクリックすればいいのね」とサイト訪問者の人に無意識に感じてもらえればOK。

パーツごとに書き出し

デザインが完成したら、PNGもしくはJPEGファイルとして書き出します。

この時、もしもボタンなどにホバーのエフェクトをかけたいのであれば、それぞれのパーツを分けて書き出しましょう。

手順4: コーディングする

ファイルが完成したら、ローカル環境でコーディングしましょう。

主に使う言語はHTMLCSSで、そこまで手は込んでいません。

ただ、設置するのはコードを熟知するエンジニアとは限らないので、一箇所にコピペして完結できるものを作る必要があります。

この点に関してはいつものサイト作りとは少し勝手が異なるところで、工夫すべきポイント。

CSSはstyleプロパティ内で完結するように記述して、疑似要素などを伴うものはできるだけ避けたいところです。

またちなみに、今回作ったものには追跡など高度な機能はついていません。

全体の枠を決める

ベースとなる画像を配置するのは難しいことではありません。

まずは<div>要素で囲みます。widthは”100%”、box-sizingは”border-box”を指定し、枠線含めて設置個所に収まるようにします。

またマウスをかざした時にカーソルが手の形になるように指定したいのですが、この<div>要素には “:hover”が指定できないという問題点が。

こんな時はonmouseover属性を使用し、”this.style.cursor=’pointer‘”を指定します。

<div
style="position: relative; 
width: 100%; 
margin: 0 auto; 
border: 8px solid #fff; 
box-sizing: border-box;" 
onmouseover="this.style.cursor='pointer'">
/* (中身のコード) */
</div>

リンク、そして画像の配置

次に内部に<a>タグで自分のサイトへのリンクを設置しましょう。

ブラウザでは別のタブで開きたいのでtarget属性で”_blank”を指定。

そしてその内部には<img>タグを配置。”block“要素を指定し、widthを<div>要素いっぱいになるよう”100%”と指定します。

これらのタグの設定はとても簡単ですね。

/* リンク */
<a href="(自分のサイトのURL)" 
target="_blank">
/* 背景画像 */
<img src="(画像の絶対パス)"
style="display: block; 
width: 100%;">
/* (ボタンを設置) */
</a>

ボタンを設置

さて、あとはボタンを設置しましょう。まずは適切な位置に配置してやりましょう。

<img>タグでボタンの画像を読み込んで、displayは”absolute“を指定して絶対配置とします。位置は%指定

この時、親要素となる<div>には”relative”を指定することを忘れずに。

widthは%指定で適切な数値を指定してやるといいでしょう。放っておくだけでレスポンシブにサイズが変わってくれます。

次にマウスがホバーした時に影が小さくなったり戻ったりする指定をします。

まず平常時にボタンに影がつくようbox-shadowを指定します。必要に応じてtransitionでエフェクトに係る時間を指定してやります。

次に再びonmouseover属性でホバー時の影の大きさ、overmouseout属性でもう一度平常時の影の大きさを指定してやりましょう。

/* ボタンの設置 */
<img src="(画像の絶対パス)" 
style="width: 25%; 
position: absolute; 
bottom: 8%; 
right: 5%; 
border-radius: 20px; 
box-shadow: -4px 4px 16px #fff; 
transition: .2s;" 
onmouseover="this.style.boxShadow='-2px 2px 8px #fff'" 
onmouseout="this.style.boxShadow='-4px 4px 16px #fff'" 
alt="button">

これで、簡単ブログバナーの完成です。

ちなみにこちらが今回作成した、このサイトで右側サイドバーに設置しているバナーのコードです。

<!-- CarlosBlogのサイドバー用バナー -->
<div class="banner_CarlosBlog_sidebar" style="position: relative; width: 100%; margin: 0 auto; border: 8px solid #fff; box-sizing: border-box;" onmouseover="this.style.cursor='pointer'"><a href="https://ricango.com/carlosblog/" target="_blank"><img src="https://ricango.com/images/banner_CarlosBlog_sidebar.png" alt="Carlos Blog" style="display: block; width: 100%;"><img src="https://ricango.com/images/button_banner_CarlosBlog_sidebar.png" style="width: 80%; position: absolute; bottom: 8%; left: 0; right: 0; margin: auto; border-radius: 19px; box-shadow: -2px 2px 8px #fff; transition: .2s;" onmouseover="this.style.boxShadow='-1px 1px 4px #aaa'" onmouseout="this.style.boxShadow='-2px 2px 8px #aaa'" alt="button"></a></div>

そしてこちらが、投稿記事内用の横長バナーのコードと完成画像です。

<!-- CarlosBlogの横長バナー -->
<div class="banner_CarlosBlog_content" style="position: relative; width: 100%; margin: 0 auto; border: 8px solid #fff; box-sizing: border-box;" onmouseover="this.style.cursor='pointer'"><a href="https://ricango.com/carlosblog/" target="_blank"><img src="https://ricango.com/images/banner_CarlosBlog_content.png" alt="Carlos Blog" style="display: block; width: 100%;"><img src="https://ricango.com/images/button_banner_CarlosBlog_sidebar.png" style="width: 25%; position: absolute; bottom: 8%; right: 5%; border-radius: 20px; box-shadow: -4px 4px 16px #fff; transition: .2s;" onmouseover="this.style.boxShadow='-2px 2px 8px #fff'" onmouseout="this.style.boxShadow='-4px 4px 16px #fff'" alt="button"></a></div>

手順5: サイトに設置する

晴れて完成したバナーを、サイトに設置します。

まず、必要な画像ファイルをFTPでサーバーの指定箇所にアップロード。WordPressならメディアにアップロードするのも一つの方法です。

いずれの方法も、アップロード先のURLを確認して<img>タグのリンク先を変更しておきましょう。

あとは、設置したい場所に作成したタグをそのままコピペしてやるだけでOKです。

WordPressのサイドバーであれば、カスタムHTMLでそのまま貼り付けてやりましょう。

また投稿記事内であれば、テキストエディタ―で好きな箇所に貼り付けることができます。

バナー作成はそこまで難しくない

いかがだったでしょうか?

一人ですべて作るには、ある程度のデザインの知識とHTML・CSSの知識が必要なので、少し圧倒される人もおられるかもしれませんが、

実際のところ恐ろしく高度なテクニックを使っているということは全くありません。

その気になれば、まったく無知な方でも数週間程度で習得可能な技能です。

もし気になる方がおられたら、ご自分のブログで試してみてくださいね。

また、もし僕のブログをバナー設置して紹介して頂ける心優しい方がおられましたら、ぜひお問い合わせお願いします

最後に、今回バナー作成した友人のブログはこちらになります。

それではまた次の記事で!チャオチャオ~!

Scroll Up