前置き
こんばんは。うつ坊である。
またアドセンス落ちた。
どれだけ清楚なんだ……。
現在3浪目である。
直してもう一度申請した。
そういえば初詣に行っていない。
神頼みでもしておいたほうがいいだろうか。
お願いします、彼女なんていらないからアドセンスに合格させてください……。
いやそれなら彼女が欲しいわ。
オリジナルバナー
今日はブログ村オリジナルバナーの作り方を話そう。
動くのもあるぞ。
以前調べたところブログ村TOP10のうち九つのブログがオリジナルバナーだった。
人気ブログにオリジナルバナーは付き物だ。
みんなもバナーを自作して人気ブロガーになろう！
収益がなくても人気ブロガーは名乗れますか？
1.動かないやつ
まずは動かないバナーからだ。
好きな画像を用意したらこちらのページを開こう。
1.の欄で画像のファイルかURLを指定する。
あとは指示に従っていき「合成後のバナー画像を表示」をクリックしよう。
その次の画面でバナーを作成すればOKだ。
簡単だなあ！
2.動くやつ
次は動くやつだ。
今回作るのはオンマウス仕様である。
つまり、マウスを乗せると変化が起きるタイプだ。
早速バナーのコードを載せよう。
<a href="ブログ村カテゴリーのURL" target="_blank"><img src="マウスが乗る前の画像のURL" onMouseOver="this.src='マウスが乗ったときの画像のURL'" onMouseOut="this.src='マウスが外れた後の画像のURL'" width="320"></a>
それぞれ好きな画像のURLを入れよう。
マウスが外れた後の画像は乗る前の画像と同じでもいいと思うぞ。
アップロードだが、はてなブログユーザーならはてなフォトライフを使うといい。
ブログに画像を載せるときのアップロード先はここである。
上部のマイフォトを開くとこんなバーがあるはずだ。
こちらの「Hatena Blog」をクリックしよう。
すると、これまでブログに載せてきた画像の一覧が表示されると思う。
そうしたら「アップロード」ボタンを押して好きな画像を二つ指定しよう。
指定したらアップロードだ。
これではてなフォトライフに画像が置かれた。
元の画面に戻ったら、「フォルダを編集」ボタンを押す。
一つ目の画像のチェックボックスにチェックを入れよう。
次にこちらの「ブログに貼り付ける」ボタンを押す。
そうすると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.ブログに載せる
できたコードを試しに記事下に載せてみよう。
はてなブログのデザイン画面を出す。
「記事」タブを開くと「記事下」という欄がある。
そこにさっきのコードをコピーする。
変更を保存してブログに戻ってみよう。
記事の一番下にバナーが設置されているはずである。
マウスを乗せたり外したりしてちゃんと動けば成功だ。
コードのwidthの欄は表示結果を見て調整するといいぞ。
お疲れ！
終わりに
以上である。
注意点として、バナーに使う画像はクリックミスを誘発するものであってはいけない。
ちゃんとブログ村のバナーだと分かるものを使おう。
あとはてなフォトライフへのアップロードは記事編集画面からもできるぞ。
「写真を投稿」ボタンから可能だ。
私も動くオリジナルバナーにしてからちょっとだけINポイントが増えた。
みなさんも是非作ってみよう。
それでは今日はこの辺で。
神様に彼女を願うかアドセンスを願うか。
うーん……。
どっちもください！
