月間１０万PV突破も、アドセンス収益のみ。。
マリブのブログを始めて早10ヶ月。。
ようやく月間10万ＰＶを越せるようになってはきたが、どうも収益が思う様についていかない。。。
忙殺される日々の中でなんとか記事の更新を続けてはきたが、グーグルのアドセンス収入は毎月ようやく振込額をギリギリクリア出来るレベル。
アフィリエイトは途中から始めると何だがマネタイズを必死になって始める姑息さが出てしまう気がしたので始めの記事から張っていたが、150記事を更新しても僅かに成約は２件。。。
「まさか、ここまで収益が出ないとは・・・」
と打ちひしがれていた自分に、よく自分のブログを見てくれている後輩が意外な言葉をかけてきた。
「・・もうすぐウォーキング・デッドも再開されるから僕もそろそろ先輩のブログからHuluに入ろうと思うんですけど、コレ、どっから登録するんですか？」
・・・正に青天の霹靂。。。
自分ではほぼ全ての記事からきっちりかっきりリンクを飛ばしていたつもりだったのだが、どうも色が問題だったようだ。。
iPhoneを巧みに使いこなすネット時代の申し子のような２０代の彼とは違い、自分の記事は毎回パソコンからUPしている。
読者の流入は俄然スマホからの検索流入が多いので日々確認は欠かさないでいたつもりだったが、その傲りが盲点だった。
レスポンシブ対応のデザインテーマ「Under Shirt」を使用してはいたが、遊び過ぎたPCのデザインに足を引っ張られて読み込み速度が遅くならないように敢えて同期せずシンプルなデザインのまま残しておいていたら、どうも細かいCSSが反映されていない模様。。
今回はそんなブログカスタマイズに疎い自分が、うっかり１０ヵ月間も放置し続けてしまっていたスマホ用のリンクテキストの変更の仕方を紹介してみる。
成約率に直結するリンク色
「リンクテキストの色の問題じゃなくて、オマエの記事がヘタクソだからじゃ・・」
なんて声が聴こえてきそうだが、ここは胸を張ってあえて言わせてもらう。
それはこの記事を書くキッカケにもなったのだが、スマホ用のリンク色を変更して僅か５日で、３件のVOD契約が成立した。。。
１０ヵ月＝約３０４日間かけて２件だった成約率が、５日で３件。。。
やっぱりリンクは見た目。。ヒトも見た目。。。
単純な事の様だが、ブログのマネタイズを真剣に考えるならば、ここは拗ねている場合じゃない。
大手のサイトを見てみても、
| サイト | リンク色 |
| #1a0dab | |
| Yahoo! | #1d3994 |
| Bing | #001ba0 |
| YouTube | #167ac6 |
| Amazon | #0066c0 |
と見事に青系統色が占めている。
ネット上では#0044CCがヒトに一番安心感を与える色としてリンクテキストに有用な様だが、そんな中、可愛らしいネーミングがやけに気に入ってしまい、遠い昔にリンク色を若竹色にしたまま忘れていた自分があまりに情けない。。。
はてなブログ用。スマホ画面でのリンクテキストの変え方
強調色は蒲葡（えびぞめ）。映画のタイトルは萌葱色（もえぎいろ）。
ドラマは瑠璃色（るりいろ）で、台詞は柳染（やなぎぞめ）にしよーかなーなんて記事を書きながら遊んでいた自分は、それでもなんとなく、PC上でのリンク色は紺碧色（こんぺきいろ）で落ち着いていたつもりだった。
・・まあ、少々くすんだ色合いの青の方が、自分には合っているかと・・・
けれども、それが１０ヵ月もの間スマホ画面に反映されなかった原因は、ブログ初心者が陥りがちな複数箇所でのスタイル指定によるCSSの競合にある。
とは言え、今更ブログテーマを変更でもしない限り、何処にあるか全く分からなくなってしまったリンクテキストの指定を探しだすのはあまりにメンドクサイので、手っ取り早くスマホ用のコードを。
<style type="text/css">
a{/*リンクされた文字*/
color:#0044CC; /*色の指定*/
font-style:normal;
}
a:link {/*未訪問のリンク*/
color:#0044CC;
font-style:normal;
text-decoration:none;
}
a:visited {/*訪問後のリンク*/
color:#81c784;
text-decoration:none;
}
a:hover {/*マウスオーバー時*/
color:#bbdbf3;
text-decoration:underline;
}
a:active {/*クリック中*/
text-decoration:none;
}
</style>
上のコードの青色部分を下のサイトを参考に好きな色に変換。
更に緑色の部分を変更すれば、動作環境も指定できる。
none ・・・テキストの装飾をしない。（初期値）
underline ・・・テキストに下線を引く。
overline ・・・テキストに上線を引く。
line-through ・・・テキストに取り消し線を引く。
これをコピペし、デザイン➡スマートフォン➡ヘッダー➡タイトル下（“スマートフォン用にHTMLを設定する”のタグに〇が入っているトコロ）に入れるだけでOK。
・・けれど、意外にこんな単純なコトをネット上ではあまりちゃんと教えてくれているサイトが少ないんですよね。。
プロブロガーには当たり前過ぎるブログ初心者への試練なのか？ なんて・・ｗ
はてなブログでは基本的に、
<style type="text/css">
から
</style>
の間にCSSを書き込めば、PCと同期しなくても大抵の動作はHTML内で指定できるようになるので、初心者は覚えておいた方が良いかも。
・・自分のように、大切な収益を逃し続けてしまわない為にも・・・
