タグ: サイドバー

サイドバーに広告を貼るとPCから来た読者の目に付きやすいし、収益が上がる人も多いですね。

私はアドセンスのリンク広告と自動広告で表示される広告2個付けていますが、クリック回数もそこそこ多いですね。

設定自体は簡単なので、収益化の為にやっていきましょう。

サイドバーに広告を貼る方法

サイドバーにはASPのバナーリンク・テキストリンク、そしてアドセンスを貼る方法があります。

ひとつづつ解説していきますね。

アドセンスの広告設定

まずアドセンス管理画面に入り、左にある「広告」→「広告ユニットごと」をクリックします。

すると今使える広告が表示されるのですが、サイドバーに付けるのはディスプレイ広告かリンク広告ですね。

関連コンテンツも使えますが、広告が多すぎるので使わない方がいいかなと思います。

まずはディスプレイ広告の設定方法です。（ユニット名以外は扱わなくても大丈夫です）

1. ディスプレイ広告をクリック
2. 広告ユニットの名前を入力（場所が分かる名前なら何でもOK・例はスペル間違いですが気にせずに！）
3. 広告のタイプ（正方形・横長・縦長）を選ぶ
4. 広告サイズをレスポンシブか固定を選ぶ（レスポンシブ推奨）
5. 作成ボタンをクリック

次ページの、HTMLコードをコピー。

「ダッシュボード」→「デザイン」→「カスタマイズ（レンチマーク）」→「サイドバー」→「モジュールを追加」→「HTML」にコピペ。

タイトルに、Sponsored Linkなどの名称を忘れないようにしましょう。

以上です。

リンク広告も同じように、

1. ユニット名
2. 広告のタイプ（スクエア・横長）
3. 広告サイズ（レスポンシブ・固定）
4. テキストの色
5. 背景の色

を設定し、HTMLコードを同じ場所に貼り付けるだけです。

バナー広告の設定

 バナー広告もアドセンス広告と同じで、「サイドバー」→「モジュールを追加」→「HTML」で、ASPからHTMLコードをコピペするだけです。

ASPにまだ加入していない場合は、無料なのですぐにやっておきましょう。

• もしもアフィリエイト
• A8.net
• バリューコマース

例えばもしもアフィリエイトの場合は、この様に進めます。

１　TOPページから「プロモーション検索」→「提携中プロモーション」をクリック

２　広告を貼りたいプロモーションの「広告リンク取得」をクリック

３　バナー広告が表示有されると思うので、ここで好きなサイズのバナーを選びます。

４　リンク(ソース)をコピーし、はてなブログに行き、「ダッシュボード」→「デザイン」→「カスタマイズ（レンチマーク）」→「サイドバー」→「+モジュールを追加」

次に先ほどのコードをコピペします。タイトルは空欄でもいいし、「稼ぐならはてなPro」とかでもいいと思います。

また、バナーを真ん中に持ってくるために、<center>ASPのHTML</center>のようにcenterで囲うといいですよ。

テキストリンクの入れ方

テキストリンクを入れたい場合も、同じです。ASPのテキストリンクのHTMLコードをコピペしたらOKです。

「テキスト」を選び、ソースをコピーします。

同じくはてなブログに行き、HTMLモジュールを追加してペーストします。

テキスト広告は、自分で文言を決めれる「自由テキスト」か、決められた文を使うテキストがあります。自由テキストは記事内に入れる時に「記事になじんだ文にできる」のでおすすめですが、サイドバーの場合は公式ページへのリンクが多いと思うので、どちらでも構わないと思います。

まとめ

簡単に設置できるのですが、バナー広告が多いと重くなるのでほどほどにしておきましょう。

wordpressで有名な画像遅延読み込み・Lazy loadもはてなで使えるので、やっていたほうがページ読み込み速度が遅くならないので良いと思います。

こちら、はてなブログでLazy loadをコピペで設定を参考にどうぞ。

パソコンから読者来た場合、サイドバーを追従（固定・追尾など色々な名称があります）していないとスペースがあまって不格好だなと思っていたのですが、はてなブログを使っている人は簡単にCSSだけでサイドバーの追従ができますよ。

以前Googleが「広告は追従しちゃダメ」なんて言っていましたが、今は解禁になっているので、アドセンスの広告も入れることが出来るし、他にもカテゴリを入れたり、おすすめ記事を追従したりと、好きなもの何でも固定できます。

コピペで出来るので2分あれば完成します。

サイドバーを固定（追従）する方法

これは当然PCのみですが、サイドバーを追従するカスタマイズです。

読者が記事を読み進めて下の方に行くと、サイドバーって見えなくなりますよね？なので、モジュールを追従するように設定してあげます。

これはサイドバーの最後のモジュールを追従する方法なので、下図のように固定したいモジュールをサイドバーの最後に持ってきてください。

まずは「デザイン」→「カスタマイズ」→「サイドバー」に行き、好みの項目をサイドバーの最後に持っていきます。私は、「アフィリンクもOK」というASPのHTMLを貼り付けたものです。（サイドバーに広告を貼る方法はこちらからどうぞ）

次に以下のコードを、フッタにコピペしてください。

<!–サイドバー固定–>
<script>
$(window).load(function() {
var sideLast = $(“.hatena-module”).filter(“:last”);
var sideLastTop = sideLast.offset().top + 450;
var sideLastWidth = sideLast.width();
var win = $(window);

win.scroll(function(){
if(win.scrollTop() > sideLastTop) {
sideLast.css(“position”,’fixed’);
sideLast.css(“top”,’20px’);
sideLast.css(“width”,sideLastWidth);
}else{
sideLast.css(“position”,’relative’);
};
});
});
</script>

するとこんな感じになっていると思います。

 

最後に

ほんとに2分で終わったでしょ？

他にもいろいろなカスタマイズを紹介しているので、こちら「はてなブログのカスタマイズ集・すべてコピペでOK」も一緒にどうぞ。

はてなブログのサイドバーって味気がないですよね。

何と言うか、無機質で面白みがないというか・・・

ということで、今日はコピペで簡単にできるサイドバーカスタマイズの方法を紹介します。

サイドバーのカスタマイズ

下の写真の左側がオリジナルで、右がカスタマイズ後です。（PC版）

スマホ版も同じですが、こんな感じです。

サイドバーはPCではかなり見られるので、クリックされることが多いのですが、カスタマイズしていないと無機質すぎてクリックする気にもなりませんよね。

サイドバーのカスタマイズコード

はっきり言ってかなり簡単なので、1分もかからずに終わると思います。

貼り付け場所は、「ダッシュボード」→「デザイン」→「カスタマイズ」→「デザインCSS」になります。

/* サイドバータイトル  */
.hatena-module-title {
    position: relative;
    color: #00bfff;
    font-size: 120%;
    font-weight: bold;
    margin-bottom: 15px;
    padding: .25em 0 .25em 0;
    font-family: 'Lucida Grande', 'segoe UI', Verdana, Arial, sans-serif;
    border-bottom: 2px solid #00bfff;
}

 

4行目のcolor: #00bfff;（文字色の変更）と、10行目のborder-bottom: 2px solid #00bfff;（下線の色変更）の赤色部分を変更すると、好きな色にできます。

カラーコードはHTMLカラー大辞典をどうぞ。

10行目のborder-bottom: 2px dotted #00bfff;の赤文字をsolidからdottedに変えると、上のような線になります。

Profile画像の変更

上でも紹介したように、プロフィール部分はこのようにしました。（ビーチの写真はただの例です）

これはひと手間あるのですが、オリジナルのプロフィールは結構ダサいので、替えた方がいいかなと思います。

まずは、管理画面の右上にあるボタンを押し、はてなフォトライフをクリックします。

次にアップロードを押し、「クリックしてファイルを選択するか～・・・」をクリックして画像をアップロードします。次に、フォルダを編集をクリック。

「このフォルダの写真を編集」と書いてある画面に今までアップロードした写真などが表示してあると思うので、今アップした写真をクリックし、「ブログに貼り付ける」を押すと、下の画像の様にHTMLタグが出てきます。

このHTMLタグをコピーし、「ダッシュボード」→「デザイン」→「カスタマイズ」→「サイドバー」に行き、「モジュールを追加」→「HTML」に貼り付けます。

もし「読者になるボタン」が必要な人は、以下の様にしてコードを取得します。

「ダッシュボード」→「設定」→「詳細設定」に行き、下の方に行くと「読者になるボタン」とそのコードが書かれているのでこれをコピペし、先ほどのHTMLタグの下に貼り付けます。

最後に自己紹介を書いて、それを<p></p>で囲めば完成です。

私の場合はこんな感じです。

最後に

サイドバーはパソコンだと視認率が高いので、ぜひおしゃれにして読者にもっとクリックしてもらいましょう。

サイドバーのカスタマイズは、私も参考にしたminimal greenのサイトにたくさん載っているので、こちらも参考にしてみて下さい。

今回ようやく記事数が６０を超えたので、ご褒美としてブログのカスタマイズにちょっと時間を割こうといろいろやっていると、サイドバーに画像付きのリンクを貼る方法がかなり簡単だったので、ご紹介します。

はてなブログのカスタマイズを検索すると、いろいろなものが出てきますよね？

かなり昔の記事で、仕様が変わっていて分かりにくかったり、なんか面倒臭い感じだったりと。HTMLの知識があれば別ですけど、私は全然わからないので苦労しています。

今回ご紹介する方法は、簡単、早い、知識いらずで、出来ますので皆さんもやってみて下さい。

サイドバーにリンク付き画像挿入方法

上記写真のようになり、画像をクリックすると指定したリンクに飛びます。

画像付きだと、ちょっとオシャレになりますね。

やり方は2通りあって、１つははてなフォトライフを使うものと、投稿ページを使ってやる方法です。

私はいつもはてなフォトライフで圧縮するのでフォトライフを使いますが、使わない人は投稿ページからが簡単です。

それではまずは、一番簡単な投稿画面を使ったやり方から紹介します。

投稿画面を使う方法

まずは通常通りダッシュボードの「記事を書く」から編集画面に行き、サイドバーに使う写真をアップします。

写真のサイズは幅300～400くらいでOKです。あまり大きいとページが重くなるので。

写真を投稿したら、

1. 表示された画像をクリック
2. 左上のLinkマークをクリック
3. ポップアップが出てくるので、URLにリンク先のURLを入れプレビューをクリック（アフィリンクも入れれます）
4. 表示されたものを選ばずに「選択した形式でリンクを挿入」をクリック

次にHTML編集をクリックし、コードを表示します。

このコードの<p></p>以外の部分をコピーします。下の赤文字部分のみコピーですね。

このやり方の人は、次のはてなフォトライフのやり方を飛ばしてはてなブログの設定にどうぞ。（ページ下部に移動します）