アメブロの読者登録ボタンをオリジナルバナーに張り替える方法



ブログの基本は見てもらいたい場所を目立たせる事です。

例えば、申し込みページを見てもらいたい場合は申し込みページへのリンクを目立たせると効果的。

これと同じ考え方で読者を増やしたい場合は読者登録ボタンを目立たせると良いのです。

 

読者登録ボタンの初期設定は非常にシンプルなボタンです。

しかし、このボタンを画像にカスタマイズすると他のブログとは少し違った印象のボタンになって目に付きやすくなります。

スポンサーリンク

 

読者登録ボタンに使える画像を準備

まずは画像の準備が必要です。

画像が無ければ素材配布サイトなどから画像を探してダウンロードしましょう。

どうしても画像が見つからない場合はこちらでオリジナルのボタン画像を制作する事も可能です。

 

ボタン画像をアメブロの画像フォルダにアップロード

画像の準備が出来たら、画像をアメブロの画像フォルダにアップロードしましょう。

アップロードは以下の方法で行います。

 

1:画面右上にある「メニューアイコン」をクリック

読者登録を解除する具体的な方法

 

2:「画像フォルダ」リンクをクリック

ボタン画像をアメブロの画像フォルダにアップロード

 

3:画像フォルダ画面で「ファイルを選択」ボタンをクリック

ボタン画像をアメブロの画像フォルダにアップロード

 

4:パソコンに保存している画像を探す

ボタン画像をアメブロの画像フォルダにアップロード

 

5:画像を選択して「開く」をクリック

ボタン画像をアメブロの画像フォルダにアップロード

 

6:画像のタイトルに「ボタン」と入力して「アップロード」ボタンをクリック

ボタン画像をアメブロの画像フォルダにアップロード

※画像のタイトルは自由に決めてもらっても大丈夫です

 

これで読者登録ボタンに使う画像のアップロードが完了です。

 

アップロードしたボタン画像のURLを取得(コピー)する

ボタン画像をアップロードすると画像のURLを取得できます。

URLを取得して読者登録ボタンとして設定する必要があるので以下の方法で画像のURLを取得しましょう。

 

1:画像フォルダページを開いて読者登録ボタンとして使用する画像を探す

 

2:画像を見つけたら「記事に追加」をクリック

アップロードしたボタン画像のURLを取得(コピー)する

 

3:タグ編集エディタに変更して以下の選択部分を同じように選択し、右クリックでコピーする

アップロードしたボタン画像のURLを取得(コピー)する

 

アップロードしたボタン画像のURLを取得(コピー)する

これでボタン画像のURLの取得(コピー)が完了です。

 

 

取得した画像URLをCSSに貼り付けてオリジナルの読者登録ボタンにする

読者登録ボタンを画像に差し替えるにはCSS編集テンプレートに変更が必要です。

テンプレートを変更したら「CSSの編集」を選択してCSSの一番下に以下のコードをコピーして貼り付けましょう。

コード内の「■■■ここにボタン画像のURLを入力■■■」の部分に先程コピーした画像URLを差し替えてからコードをコピーしましょう。

.readerRequestBtnArea .readerBtn{
height : 50px;
width : 150px;
text-indent :-999px;
overflow:hidden;
position: relative;
z-index: 999;
}
.readerRequestBtnArea a{
background-image :url(■■■ここにボタン画像のURLを入力■■■);/* 通常表示するボタン画像 */
background-position :center top;
background-repeat :no-repeat;
}
.readerRequestBtnArea a:hover{
background-image :url(■■■ここにボタン画像のURLを入力■■■);/* マウスが乗った時に表示するボタン画像 */
background-position :center top;
background-repeat :no-repeat;
}

 

読者登録ボタンをオリジナルバナーに変更する方法はここで紹介したやり方で簡単にできます。

少しでも読者が増えるように読者登録ボタンを変更しておきましょう。


スポンサーリンク