投稿者: レビューライター

はてなブログの記事のタイトルって、超シンプルですよね。

シンプルと言えば聞こえがいいですが、ダサいというか・・・

一番最初に読者の目に付く個所なので、重要ですよね。簡単にコピペでカスタマイズできるので、やっていきましょう。

記事タイトルのカスタマイズ

テーマにもよりますが、何もしていない記事タイトルはこんな感じですよね。

ちょっと、これ変えましょう・・・。以下に紹介するカスタマイズは、全て「ダッシュボード」→「デザイン」→「カスタマイズ（レンチマーク）」→「デザインCSS」にコピペします。

また、色を変える時のコードはこちら原色大辞典で探せます。

例１　こんな感じ↓のタイトルになります。

.entry-title {
font-weight: bold;
font-size: 25px;
padding: 10px 10px;
position: relative;
padding-bottom: .5em;
border-bottom: 4px solid #ccc;
}
.entry-title::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 4px;
background-color: #3498db;
}

 

7行目・border-bottom: 4px solid #ccc;　このccc部分を変えると灰色の下線の色が変わります。

最後のbackground-colorを変えると、青になっている部分の色が変わります。

例2　下線2本のタイトル

.entry-title {
font-weight: bold;
font-size: 25px;
padding: 10px 10px;
position: relative;
padding-bottom: .5em;
border-bottom: double 5px #FFC778;
}

 

例3　シンプルに左端に線を入れたもの

.entry-title {
font-weight: bold;
font-size: 25px;
padding: 10px 10px;
position: relative;
padding-bottom: .5em;
border-left: solid 5px #55ACEE;
}

 

例4　上下に線を入れてみました

.entry-title {
font-weight: bold;
font-size: 25px;
padding: 10px 10px;
position: relative;
padding-bottom: .5em;
border-top: solid 3px #000000;
border-bottom: solid 3px #000000;
  }

 

例5　下線のみのシンプルなもの

.entry-title {
font-weight: bold;
font-size: 25px;
padding: 10px 10px;
position: relative;
padding-bottom: .5em;
border-bottom: solid 3px #000000;
}

 

例6　タイトルの文字色を変えたもの

.entry-title {
color: #ff69b4;
font-weight: bold;
font-size: 25px;
padding: 10px 10px;
position: relative;
padding-bottom: .5em;
border-bottom: solid 3px #ff69b4;
}

文字の色を変える時は、colorの＃以降の文字を変えたら色が変わります。

最後に

他にもいろいろなカスタマイズを紹介しているので、下記リンクを参考にどうぞ。

はてなブログのカスタマイズまとめ

はてなブログで画像読み込み遅延・Lazyloadのカスタマイズ

はてなブログ・収益化のまとめ

執筆するにあたって、見出しは重要ですよね。中には上から下まで全部読む読者もいますが、サクッと調べたい人は流し読みをして、見出しのみをチェックする人もいますしね。

特に長い記事には、見出しが目立てばそう言った人にもちゃんと読んでもらえる可能性が上がりますね。

という事で、ちょっと目立つ見出しにカスタマイズしましょう。

見出しのカスタマイズ

オリジナルの見出しはこんな感じで、かなりシンプルですね。

大見出しを大きい枠にして、中見出し・小見出しをシンプルな線にしました。

このコードは、「ダッシュボード」→「デザイン」→「カスタマイズ（レンチマーク）」→「デザインCSS」に追加します。

見出し　例１

まずは大見出しからです。（コードはサルワカさんのコードを参照にし、ちょっと変えています）

h3 {
position: relative;
padding: 0.6em;
background: #00ffff;
border-radius: 15px;
}

h3:after {
position: absolute;
content: '';
top: 100%;
left: 30px;
border: 15px solid transparent;
border-top: 15px solid #00ffff;
width: 0;
height: 0;
}

4行目の「#ooffff」を変えると大見出しの背景の色が変わり、14行目の「#ooffff」を変えると見出しのとがった部分の色が変わります。

色は原色大辞典で調べることが出来ます。

5行目の「border-radius: 15px」の数字を変えたら、大見出しの枠の丸みの形が変わります。0pxは直角で、数字が大きいと丸くなっていきます。

次に中見出し、小見出しのコードです。

h4が中見出しで、h5は小見出しなので、数字を変えたら同じコードが使えます。

h4 {
background: linear-gradient(transparent 85%, #ffe4b5 80%);
}

赤文字部分を変えたら線の色が変わるので、お好きな色にしてみて下さい。

見出し　例2

次は、ちょっとクールな感じにしました。

h3 {
  position: relative;
  color: #ffffff !important;
  padding: 0.6em;
  background: #000000;
  border-radius: 0px;
}

h3:after {
  position: absolute;
  content: '';
  top: 100%;
  left: 30px;
  border: 15px solid transparent;
  border-top: 15px solid #000000;
  width: 0;
  height: 0;
}


h4 {
  background: linear-gradient(transparent 85%, #000000 80%);
}

h5 {
  background: linear-gradient(transparent 85%, #eb2121 80%);
}

 

見出し　例３

大見出しの形をちょっと変え、中見出しや小見出しの線も変えてみました。

h3 {
color: #FFFFFF;
  background: #000000;
  padding: 0.5em;
}

h4 {
  border-bottom: dashed 2px #000000;
}

h5 {
border-bottom: double 5px #000000;
}

このCSSがシンプルでまとまってるので、好きですね。

どのCSSも同じですが、backgroundやcolorと書いてある場所の＃以降の文字を変えたら色が変わるので、好きな色に変えて下さい。

色は原色大辞典で調べることが出来ます。

まとめ

他にもいろんなカスタマイズを紹介しているので、下記記事も読んでみて下さい。

• サイドバーを追従するカスタマイズ
• 目次のカスタマイズ
• 収益化方法のまとめ
• 画像遅延読み込みLazy Loadのカスタマイズ

はてなブログを始めた時は、色々な設定が必要ですね。

その中でもまずやっていた方がいいのは、サーチコンソールの設定です。

すぐにできるので、サクッとやっていきましょう。

サーチコンソールって何？

サーチコンソールってなぜ登録するのかですが、簡単に言うと、

1. グーグルに記事をインデックス（登録）
2. 検索順位の確認
3. 検索クエリの確認
4. サイトマップの送信

等が出来るからです。

記事を書いてもグーグルにインデックスされないと、読者が検索してもグーグルに表示されないから誰にも読まれなくなります。

簡単に言うと、「グーグルに記事を書いたから検索結果に表示してね」っていう登録ですね。

始めたばかりだと検索圏外なんて当たり前ですが、徐々に表示されるようになります。

また、ある程度のPV（ページビュー）があれば、検索順位や何クリックされたかも確認できるし、読者がどんな検索で記事にたどり着いたかも確認できるので、ウェブサイトを運営する人はみんな登録して、上位表示するために活用しているんですね。

はてなブログにサーチコンソールを設定する方法

１　まずはサーチコンソールにいき、今すぐ開始をクリック

２　メルアドを入力し「次へ」

３　パスワードを入力し「次へ」

４　再設定用のメルアドを設定してもいいし、後でやってもOKです。

５　はてなブログで作ったURLを入力し「続行」をクリック

６　所有権の確認は「HTMLタグ」が一番簡単な設定方法なのでこれを選び、タグをコピー。ここには後で戻ってくるので、閉じずにそのまま

7　はてなブログに行き、設定→詳細設定→headに要素を追加にタグをコピペし、左下にある「変更」をクリック

８　サーチコンソールに戻り、右下の「完了」をクリック

9　またこの画面に戻ってくるので、再度URLを入れ続行をクリック

10　所有権を自動確認しましたと表示されるはずです。次にプロパティに移動をクリック

11　まだなにもデータは表示されないですが、今後使っていくのでこのページをブックマークして完了です。

インデックスの方法

通常のインデックス方法

まずは記事を書いているのが前提ですが、ダッシュボード→記事の管理→右下のリンクボタンをクリックし、記事を表示します。

２　記事のURLをコピー

３　サーチコンソールの検索窓にURLのペースト

コンソール上部の検索ボックスに記事のURLを入れて、エンターキーを押す データ取得していますと表示されるので待ちます 登録されていませんとでるので、右下の「インデックス登録をリクエスト」をクリック OKをクリックして完了

始めたばかりのブログはインデックス登録まで数日かかることもあります。まずは気長に待ちましょう。

サイトマップからインデックスする方法

加筆時現在、上記の方法でインデックスしようとすると「ページの操作が一時的に無効になっています」と出ます。グーグルが何か変更しているみたいですね。

なので、サイトマップからインデックスしましょう。

まずは、サーチコンソールの「サイトマップ」をクリック

次に、「新しいサイトマップの追加」と書かれたところに自分のURLがあるので、sitemap.xmlと書いて送信します。

インデックスされる時間はサイトによりけりですが、早ければ数分でインデックスされることもあります。

インデックス済みか確認する方法

グーグルの検索窓に記事のURLを入れて検索します。この時、グーグルのトップページで検索すると自分のサイトに飛ぶので、一度何か適当に検索して、このページの検索窓にURLを入れて検索。

インデックス済みの場合は、記事が表示されます。 インデックスがまだの場合は、見つかりませんでしたと表示されます。

まとめ

おそらく10分もかからずにできたと思います。

他にもいろんな設定はあるので、こちらも併せて確認をどうぞ。

プライバシーポリシーのひな型と設定方法

グーグルアドセンスの申請方法とはてなの設定

 

ブログを初めて始める時ってわからないことが多いですよね。

何を書いたらいいの？SEOって？お金は稼げるの？そもそもどうやって始めたらいいの？

こんな疑問が湧いてくると思います。

今日は1から10まで初心者でもやっていけるように、紹介していきます。

そもそもはてなブログってどうなの？

ブログを始めるには、色々な方法がります。

はてなブログで始める。wordpressで、Seesaaブログ、アメブロなどありますが、収益化しやすいのははてなブログとwordpressですね。

日記を書くって人はアメブロでもいいと思いますが、せっかくこれからいっぱい時間を使ってブログを書くので、ご褒美が（お金）欲しいですよね。

私ははてなブログを3年ほど（今でも時々更新）、wordpressを3年ほどやっています。メインはwordpressですが、はてなってなんか愛着あるし、はてなブロガー同士の結束も固い感じがするので続けやすい面もありますよ。

はてなブログには無料版と有料版（Pro）があり、最初は無料版でやる人が多いですね。続くかどうかわからないのに、初めからお金かけたくないですもんね。

しかも始めるのも超簡単にできるので、今日からすぐにでも始めれますよ。

という事で、あれこれ考えずにまずははてなブログを開設しましょう。

はてなブログの始め方

ブログを書ける状態にするには簡単ですが、時間があればその他の設定もやった方がいいので紹介します。ただし、1時間くらいかかります。

まずはこちらはてなブログに行き、ブログを開設します。

1　「はてなID」を作成をクリック

2　Googleで登録、もしくはIDなどを記入します。（現在ノマドワーカーで海外にいるのでところどころ英語で表記されていますが、日本にいる人は全部日本語で書かれています）

IDは変更できないし、公開されるので本名を使う場合はご注意を。アルファベットでtaka530とかなんか名前っぽものやブログを表すものを入力 パスワード 登録を完了するメールが来るので、本物のメルアドを。

３　記入事項を確認し、登録をクリック

４　登録したメルアドに確認メールが来るので、文中のリンクをクリックして登録完了です。

5　ブログのURLと公開範囲を決める

• URL・・・最近は自分の名前を使う人も多いです。もしくはブログを表すようなURL。例）tanaka’s-blog・kosodate
• URLの後ろ部分がいくつか選べます。どれでもいいですが、hatenablog.comが一番ドメインが強いのでこれがいいかなと思います
• 公開範囲は後から変えることが出来るので、「全ての人に公開」でOKです

6　無料でブログを始めるをクリック

完成です。これで自分のブログが出来ました。もう今から書き始める事も出来ますが、もうちょっと設定をやっていた方がいいので、このままやってしまいましょう。

７　画面上部のリボン？マークを押して管理画面（ダッシュボード）に行きます

 8　基本設定をする

• 画面左の「設定」をクリック

設定を触る部分のみ解説しますね ブログ名（タイトル）を決める ブログのアイコンを作ってアップロード（時間がある時にやる） ブログの説明をする・例）はてなブログの始め方を紹介するブログです 編集モードは「見たままモード」がおすすめ コメントは、「誰でも」か「ユーザー」が最初はおすすめ コメント承認・チェックを入れる（私は入れ忘れです（笑）） 最後に「変更する」をクリック

９　詳細設定を設定（実際のページはもっと項目が多いですが、変更するところ・重要なとこのみスクショしてます。）

アイキャッチ画像は個別に設定するので触らずにOK Googleアナリティクスの設定はこちらを参考に サーチコンソールの設定 Bingウェブマスターの設定

ブログの概要・ブログの内容を記入。例）旅行ブログで世界一周旅行中です。 ブログのキーワード・今は重要視されていないので無記入でOK 検索を避ける・グーグルにインデックスしない場合はチェック

注）インデックスとは、グーグルが記事を読み込んで検索表示できるようにすることです。プライベートな事を書く人はチェックを入れた方がいいですが、普通はチェック無しで。

最後にはてなブックマークというはてなオリジナルのブックマークで、最初のうちはコメントがあると嬉しいので「表示する」がいいかなと思います。ただしページが重たくなるし、役に立つものでもありません。

これで詳細設定は完了です。次は「公開設定」です。

すべての人に公開でOKです。カスタムで公開範囲を決めることが出来ますが、最初は読者がいないので設定しても意味がないです。 引用設定は、どちらでもいいですが、チェックしていた方がいいです 変更するをクリック

これで完了です。

テーマをインストールする

これで初期の初期設定は終了です。が、このままだとブログがおしゃれじゃないのでテーマをダウンロードしましょう。

１　ダッシュボードのデザインをクリック

２　ページををスクロールダウンして「テーマストアでテーマを探す」をクリック

次のページでテーマを探せますが、最初は人気のテーマから選んだ方がいいですね。というのも、不具合などあったらすぐにググって情報を見つけることが出来るので、楽です。

私はこの中からInnocentを使っていますが、同じものを選んだ人はカスタマイズテンプレートを用意しているので、コピペでかっこよくカスタマイズできます。

こちら「Innocentのテンプレート」からフッタ以外の場所をコピペして使えます。フッタはProしか扱えないので、コピペすると2重でフッタが表示されます。

もしくはどのテーマでも使えるカスタマイズをどうぞ。

はてなブログ無料版？Pro？

はてなブログには今登録した無料版と、有料版Proの2種類があります。

詳しいサービス内容は公式ページのはてなブログProを見て欲しいのですが、大きな違いは以下になります。

Proは

• 独自ドメインを使える
• はてなブログの広告が出ない
• より多くのカスタマイズができる

と言う特徴があり、収益化しやすいです。

無料版でも稼げますが、Proの方が稼ぎやすいです。くわしくははてなブログの無料版で稼ぐ方法を読んでみて下さい。

Proにするなら1年コースが良いと思いますが、続ける自信がない人やwordpressに乗り換えするかもという人は1ヶ月コースがいいですね。

記事を書く

まずダッシュボードの「記事を書く」をクリックし、編集画面に行きます。

基本的に記事はこの順序で書きます。

大見出しはいくつでもいいですが、中見出し、小見出しもあるので活用していきましょう。ただし使わなくてもOKです。

各見出しの下に説明、解説文などを記入していきます。

書けたらプレビューで確認です。下の画像は、左が執筆中で、右がプレビューです。

あまり文字数にこだわらなくていいですが、最初は1000文字を目標に書いてみましょう。

文字の多さも大切なのですが、それよりも読者が知りたい事を的確に書いていたら300文字でも1位表示されるので、「何を書くか」を考えてやってください。

長々だらだらと脱線しながら書いても意味ないし、キーワードが多すぎてもグーグルに評価されないから上位表示されない可能性もあります。

私は5～6000文字のものも有れば、5～600文字のものも時々あります。サイトにもよりますが、平均したら2500文字くらいだと思います。

ちなみにジャンルによって書き方は変わるので、一概にどんな書き方が良いとは言えません。

私はブログやサイト10個ほど運営していますが、そのサイトによって構成も書き方も違います。起承転結がないものもあります。

よくブログ運営者が、「記事はこの様に書く」など教えていますが、あれはブログ運営を書きたかったら真似したらいいですが、そうでない限りはどうでしょうね？

まぁ、まずはうまくいっている人の真似をして、そこから自分で応用していけばいいと思います。

一つだけ言えることは、収益化目的のサイトであれば「この商品・このサービスを使ったらあなたの未来はこうなりますよ」という、「素敵な将来が見える」ように書くことが多いです。

SEOについて

SEOは一言では言いにくいのですが、Search Engine Optimizationの略で、検索エンジン最適化を意味します。

「意味わかんないよ」って思うかもしれませんが、実際は誰も正解を知らないので分かりません。（笑）

意味としては、「グーグルなどの検索エンジンが記事を理解しやすい様に構成する」ことで、言い換えたら「Googleや読者が理解しやすい様に記事を書く」ことです。

例えばタイトルにキーワードを左詰めに入れたり、見出しにもキーワードを入れるといった手法です。

キーワードとは？この記事で言えば、「はてなブログ」と「始め方」ですね。

グーグルなどで「はてなブログ　始め方」と検索した人に読んでもらえるようにキーワードを設定しています。

注）実際は、この記事はまとめページ的に多くのキーワードが入っているので、グーグル検索では上位表示されないと思います。

通常はキーワードを絞って2～3個を使い、記事を書きます。あまり多くの事を書くとグーグルが「書きすぎ！」って思い、評価が分散されるんですね。

まぁ、SEOについてはまだ始めたばかりなので、深く学ぶよりも、書きながら学んでいった方がいいと思います。

一番大事なことは、グーグルなど気にせずに、「読者の為になることを書く」です。

収益化の準備

まずはブログを始めたばかりなので、ASPに登録して収益化の準備をします。

ASPとはアプリケーション・サービス・プロバイダーの略で、サービスの仲介者です。

企業のサービスや商品を仲介して、コミッションをもらうために登録します。

下記おすすめASPの登録方法や使い方を画像付きで紹介しているので、全部登録しておきましょう。

• もしもアフィリエイト
• バリューコマース
• A8ネット
• アクセストレード

収益化についてはまとめページ・はてなブログの収益化方法にすべて書いているので、こちらで詳しく見て下さい。

あとは、はてなブログでお金を稼ぐ方法決定版！を参考にどうぞ。こちらでは、どのようにして稼ぐかを詳しく紹介しています。

さて、ASPの次はGoogle広告のアドセンスです。

今まで他人のサイトを見た時に、広告が出たことが無いですか？

こんなやつ↓です。（これは画像なのでクリックできません）

これを読者がクリックしたら、収益が上がるという仕組みです。

通常、0.5％のクリック率があれば平均と言われています。0.5％とは、1000ページビューあれば5回クリックされる割合ですね。

ちなみに、私は大体2％前後のクリック率があっています。

簡単ではないのですが、ある程度のPV（約1000PV以上/日）があり、読者の為になることを分かりやすく書いていたらこの様になります。

アドセンスのクリック率を2％まで上げたたった3つの方法に詳しく解説しているので、読んでみて下さい。

アドセンスの申請は5記事以上あれば受かると思うので、5記事書いたら申請していきましょう。

グーグルアドセンス申請方法とはてなブログの設定を参考にどうぞ。

まとめ

これでスタートラインに立ったので、これからは焦らずにゆっくりやっていきましょう。

私も実はブログだけで食べていけるようになるまで、1年半ほどかかりました。それまでは月5000円くらいの収益でしたね。

ある日意外なことに気が付いて方針を変えたら、月1回のアフィリエイト発生が週1回になり、2日に１回、そして毎日収益が発生、そして今では1日2万円くらいコンスタントに上がっています。

ブログって諦めなければ稼げるので、ぜひ頑張ってやっていきましょう！

待った、待った。「意外な事に気が付いて方針を変えた」の意外な事ってなに？

あ、言い忘れていました（笑）

こちら「はてなブログでアフィリエイトをしてお金を稼ぐ方法」に書いていますが、一言で言うと「心構え」です。

これを変えたら収益が爆上がりしました。

みなさんは、まずは記事を書いていきましょう！

ブログを書いていると表（Table）が必要な時ってありますよね。↓こんなやつですね。

シンプル
シンプル
シンプル

このTableってHTMLだけで作れるので、CSSをいじらなくてもいいんですよね。（頻繁に使うならスタイルをCSSに入れた方がいいかもしれないですが）

今日はいくつかサンプルを紹介するので、コピペして使ってください。カスタマイズ方法も一緒に紹介するので、自分好みの表も作れますよ。

表（table）の作り方

表の作り方の前に、もしOfficeのエクセルが使える人はそこからコピペしたら簡単にできるって知ってました？

もしくは動画をどうぞ。（別タブが開きます）

Officeがない人は、Microsoft Officeオンラインに登録すれば無料で使えますよ。

それではHTMLでの表記を紹介します。

まずはシンプルなものから。

シンプル
シンプル
シンプル

border＝の数字を大きくしたら枠の太さが変わります。

行数を増やす場合は、上の表のコードの<tbody></tbody>の間に

を足していけば、足した分だけ行数が増えます。

例えば上のコードに1回足したのがこれ、3ｘ4の表です。

3ｘ4
3ｘ4
3ｘ4
3ｘ4

では次は列を増やしたバージョンで4ｘ3です。

4ｘ3
4ｘ3
4ｘ3

これを5列6列と増やしたい場合はレスポンシブなのでちょっと面倒なのですが、<tbody></tbody>の間に入れるコードの％をちょっと変える必要があります。

4列	<tr> <td style=”width: 25%;”></td> <td style=”width: 25%;”></td> <td style=”width: 25%;”></td> <td style=”width: 25%;”></td> </tr>
5列	<tr> <td style=”width: 20%;”></td> <td style=”width: 20%;”></td> <td style=”width: 20%;”></td> <td style=”width: 20%;”></td> <td style=”width: 20%;”></td> </tr>
6列	<tr> <td style=”width: 16.6667%;”></td> <td style=”width: 16.6667%;”></td> <td style=”width: 16.6667%;”></td> <td style=”width: 16.6667%;”></td> <td style=”width: 16.6667%;”></td> <td style=”width: 16.6667%;”></td> </tr>
7列	<tr> <td style=”width: 14.2857%;”></td> <td style=”width: 14.2857%;”></td> <td style=”width: 14.2857%;”></td> <td style=”width: 14.2857%;”></td> <td style=”width: 14.2857%;”></td> <td style=”width: 14.2857%;”></td> <td style=”width: 14.2857%;”></td> </tr>

このコードを1つ足せば行が+１されるので、必要な分足していきましょう。

次は、こんな感じの表です。

20％	40％	40％
見出し
見出し
見出し

上で紹介した表の％を変えただけですが、左に見出しを入れる時はこんな感じがいいですよね。

ただしこれじゃ素っ気ないので、左の列の見出しの背景を変えます。

見出し１
見出し２
見出し３

background-colorの＃以降の数字を変えたら、背景の色が変わります。カラーコードは原色大辞典を参考に。

行を増やす場合は同じように、

を追加していけば行が増えます。

もしくは行に見出しを入れて背景色を変えると、こんな感じになります。

見出し1	見出し2	見出し3
A
B
C

見出し4個はこんな感じです。

見出し1	見出し2	見出し3	見出し4
A
B
C

見出しを5個にしたらこんな感じですが、レスポンシブなのであまり列が多いと見にくくなるので注意して使ってください。

見出し1	見出し2	見出し3	見出し4	見出し5
A
B
C

<tr style=”background-color: #e7f768;”>と記述してある箇所の赤文字部分を変えたら背景色が変更できます。

ちなみに文字を真ん中寄席にしたい場合は、面倒なんですよね。例えば↓こんな感じで左に寄っているHTMLは下の青枠のコードです。

真ん中に
したい

文字を真ん中に寄せる場合は、赤文字を一行一行足していかなくちゃいけません。wordpressだとショートカットキーで簡単なのですが、はてなはHTMLに記述しないと出来ないですね。

<td style=”width: 50%; text-align: center;“>真ん中に</td>
<td style=”width: 50%; text-align: center;“>なった</td>

まとめ

慣れたらすぐに列や行を足すことが出来るので、使ってみて下さい。

よく使う表はメモにコピペしておけばいちいちこの記事まで来なくていいので、使いやすいと思いますよ。

でも、やっぱり一番簡単なのはエクセルですね。

関連コンテンツが使えるようになったら、ようやくGoogleに一人前に認められた気がしますよね。

通常は記事下に入れることが多いですが、基本どこにでも入れることが出来、記事中、サイドバーなどHTMLで設定できるところであれば簡単に設定できます。

はてなブログでの設定方法を紹介するので、一緒にやっていきましょう。

関連コンテンツの設定方法

まずはアドセンスの管理画面から、「広告」➡「広告ユニットごと」➡「関連コンテンツ」をクリック

すると、コンテンツのカスタマイズというページに移動するので、各項目をチェックします。

ユニット名は「ブログ名+kanren」とかでいいと思います。ブログが増えた時にどのブログの関連コンテンツが収益を出しているか分かりやすいので、ブログ名は入れた方がいいですね。

私は以下の様に設定しました。

• ユニット名・・・「ブログ名+Kanren」などがおすすめ
• 広告オプション・・・「広告で収益化」がONになっているかチェック
• スタイル・・・デフォルトでOK（フォント・タイトルの色・背景変更可能）
• サイズ・・・デフォルト（レスポンシブ）

注）広告オプションの「広告で収益化」が最初はない人もいるみたいです。その場合は、下のようなマークが出てくるまで待ちましょう。

基本的にユニット名以外は扱わなくてOKです。

最後に「保存してコードを取得」をクリック。次ページに出てくるコードをコピーします。

次は、はてなブログでの設定です。

はてなブログの設定

先ほど保存したコードを、「ダッシュボード」→「デザイン」→「カスタマイズ（レンチマーク）」→「記事下」に貼り付けるだけです。

チョー簡単ですね！

お疲れさまでした。これで関連コンテンツは表示されるはずなので、ひとまず安心ですが、もうひとつついでに、CTRをチェックしてみましょう。

アドセンスの管理画面から確認すると、関連コンテンツを導入してから1か月後には0.7％上がりました。

アドセンスの管理画面の「レポート」→「広告ユニット」からどの広告がクリックされたか分かるのですが、関連コンテンツのクリックは多くを占めていました。

凄くないですか、コレ？

結局はコレなんです、コレ。

関連コンテンツが使えたらCTR上がっちゃうんですね。

追記）1年後には、CTRが2％まで上がりました。

0.5％くらいが平均と言われている中、かなり高くなったのですが、その方法を「クリック率を2％まで上げたたった3つの方法」で紹介しているので併せてどうぞ。

まとめ

最初にも言いましたが、記事下以外にも関連コンテンツを設定することが出来ますが、ちょっとやりすぎ感があるのでやらない方がいいかなと思います。

以前はそんなサイトも多かったですが、今ではほとんど見かけないですね。

パソコンから読者来た場合、サイドバーを追従（固定・追尾など色々な名称があります）していないとスペースがあまって不格好だなと思っていたのですが、はてなブログを使っている人は簡単に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」も一緒にどうぞ。

最近他のブログを読んでいると、読了時間が表示されたサイトがありますよね。

こう言ったものです。↓

個人的には必要ないかなと思うのですが、あったらちょっとおしゃれかなとも思い、やり方を探していたんですね。

そしたら簡単にコピペで2分でできたので、皆さんにも紹介しますね。

記事を何分で読めるかを表示するカスタマイズ

このカスタマイズはJava scriptを使うので、表示速度にちょっとですが影響します。

なので、すでに表示速度が遅い人や絶対にこれが必要って人以外は、無くてもいいかなと思います。

まぁ、ここは個人の自由ですね。

それでは今回参考にさせていただいたのは、すずろぐさんの記事です。ありがとうございました。

コードはこれになります。

<script type="text/javascript">
addEventListener('DOMContentLoaded', function() {
var wpm = 800;
var length = $('.entry-content').text().trim().replace(/[\n\r]/g,'').length;
var message = '<p style="font-size: 80%; color: #999999; text-align: right;">この記事は約'+ Math.ceil(length/wpm) +'分で読めます。</p>';
$('.entry-content').prepend(message);
}, false);
</script>

 

3行目のvar wpm = 800は、800文字を読むのに1分と計算しているので、自分で好きに変えることが出来ます。

5行目のfont-size : 80%は、文字の大きさです。大きくしたい場合は100％など好きに変えて結構です。

その横のcolorは＃999999としていますが、これも好きに変えてOKです。カラーはHTML色見本で調べることが出来ます。

また、この記事は約‘+ Math.ceil(length/wpm) +’分で読めます。の赤文字部分も変更可能です。

次にこのコードを、「ダッシュボード」→「デザイン」→「カスタマイズ（レンチマーク）」→「記事」→「記事上」にコピペします。

以上です。

言葉を変えて、「あなたなら1分で読めます」にしてみました。

最後に

おしゃれなので導入したい人は多いと思いますが、カスタマイズのし過ぎは表示速度に影響するので、ほどほどにしておきましょう。

また、カスタマイズしたコードや日付・場所はメモに書いて保存しておくと、整理する時などに助かりますよ。

コピペカスタマイズについては、はてなブログのカスタマイズ集（すべてコピペでOK）と収益化方法などのまとめで紹介しているので併せて読んでみて下さい。