ツイキャスというラジオ配信のようなことが出来るWEBサイト上でひたすら趣味のトレーディングカードゲームについて語ってしまい、視聴者が離れていきましたｗｗｗ
どうも、だいちゃん(∀)です。
このブログ「だいちゃん.com」は、ほとんどの記事を障害者について書いてきました。でも何故か、最近ちょろっと書いたブログ運営論についての記事がバズりまして（アクセスが多くて）、
「もしかしてワイのブログ運営論って需要ある？」
と少し調子に乗っています。なので、ちょっとの間は試験的にブログの運営論やカスタマイズなどについて書いていこうと思います。
今回はブログのPVを伸ばす為に、「関連ページ」を表示させましょう！
ブログに関連ページを設定しよう！
このブログ「だいちゃん.com」では、フッター（一番した）のほうはこのような感じになっています。
（北九州市の『木村拓哉』って書いてあるところは笑うところな！）
こういう関連記事を設定することによって、他のページにも面白そうな記事があるじゃん！ みたいになって、他のページも読んでもらえる。
すると、ブログのPVが増えるんですね～。
こういうのを設定していないと結局、他のページにどんな記事があるのか分からないので、とりあえず今読んでいる記事を読み終わったらこのブログから去ろう、みたいになってPVが伸びないんですよ。
【PVとは】
このブログにどのくらいのレベルの人が訪れているのか分からないので、基本的なお話をしていきますね。
PVとは、テレビで言う視聴率みたいなものです。
・１人の人が2ページ読んでくれれば、1人×2ページ＝2PV
・2人の人が２ページずつ呼んでくれれば、2人×2ページ＝2PV
となります。
なんでPVが多いほうがいいのか。
テレビだって長く見てくれている人が多い方が、CMをその分いっぱい観てくれることになりますよね？
ブログのPVが多いということは、それだけそのブログに対する滞在時間が長いということ。テレビを長く観てくれているのと同じような状況になります。
すると、広告（Google Adsenseなど）をクリックしてくれる確率があがるんですね～。
広告をいっぱい観てくれる人がいるブログのほうが、それだけ広告価値がある ＝＝ そのブログに広告料を払う価値が高くなる ＝＝ ブログの収益があがる
という仕組みです。
ほんと、ブログってテレビのようなメディアなのですよ。収益構造は全く同じ。
なのでPVを増やすことがブログ運営においては大切なのです。
Milliard関連ページというプラグイン
PVの話で前置きが長くなってしまいましたが、ブログの関連ページを設定する方法をご紹介していきます。
今回は、「はてなブログ」に絞ってカスタマイズ方法を説明していきます。タイトル通りですね（笑)
まず、下記のリンクの内容にそって「Miliard関連ページ」というプラグイン（ようはプログラム）を設定します。
このまま挿入するだけでも利用出来るのですが、そのままだと縦にずらっと並ぶだけです。
10ページ分縦に並べるより、5ページ分ずつ2列にしたほうが見栄えも良いので、今回は私のブログのように２列にしていきます。
下記リンクの「ゆきひー」さんのブログを参考にこのブログは２列にしています。
ここに載ってあるCSSを設定しましょう！
CSSは、ダッシュボードから設定します。
「デザイン」をクリック
真ん中のスパナマークをクリックすると一番下にCSSを記述できる場所が現れます。
「デザインCSS」をクリックして、中にゆきひーさんのブログの中にあるCSSを記述してください。
一番下に書き込んでおけばOKです。
その際、
/*関連ページのCSS*/
という感じに/* */でメモを書き込んであげていると見やすいですよ！（/* */で囲まれた部分は”コメント”という扱いになって、CSSとしてコンピューターが認識しないのです！）
これで、パソコン版の関連ページの設定は終わりです。
残念なことに、「Milliard関連ページ」というプラグインはレスポンシブデザイン（パソコンとスマートフォン共通のデザイン）にしていない限り、スマートフォンのデザインには使えないのです。
スマートフォン版の関連ページ
スマートフォン側には、「太陽がまぶしかったから」さんの「あわせて読みたいG」を使用しています。
スマートフォンマーク→記事→記事下
ここに池田仮名さんのブログにあるコードを挿入することでスマートフォン側にも関連ページ（合わせて読む）を表示させることが出来ます。
パンくずリストを設置しよう！
いつもお世話になっている「太陽がまぶしかったから」さんの記事から拝借いたします。
設定方法は下記リンクを参考にしてください。
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;
}
はてなブログ記事内に広告を表示
相変わらず、「太陽がまぶしかったから」さんの記事を参考にさせていただきました。
この記事の中に、 $('.entry-content h1:eq(0)') この記述部分の「h1」というのを
「はてな記法」の場合には「h1」を「h3」に変更
とあるのですが、h3をh2に直してブログを書いている方は「h2」に変更をお願いします。
すると、
・記事の一番始め
・記事中
・記事下
にGoogle Adsenseが表示されます。この配置が一番収益があがる配置だと私は思っているので、よかったら参考にしてください。
広告の大きさは必ず「レクタングル大」で！ 大きさは正義！ クリックされやすくなるのと、大きい広告のほうがクリック単価が高いのです！
終わりに
はてなブログって色々な方が無料でコードを公開しているので、検索を駆使するだけで自分でカスタマイズ出来るものですよ。
記事の内容がわかりにくかったり、他の質問がある方はツイッターやメールなどで質問をいただければ（質問者が多くならない限り）質問に答えますよ！
だいちゃん(∀)大ちゃん＠はてなブログ (@syusoretujitu) | Twitter
勿論、無料です！
こちらも合わせて読むと、はてなブログ運営で必要な知識がだいたい身につくと思います。分からないところは質問してくださいね。（他、なんか書いたほうがいいことあったかな？ なんか次から次へと書いたほうがよさそうなことが出てきてキリが無いんだけど……。）
え？ あなた、
まだ有料ブログサロンで消耗してるの？
時代は無料相談を活用でしょう？
（ぶっちゃけ、勢いに任せて書いたからすげえ疲れた……。これ無料で読めるって自分でも凄くサービスしてるなって思うわぁ～。）
だいちゃん(∀)