株式会社ドリル Home > アメブロカスタマイズ > その他のカスタマイズ > 【アメブロカスタマイズ】読者数の文字を大きくしてみよう – 読者数アップがアメブロ成功の第一歩

【アメブロカスタマイズ】読者数の文字を大きくしてみよう – 読者数アップがアメブロ成功の第一歩

たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》

2013 01 08 1911

 

こんにちは、ドリル 鈴木です。
今回はアメブロの成功に欠かす事のできない、読者数のカスタマイズに関して説明します。

 

アメブロを成功させるには読者数を増やす事がとても大切です。
その為には、読者登録してもらう必要があり、読者登録ボタンのデザインを変えたり、大きくしたり、配置を変更したりする事は効果に直結するカスタマイズになります。

 

ただし、読者登録ボタンのカスタマイズは若干難易度が高いため、まずは読者数をカスタマイズし、目立たせる事で興味を引く様にします。
それでは、スタートです。 

 

カスタマイズを始める前に

今回のカスタマイズは読者数のデザインをカスタマイズし、読者数が目立つ様にします。
これによって、読者が増えた際に興味をもって「登録してみようかな」と言う様に誘導します。

特に読者が増えた時に効果を発揮するカスタマイズなので、早い段階でカスタマイズしておく事をお勧めします。

今回は読者数の表示の「読者数:○○人」の文字サイズを大きくし、さらに人数の表記は大きく太く、文字の色も変えています。

 

CSSの編集画面を開く

2013 01 28 1526

 

まず、CSSの編集を行いますので、CSS編集画面を開いて下さい。
「ブログを書く」>サイドバーの「ブログデザイン」の「デザインの変更」>「CSSの編集」をクリックします。

 

修正前のページとCSS

先に修正前のページになります。
CSSの修正箇所は元のCSSには記述されていないので一番最後に追加して下さい。

2013 02 10 2042

2013 02 10 2112

 

CSSを編集して、読者数のデザインをカスタマイズする

それでは早速修正後のCSSになります。
「CSSの編集」 の一番最後に追加し下さい。

.readerHeader {
    font-size: 120%;
}
.readerHeader em {
    font-size: 210%;
    font-weight: bold;
    color: #CC0000;
}

修正完了後のページは以下の様な表示になります。
表示が大きく変わったの一目でわかると思います。 

2013 02 10 2047

 

まとめ

以上で今回の修正は終了です。

.readerHeader」で登録数全体のデザインを修正し、さらに「.readerHeader em」で人数のデザインだけを変えています。

em」とは本来「強調」の効果を持つHTMLタグです。
人数にはそのタグがついているので、そこのCSSを編集する事によって人数だけのデザインを周りと変える事ができるのです。

それぞれに「font-size」で文字の大きさを変え、さらに 「.readerHeader em」の「color」によって人数の色だけを変えています。
あとはあなたのお好みに合わせて調節して下さい。

ちなみに人数の文字サイズは「読者数:○○人」全体のさらに何倍という扱いがされ、元々の大きさの何倍ではありません
間違いやすい所なので注意して下さい。 

 

 

予想通りに表示されたでしょうか?
わかりにくい所があれば、ぜひ気軽にコメント質問して下さい。

 

以上、鈴木でした。

 

コメントを残す

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