【はてなブログカスタマイズ】これだけやっておけば収益化出来るんじゃない?総まとめ!!

f:id:uwasanoaitsu:20160404155406p:plain

スポンサーリンク

http://www.flickr.com/photos/58168654@N00/188124400

photo by shrk

ツイキャスというラジオ配信のようなことが出来るWEBサイト上でひたすら趣味のトレーディングカードゲームについて語ってしまい、視聴者が離れていきましたwww

どうも、だいちゃん(∀)です。

このブログ「だいちゃん.com」は、ほとんどの記事を障害者について書いてきました。でも何故か、最近ちょろっと書いたブログ運営論についての記事がバズりまして(アクセスが多くて)、

ブログ14万PVで、約5万円の収益があったので、ブログ運営論と一緒に証拠も載せて公開します!

「もしかしてワイのブログ運営論って需要ある?」

と少し調子に乗っています。なので、ちょっとの間は試験的にブログの運営論やカスタマイズなどについて書いていこうと思います。

今回はブログのPVを伸ばす為に、「関連ページ」を表示させましょう!

スポンサーリンク


 ブログに関連ページを設定しよう!

このブログ「だいちゃん.com」では、フッター(一番した)のほうはこのような感じになっています。

ミリアード

(北九州市の『木村拓哉』って書いてあるところは笑うところな!)

こういう関連記事を設定することによって、他のページにも面白そうな記事があるじゃん! みたいになって、他のページも読んでもらえる。

すると、ブログのPVが増えるんですね~。

こういうのを設定していないと結局、他のページにどんな記事があるのか分からないので、とりあえず今読んでいる記事を読み終わったらこのブログから去ろう、みたいになってPVが伸びないんですよ。

【PVとは】

このブログにどのくらいのレベルの人が訪れているのか分からないので、基本的なお話をしていきますね。

PVとは、テレビで言う視聴率みたいなものです。

・1人の人が2ページ読んでくれれば、1人×2ページ=2PV

・2人の人が2ページずつ呼んでくれれば、2人×2ページ=2PV

となります。

なんでPVが多いほうがいいのか。

テレビだって長く見てくれている人が多い方が、CMをその分いっぱい観てくれることになりますよね?

ブログのPVが多いということは、それだけそのブログに対する滞在時間が長いということ。テレビを長く観てくれているのと同じような状況になります。

すると、広告(Google Adsenseなど)をクリックしてくれる確率があがるんですね~。

広告をいっぱい観てくれる人がいるブログのほうが、それだけ広告価値がある == そのブログに広告料を払う価値が高くなる == ブログの収益があがる

という仕組みです。

ほんと、ブログってテレビのようなメディアなのですよ。収益構造は全く同じ。

なのでPVを増やすことがブログ運営においては大切なのです。

Milliard関連ページというプラグイン

PVの話で前置きが長くなってしまいましたが、ブログの関連ページを設定する方法をご紹介していきます。

今回は、「はてなブログ」に絞ってカスタマイズ方法を説明していきます。タイトル通りですね(笑)

まず、下記のリンクの内容にそって「Miliard関連ページ」というプラグイン(ようはプログラム)を設定します。

corp.shisuh.com

このまま挿入するだけでも利用出来るのですが、そのままだと縦にずらっと並ぶだけです。

10ページ分縦に並べるより、5ページ分ずつ2列にしたほうが見栄えも良いので、今回は私のブログのように2列にしていきます。

下記リンクの「ゆきひー」さんのブログを参考にこのブログは2列にしています。

www.yukihy.com

ここに載ってあるCSSを設定しましょう!

CSSは、ダッシュボードから設定します。

はてなブログ

「デザイン」をクリック

はてなブログ

真ん中のスパナマークをクリックすると一番下にCSSを記述できる場所が現れます。

「デザインCSS」をクリックして、中にゆきひーさんのブログの中にあるCSSを記述してください。

一番下に書き込んでおけばOKです。

その際、

/*関連ページのCSS*/

という感じに/* */でメモを書き込んであげていると見やすいですよ!(/* */で囲まれた部分は”コメント”という扱いになって、CSSとしてコンピューターが認識しないのです!)

これで、パソコン版の関連ページの設定は終わりです。

残念なことに、「Milliard関連ページ」というプラグインはレスポンシブデザイン(パソコンとスマートフォン共通のデザイン)にしていない限り、スマートフォンのデザインには使えないのです。

スマートフォン版の関連ページ

スマートフォン側には、「太陽がまぶしかったから」さんの「あわせて読みたいG」を使用しています。

bulldra.hatenablog.com

はてなブログ

スマートフォンマーク→記事→記事下

ここに池田仮名さんのブログにあるコードを挿入することでスマートフォン側にも関連ページ(合わせて読む)を表示させることが出来ます。

パンくずリストを設置しよう!

いつもお世話になっている「太陽がまぶしかったから」さんの記事から拝借いたします。

設定方法は下記リンクを参考にしてください。

bulldra.hatenablog.com

TOP > ネット関連 > まだブログ有料サロンで消耗してるの?

こんな感じでトップ画像の下の方に「今現在、どのカテゴリーのどの記事を読んでいるのか」が分かるようになっています。

このパンくずリスト、侮れないんですよ。

これは「サイトマップ」といって、WEBサイト内がどのような作り(家でいったら間取り)になっているのかをグーグルさんに知らせてくれる役割があります。

グーグルさんは、作りの分かりやすいWEBサイトの評価を高く見ていると言われています。なので、パンくずリストを設置するとSEO(グーグルの検索エンジン対策)に強くなると言われています。

なので、絶対に設置しましょう。

SNSボタンなどのカスタマイズをしよう!

SNSボタンやフォローボタンのカスタマイズ

デフォルトでも使えないことはないのですが、なるべくオシャレに使いやすくしたほうがいいですよね。

私のブログは自分でいろいろカスタマイズしてしまっているので、私のブログと同じようにはならないのですが、下記WEBサイトを読めばSNSボタンやフォローボタンをオシャレにカスタマイズ出来ます。

いつもお世話になっている「いつ俺」さんです!

はてなブログに11種類から選べるSNSフォローボタンをコピペ+αで実装するカスタマイズ – いつ俺〜いつから俺ができないと錯覚していた?〜

コピペ一発!はてなブログのSNSシェアボタンをめっちゃオシャレにカスタマイズ! – いつ俺〜いつから俺ができないと錯覚していた?〜

続きを読むボタンのカスタマイズ

続きを読むボタンは必ず設置しましょう。

はてなブログ

「記事を書く」のここのボタンが「続きを読む」を挿入するボタンです。

でも、デフォルト(初期設定)だとなんだか見づらいんですよね。

そこで、下記リンクに載ってある設定を行うとコピペ一発で見やすい「続きを読む」ボタンになります!

コピペ一発!はてなブログの続きを読むボタンをめっちゃオシャレにカスタマイズ! – いつ俺〜いつから俺ができないと錯覚していた?〜

ブログの文章を読みやすくする為のカスタマイズ

そのままでもこれはいいような気がしなくもないですけど、ブログ記事の文字サイズを変更したい人などが施すと良いカスタマイズですね。

【コピペ+α】はてなブログで文章を読みやすくするカスタマイズ集 – いつ俺〜いつから俺ができないと錯覚していた?〜

カエレバ・ヨメレバのカスタマイズ

以前も紹介した、amazonアフィリエイトを行うときには絶対に使用したほうがいいツール、

カエレバ

ヨメレバ

この二つをオシャレにカスタマイズする方法も載っています。

コピペ一発!はてなブログでカエレバ・ヨメレバをオシャレにカスタマイズ! – いつ俺〜いつから俺ができないと錯覚していた?〜

トップへ戻るボタンの設置

参考にしたブログがあったはずだけれど、どのブログだったか忘れたので自分が記述しているものをここに書きます。

「それ、うちのブログのコードだよ!」

という方がいたらここでリンクを紹介させていただきますので、申し出ていただけると助かります(汗)

はてなブログ

デザイン→スパナマーク→フッタ

フッタに下記htmlを記述します。

<div id=”back-to-top”><a href=”#”>to TOP</a></div>

そして、一番下のCSSの欄に、

#back-to-top{
padding:5px 10px;
font-size:20px;
font-weight:bold;
background-color:rgba(0,0,0,0.3);
position:fixed;
right:5px;
bottom:5px;
border-radius:5px;
}
#back-to-top a{
color:#fff;
}
#back-to-top a:hover{
text-decoration: none;
color:#000;
}

と記述すれば完成です!

グローバルナビの設置

「いつ俺」さんのグローバルナビを外部からコードを調べて自分なりにカスタマイズしました。

【html】

<div id=”navigation”>
<ul class=”menu”>
<li class=”first”><a href=”任意のページのURL”><i class=”fa fa-home”></i> <span class=”global-text”>Home</span></a></li>
<li><a href=”任意のページのURL“><i class=”fa fa-user”></i> <span class=”global-text”>Profile</span></a></li>
<li><a href=”任意のページのURL“><i class=”fa fa-laptop”></i> <span class=”global-text”>障害者の記事</span></a></li>
<li><a href=”任意のページのURL” target=”_blank”><i class=”fa fa-twitter”></i> <span class=”global-text”>Twitter</span></a></li>
<li><a href=”任意のページのURL“><i class=”fa fa-envelope”></i> <span class=”global-text”>お問い合わせ</span></a></li>
<!– 他グローバルナビメニュー省略 –>
</ul>
</div>

 【CSS】

/*グローバルナビ*/
@media screen and (min-width: 1024px)

#navigation { width: 960px;}←ここは私のブログの全体の横幅が960pxだからこの大きさですが、自分のブログの全体の横幅にここの大きさは合わせてください。

#navigation ul{list-style: none;
margin: 10px 0 0 0;

padding: 0;}

#navigation li{
float: left;
width: 160px;←ここもブログによって要調整。
height: 80px;←ここもブログによって要調整。
list-style: none;
display: block;
text-align: center;
font-size: 20px;←ここもブログによって要調整。

}
-webkit-padding-start: 40px;
}

 はてなブログ記事内に広告を表示

相変わらず、「太陽がまぶしかったから」さんの記事を参考にさせていただきました。

bulldra.hatenablog.com

この記事の中に、 $(‘.entry-content h1:eq(0)’) この記述部分の「h1」というのを

「はてな記法」の場合には「h1」を「h3」に変更

とあるのですが、h3をh2に直してブログを書いている方は「h2」に変更をお願いします。

すると、

・記事の一番始め

・記事中

・記事下

にGoogle Adsenseが表示されます。この配置が一番収益があがる配置だと私は思っているので、よかったら参考にしてください。

広告の大きさは必ず「レクタングル大」で! 大きさは正義! クリックされやすくなるのと、大きい広告のほうがクリック単価が高いのです!

終わりに

はてなブログって色々な方が無料でコードを公開しているので、検索を駆使するだけで自分でカスタマイズ出来るものですよ。

記事の内容がわかりにくかったり、他の質問がある方はツイッターやメールなどで質問をいただければ(質問者が多くならない限り)質問に答えますよ!

だいちゃん(∀)大ちゃん@はてなブログ (@syusoretujitu) | Twitter

勿論、無料です!

はてなブログ運営に関するほかの記事も合わせて読むと、はてなブログ運営で必要な知識がだいたい身につくと思います。分からないところは質問してくださいね。(他、なんか書いたほうがいいことあったかな? なんか次から次へと書いたほうがよさそうなことが出てきてキリが無いんだけど……。)

え? あなた、

まだ有料ブログサロンで消耗してるの?

時代は無料相談を活用でしょう?

(ぶっちゃけ、勢いに任せて書いたからすげえ疲れた……。これ無料で読めるって自分でも凄くサービスしてるなって思うわぁ~。)

だいちゃん(∀)

The following two tabs change content below.

uwasanoaitsu

フリーライター・ハイパーメディアブロガー 1級身体障害者 年間500冊ほどの本を読む読書マニア。勉強好きの資格マニア。簿記や法律に強い。 暗い記事も書くけど、なんだかんだで自分の事をスーパー障害者だと思ってる変な人。お笑い好き。 炎上芸人。インターネット上の嫌われ者www

スポンサーリンク

このブログを気に入ったら「いいね!」をお願いします! 最新記事の情報をお届けします!


ブログ以外の落書き的な記事はこちらで書いています!
>>だいちゃんの落書き帳
>>だいちゃんのLINEブログ

スポンサードリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です