アメブロカスタマイズ記事編：記事のリンクを目立たせてクリック率を上げよう♪

アメブロでランキングやアクセス数を意識する事はとても大切です。

ビジネスブログといてアメブロを活用されている方ならほとんどジャンル登録をして
ランキングやアクセス数を意識されていると思います。

アメブロのランキングはブログ管理の「ブログデータ・アクセス解析」のグラフの
PV（総アクセス）数の数字からランク付けされます。

UU（アクセス者）数の数ではありません。

例えば
■Aさんが1つの記事を読んでくれた　⇒　PV数　１　　UU数　１
■Aさんが1つの記事を読んでその中の1枚の画像をクリック　⇒　PV数　２　　UU数　１
■Aさんが1つの記事を読んで、他の記事へのリンクをクリックその中の1枚の画像をクリック　⇒　PV数　３　　UU数　１

というカウントになります。

ランキングアップには読者を増やすだけではなく
いかに他のページや写真をクリックしてもらうかが重要になってきます。

そこで、記事ないのリンクや、画像をクリックしてもらいやすいページにカスタマイズしていきます。

CSSの編集画面を開く

まずは、CSSの編集画面を開いて下さい。


「ブログを書く」＞サイドバーの「ブログデザイン」の「デザインの変更」＞「CSSの編集」をクリックします。


※前回の記事文字を読みやすくしてみようで加えた以下のCSSに、今回新たに追加していきます。

/* その他、拡張があれば記述 */ .articleText {     font-size: 125%;     line-height: 180%;     color: #555555; }

▼前回の記事に、今回のカスタム用にリンクと画像をつけたしました。
--------------例文：スティーブ・ジョブズの卒業生に贈るメッセージ一部抜粋--------------

私はリード大学を６ヶ月で退学しましたが、本当に辞めるまで18ヶ月ほど大学に居残って授業を聴講していました。ではなぜ辞めることになったか？その理由は私が生まれる前に遡ります。私の生みの母親は若い未婚の大学院生でしたので、彼女は私を養子に出すことを決めていたのです。彼女は育ての親は大学を出ているべきだと強く感じていたため、ある弁護士の夫婦が出産と同時に私を養子として引き取ることになっていました。ところが、私が生まれる直前に、本当に欲しいのは女の子だと。そういういきさつで、養子縁組を待っていた今の両親は夜中に「予想外に男の子が生まれたので欲しいですか？」という電話を受けたのです。彼らは「もちろん」と答えました。しかし、生みの母親も後で知ったことですが、母親は大学を出ていない、父親は高校も出ていませんでした。そこで、生みの母親は養子縁組の書類へのサインを拒みましたが、何ヶ月か経って、今の両親が将来私を大学に行かせると約束してくれたので、気持ちが整理できたようです。これが私の人生の出発点になったのです。
記事の文字を読みやすくしてみよう

-----------------------------------------------------例文終わり----------------------------------------------------

CSSを編集する

CSSに修正箇所を追加します。
追加箇所は前回追加した箇所の「.articleText」の後になります。

.articleText a {     font-size: 130%;     font-weight: bold;     color: #CC0000; } .articleText a:hover img {     border: #F8F8F8 5px solid !important; }

カスタマイズ後はこの様に変わります。

--------------例文：スティーブ・ジョブズの卒業生に贈るメッセージ一部抜粋--------------

私はリード大学を６ヶ月で退学しましたが、本当に辞めるまで18ヶ月ほど大学に居残って授業を聴講していました。ではなぜ辞めることになったか？その理由は私が生まれる前に遡ります。私の生みの母親は若い未婚の大学院生でしたので、彼女は私を養子に出すことを決めていたのです。彼女は育ての親は大学を出ているべきだと強く感じていたため、ある弁護士の夫婦が出産と同時に私を養子として引き取ることになっていました。ところが、私が生まれる直前に、本当に欲しいのは女の子だと。そういういきさつで、養子縁組を待っていた今の両親は夜中に「予想外に男の子が生まれたので欲しいですか？」という電話を受けたのです。彼らは「もちろん」と答えました。しかし、生みの母親も後で知ったことですが、母親は大学を出ていない、父親は高校も出ていませんでした。そこで、生みの母親は養子縁組の書類へのサインを拒みましたが、何ヶ月か経って、今の両親が将来私を大学に行かせると約束してくれたので、気持ちが整理できたようです。これが私の人生の出発点になったのです。
記事の文字を読みやすくしてみよう

-----------------------------------------------------例文終わり----------------------------------------------------


CSSを修正した後はリンクのテキスト文字は太くなり、色も目立つようになりました。

合わせてカーソルが画像の上にのった場合のCSSも追加しています。


リンク(拡大)のついた画像の上にカーソルをのせてみて下さい。

画像に枠が付く事で以前より断然目立ちます。

まとめ

以上で修正は終了です。


リンクのテキストを修正したい場合は「.articleText a」の記述

大きさ「font-size」
色「color」
を編集して下さい。
太字をやめたいなら「font-weight」の行を消して下さい。


また、カーソルが重なった時の画像の枠が不要な場合は「.articleText a:hover img{}」の部分を全て削除して下さい。


リンクがわかりやすくなったでしょうか。

もし、ページが変わらない様であれば、もう一度CSSをチェックしてみて下さい。

特に、半角スペースの空いている所と「!important」は注意が必要です。

また、わかりにくい所があれば、コメントで気軽に質問して下さい。