やぁみんな元気かい？
ほどほどに元気なF.Jackだよ
僕はこのはてなブログを無料で使ってるから
広告とかが表示されてはいるんだけど
僕自身は貼ってないんだ
でもこのブログの右サイドバーを見ると
色んなバナーが設置してあるよね？
これを覚えておくと色んなことに使えるから
オリジナルバナーを作ってはてなブログに貼る方法は
身に付けておくべきだと思うんだよ
いつもよりボリュームが多くなったので
記事もいつもよりギュッとなってます
はてなブログでのオリジナルバナーの貼り方
さてさて、このオリジナルバナーは
一体何に使えるんだ？って話しなんだけど
このバナーを貼る理由としてはこんな感じ
・読んで欲しい記事へのリンク
・他で運営しているサイトへのリンク
・商品のレビューページへのリンク
・プロフィールへのリンク
色々な活用用途があるけど
主にこんな感じだって覚えてね
例えば僕の場合は他サイトへのリンクになるんだけど
こんな感じでバナーを貼ることで
他サイトのアクセス収集に繋がるし
サイト間を行き来してもらうこともできるんだ
僕のこのはてなブログへの入り口は
他のブログには設置してないんだけどねw
それからもし記事の中でも
「これだけは読んで欲しい！！」
って思う記事があったら
それはバナーを設置するべきなんだ
検索結果で上位表示されたりしてない限り
関連記事とかに頼ったりカテゴリに頼ってても
読んでもらいたい記事なんて見つけてもらえないからね
だからサイドバーにオリジナルのバナーを設置して
読んでもらいたい記事を強調することで
その記事にアクセスしてもらおう
さて、前置きはここまでにして
オリジナルバナーを作ってこうじゃないか
オリジナルバナーを作る
まずは貼るにしても画像が無きゃダメだよね
ってことでまずは自分でブログのイメージに合った
もしくは記事の内容に合ったオリジナルバナーの
画像を作っていこうじゃないか
バナーの画像によって
ブログの雰囲気もガラッと変わるから
自分のブログの雰囲気に合うようにしようね
まずは無料の画像素材を
ネットで検索して見つけてこよう
ついさっきこんな記事を投稿してみたから
商用利用可で無料の画像素材を見つけるのに
活用してもらえると嬉しいよ
もちろん自分でどこかで撮影した
オリジナルの写真とか自分で書いた絵でもOK
というかそれ理想だね
じゃあ僕はここでは例として
この画像を使ってくよ
・・・えっ？
他に無かったのかって？
いいじゃない、インパクトあってw
で、画像が準備できたら文字を入れるよ
Windowsならペイント、Powerpointがあると最高だね
macならプレビューでも文字入れが出来るんだけど
ネットで探すとオンラインで画像の編集ができる
こんなサービスとかもあるから使ってみるのもいいかも
ってことで今回は試しにこのFotorを使って
さっきの画像に文字入れしてみたよ
何も言わせないよ？
ちなみに僕のこのブログのバナーは全部
スマホで作ってるんだ
理由としてはパソコンじゃないから
仕事の休憩時間とかちょっとした合間に
サクサクッと片手間に作れるから
ってことが大きいかな
あとは使ってみると色々機能もあるし
なかなか使い勝手も良いんだ
もし良かったら使ってみるといいよ
はい、じゃあこれで画像ができたから
次はいよいよ出来た画像をバナーにしよう！！
画像をブログのサイドバーに設置することで
ブログの印象もガラッと変わるし
読んでもらいたい記事へと誘導ができるから
是非ともやってもらいたいし
そんな難しいことじゃないから安心してね
バナー画像をサイドバーに設置する準備
はてなブログのサイドバーに
オリジナルバナーを設置する準備として
次のものを用意しよう
・画像のURL
・リンク先のURL
・HTMLタグ
基本的にはこの３つでOK
というか僕はコレ以外知らない
じゃあ１つ１つ手に入れていこうか
１．画像のURL
画像ごとにURLが設定されてるから
そのURLをコピーしておきたいんだけど
僕が話している方法以外に
もっと簡単な方法があったら是非
僕にも教えて欲しい
じゃあまず、はてなブログの記事投稿画面を開こう
さっき作ったバナーを投稿画面の中に
ドラッグ＆ドロップするか「＋写真を投稿」から
選択して記事内に貼付けていこう
そしたら画像を選択して右クリックすると
「画像アドレスをコピー」ってのが出てくるから
これを選んで画像のURLをメモ帳とかにコピーしておこう
※GoogleChromeの場合
２．リンク先のURL
リンクしたい記事を開いて
ウィンドウの上に記載されてる
リンク先のURLをコピーして
これもまたメモ帳とかに貼っておこう
後で見て解らなくなっちゃうといけないから
「記事：http://◯◯◯◯.com」
「画像：http://◯◯◯◯◯◯.com」
こんな感じでメモしておくと良いと思うよ
３．HTMLタグ
このHTMLタグってやつを
サイドバー内に設置することで
オリジナルバナーを貼れる訳なんだけど
あんまり難しいこと考えずに
これを使ってくれていいよ
<a href="リンク先URL" target="_blank"><img src="画像URL" border="0" width="95%" height="" /></a>
どこに何を入れるのかは解るよね？
width="95%"ってのが画像の幅で
height=""ってのが画像の高さ
僕のブログではこの設定になってるけど
自分のブログデザインに合うように
好きに弄っちゃってくれ
バナーをサイドバーに貼付けよう
じゃあいよいよ全ての材料が揃ったことだし
はてなブログのサイドバーにバナーを設置しよう
まずははてなブログのメニューから「デザイン」を選択
「サイドバー」を選択してみると
今サイドバーで使っている項目が一覧されて
その一番下には「モジュールを追加」
ってのがあるからそれをクリックしよう
そうするとどんなモジュールを追加するのか
選択、編集ができる画面が出てくるから
「HTML」をクリックして
モジュールのタイトルとさっき作っておいた
オリジナルバナーのHTMLタグを貼付けよう
モジュールのタイトルは画像の上に表示されるアレね
入力が完了したら、この画面の下にある
青い「適用」のボタンを押してみよう
これでサイドバーにバナーが設置されたのが
プレビュー画面で表示を確認できると思うんだけど
もし表示されてなかったりおかしくなってたら
HTMLを見直してみよう
それからこのサイドバーの位置は
ドラッグして変えることができるから
好きな位置に移動させておこう
この時点ではまだはてなブログに反映されてないから
最後に必ず「変更を保存する」をクリックして
ブログに反映させようね！！
オリジナルバナーの応用編
最後にこのバナーの貼り方を覚えると
他でも使える場面があるんだ
それが記事内でも使えるってことなんだ
記事投稿画面の「HTML編集」を選んで
そこにさっき作ったバナーのHTMLを入れると
そのままオリジナルバナーが反映されるから
バナーのHTMLはメモ帳とかに保存しとくのも有りだね！
まぁ、あんまり意味は無いんだけどねw
だってそんなバナーを記事内に貼るなんて
画像を選択してコレで良いもんね！！
以上でオリジナルバナーを
はてなブログのサイドバーに設置できた！！
お疲れさま！！
いやいや、ちょっと頑張って書いたでしょ？w
この記事が一体どれだけの人の為になったのか
あんまりわかんないんだけど
もし良かったらブックマークするなり
強く押すなり色々としてくれてもいいよ？
コメントくれてもいいよ？
愛してくれてもいいよ？
イラッとしたら強く押す
F.Jackを愛するなら優しく押す
