うつ坊ブログ

うつ病純朴大学生の愉快なブログ

MENU

【ブログ村】マウスで動くオリジナルバナーの作り方

 

スポンサーリンク

 

 

前置き

こんばんは。うつ坊である。

またアドセンス落ちた。

どれだけ清楚なんだ……。

 

現在3浪目である。

直してもう一度申請した。

 

そういえば初詣に行っていない。

神頼みでもしておいたほうがいいだろうか。

お願いします、彼女なんていらないからアドセンスに合格させてください……。

 

いやそれなら彼女が欲しいわ。

オリジナルバナー

今日はブログ村オリジナルバナーの作り方を話そう。

動くのもあるぞ。

 

以前調べたところブログ村TOP10のうち九つのブログがオリジナルバナーだった。

人気ブログにオリジナルバナーは付き物だ。

みんなもバナーを自作して人気ブロガーになろう!

 

収益がなくても人気ブロガーは名乗れますか?

1.動かないやつ

まずは動かないバナーからだ。

好きな画像を用意したらこちらのページを開こう。

 

mypage.blogmura.com

 

1.の欄で画像のファイルかURLを指定する。

あとは指示に従っていき「合成後のバナー画像を表示」をクリックしよう。

その次の画面でバナーを作成すればOKだ。

 

簡単だなあ!

 

f:id:b0tchan:20190112183520j:plain

2.動くやつ

次は動くやつだ。

今回作るのはオンマウス仕様である。

つまり、マウスを乗せると変化が起きるタイプだ。

 

早速バナーのコードを載せよう。

 

<a href="ブログ村カテゴリーのURL" target="_blank"><img src="マウスが乗る前の画像のURL" onMouseOver="this.src='マウスが乗ったときの画像のURL'" onMouseOut="this.src='マウスが外れた後の画像のURL'" width="320"></a>

 

それぞれ好きな画像のURLを入れよう。

マウスが外れた後の画像は乗る前の画像と同じでもいいと思うぞ。

 

アップロードだが、はてなブログユーザーならはてなフォトライフを使うといい。

 

f.hatena.ne.jp

 

ブログに画像を載せるときのアップロード先はここである。

上部のマイフォトを開くとこんなバーがあるはずだ。

 

f:id:b0tchan:20190112181455p:plain

 

こちらの「Hatena Blog」をクリックしよう。

すると、これまでブログに載せてきた画像の一覧が表示されると思う。

 

そうしたら「アップロード」ボタンを押して好きな画像を二つ指定しよう。

指定したらアップロードだ。

これではてなフォトライフに画像が置かれた。

 

元の画面に戻ったら、「フォルダを編集」ボタンを押す。

一つ目の画像のチェックボックスにチェックを入れよう。

 

次にこちらの「ブログに貼り付ける」ボタンを押す。

 

f:id:b0tchan:20190112182017p:plain

 

そうするとHTMLタグ欄にこんなコードが書かれているはずだ。

 

<a href="http://f.hatena.ne.jp/b0tchan/20181226001348"><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/b/b0tchan/20181226/20181226001348.png" alt="20181226001348"></a>

 

この<img src="">内に書かれているのが一つ目の画像のURLだ。

同様にして二つ目、あるいは三つ目の画像のURLも調べよう。

 

そうしたら先ほどのバナーのコードに当てはめる。

これでバナーのコードは完成だ。

3.ブログに載せる

できたコードを試しに記事下に載せてみよう。

はてなブログのデザイン画面を出す。

 

f:id:b0tchan:20190112182709p:plain

 

「記事」タブを開くと「記事下」という欄がある。

そこにさっきのコードをコピーする。

変更を保存してブログに戻ってみよう。

 

記事の一番下にバナーが設置されているはずである。

マウスを乗せたり外したりしてちゃんと動けば成功だ。

コードのwidthの欄は表示結果を見て調整するといいぞ。

 

お疲れ!

終わりに

以上である。

注意点として、バナーに使う画像はクリックミスを誘発するものであってはいけない。

ちゃんとブログ村のバナーだと分かるものを使おう。

 

あとはてなフォトライフへのアップロードは記事編集画面からもできるぞ。

「写真を投稿」ボタンから可能だ。

 

私も動くオリジナルバナーにしてからちょっとだけINポイントが増えた。

みなさんも是非作ってみよう。

 

それでは今日はこの辺で。

神様に彼女を願うかアドセンスを願うか。

うーん……。

 

どっちもください!