ポンコツでも出来る!自分のサイトのバナーを作ってみたよ

ポンコツでも出来る!自分のサイトのバナーを作ってみたよ

こんにちは。

今回は簡単なバナーの作り方を説明したいと思います。

そもそもバナーとは?という方にバナーを中学生でも分かるように説明しますと、画像を押すと違うサイトに行くアレです。




例えばこんなやつ。きっと皆見たことある。

 

実はコレ、自分でも簡単に作れるのですよ。

ということで、このサイトのバナーを作ってしまいました!

無料簡単に出来るので、今から紹介していきたいと思います。

 

バナーにする画像を準備する

先ほどのバナーの画像部分を作成していきます。

画像を用意するのはスマホでもかまいません。

まずはバナーのサイズを決めましょう。多くのバナーは横長です。

サイズ見本を載せましたので、これを参考にどれぐらいのサイズがいいかを考えてみて下さい!

 

468×60


 

350×80



 

300×250


 

234×60


 

88×31


必ずしもこのどれかのサイズにしないといけないという訳ではありませんが、世間に出回っているバナーの大体はこれくらいの大きさのものです。

今回私は300×200にしてみました。

ですが、あとで縮小した方が画像の編集もやりやすいので、画像を作成する段階からこのサイズにするのではなくて、縦横比だけ任意のバナーサイズと同じにしておくといいと思います。

 

サイズにおおよその目星をつけたら、画像を作っていきます。

今回私は簡単にスマホで写真を撮って画像編集アプリ「Fotor」を使って文字を入れました。

関連記事

https://pom5252.com/fotor/

 

はりぼてですが、ぱっと見おしゃれそうな画像が出来ました。

このとき後で縮小することを考えて文字は大きめにしました。

これを当サイトのバナーにします。

 

よくあるバナーっぽいバナーや、目を引くものにしたかったらもっと派手派手にするべきですね。

なんてったって読者さんはバナーの画像に惹かれてクリックするのですから、この画像が興味をそそるものではないと意味がありません。

 

ちなみに今回は自分のブログに貼り付けるためのバナーなので、デザイン重視にしています。

 

 

サイトのURLと画像のURLを取得しておく

ここからはPCを使って作業していきます。

リンクを貼る前の下準備として、ホームページのURLとバナーにする画像のURLを用意しておきます。

それぞれコピーしてPCのメモ帳などに書き留めておきましょう。

画像のURLの取得方法

色々方法はありますが、ブログをやってる方などは自分のブログに画像を載せるとき同様にアップロードしてそこからURLを確認するという方法がわかりやすいかと思います。

私の場合、画像をアップロードして詳細を開いたら次のような画面が出てくるので、そこからURLをコピーしてメモしておきました。

矢印が指しているのがURLです。

ついでに画像も先ほど決めておいたサイズ(300×200)に縮尺しておきます。

ここで縮尺したほうが簡単でわかりやすいのですが、出来なくてもHTMLタグで変更可能なのでそのままでも大丈夫です。

 

 

画像にリンクを貼る

「画像にリンクを貼る」というのは、「画像を押すだけで違うサイトに飛べるようにする」ということです。

HTMLタグという機械的な言語を使って画像にリンクを貼っていきます。

ここではHTMLの意味が分からなくても全く問題ないです。とりあえず文字列と捉えとけばOK。

 

 

さて、URLがわかったらHTMLタグを生成していきます。

画像にリンクを貼り付けるタグはこちらです。

<a href=”サイトのURL” target=”_blank”><img src=”画像のURL“></a>

このタグのサイトのURLというところにホームページのURLを入力します。

画像のURLのところに先ほど確認した画像のURLを貼り付けます。

先ほど画像を縮尺しなかった人はここで画像のサイズを変えるタグを入れておきます。

<a href=”サイトのURL” target=”_blank”><img src=”画像のURL” width=”横幅” height=”高さ“></a>

ここで任意のサイズを入力しておきます。

 

メモ帳でコピペしながらやっていくとやりやすいです。

完成したら試しに上手く出来ているか試してみましょう。

こちらのサイト「おーくりんくす」でお試しできますので、コピペして試してみましょう。

 

私もやってみました。するとこのような画面が出てきました。

 

(真っ白でわかりにくくてすみません)

カーソルが写っていませんが、画像にカーソルを合わせると矢印で指したように移動先のURLが出てきます。

クリックして飛んでみてちゃんと自分のサイトが表示されたら成功です。

自分のバナーが完成しました!おめでとうございます!

 

 

おまけ・タグをサイトに貼ってみよう

せっかく作ったバナーをどこかに貼ってみましょう。

私ははてなの自分のブログのサイドバーに試しに貼ってみました。

 

じゃじゃん。

なかなかいいのでは。

 

これはブログのデザイン>カスタマイズ>サイドバー>HTMLタグを開いて先ほど作ったタグをコピペしました。

多くのブログがデザイン設定のカスタマイズ的なところにサイドバーをいじれるところがあると思うので、適当にそのへんを探ってみましょう。

 

 

以上雑でしたがバナーの作り方を簡単に説明しました!

わかりにくいところもたくさんあったとは思いますが、割と簡単に出来るので自分のサイトのバナーを持っていない人は作ってみてもいいのではないでしょうか・・・!

 

まあ、貼るところがあるかどうかはまた別の話になってきますが・・・(世知辛いですね)

もし私のバナーを自分のブログに貼ってもいいよ、という方がいたらぜひコメントで教えて下さいm(_ _)m(笑)