「読者になる」ボタンをカスタマイズしたいと思う方は多いと思います。
*CSSカスタマイズテンプレートでないとカスタマイズはできませんのでご了承ください。
ディフォルトのボタンとオリジナルボタンでは読者が受けるイメージが全く違います。
ここでは、読者になる、ボタンをカスタマイズする方法をご紹介していきます。
*私は独自で作成しているテンプレートを使用しています。この読者ボタンをカスタマイズする方法は、2カラム右側サイドバーのみで設定しております。
カスタマイズには、CSSを編集していますので、カスタマイズする際には、必ずCSSを何らかの形でバックアップしておいてください。
コピーしてメモ帳などに貼り付けておくことをお勧めします。
読者になるボタンカスタマイズ方法
アメブロログイン後、マイページ→ブログを書く→デザインの変更を選択
デザインの変更にて、CSSの編集を選択
ブログデザインのCSSの編集画面にて、ブログデザインヘッダ・背景用画像の追加の場所で読者になるボタンにしたい画像をアップロードします。
読者になるボタンの画像、サイズは決まっており、横260px縦87pxにしてください。
画像をアップロードしたら、ブログデザインヘッダ・背景用画像の追加に先ほどアップロードした画像が表示されると思います。
画像のアップロードはこれで完了です。
画像をアップロードすることができたら、CSSを編集していきます。
*編集前に必ずバックアップ取ってください
バックアップをとりましたら、CSSの下のほうに
/*
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
(4) その他、拡張
＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊:::＊
*/
の欄があると思います。その下にコードを追加します。
/*
*******************************************************************
！！!読者登録ボタンスを設定します！！！
*******************************************************************
▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼▼
*/
.readerMenu .readerBtn {
width: 260px;
height: 87px;
background-color:#F3F3F2;
background-image: url(画像パスに変更);/* 画像パスに変更してください */
text-indent: -9999px;
margin-bottom:12px;
}
/*
▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲
*/
この、コードをコピーしましたら、画像パスを変更と書かれている部分を削除し、画像のパスをアップデートした画像のに張り替えてください。
手順
・先ほどアップロードした画像のURLをコピー。
・コピーしたら、background-image: url(画像パスに変更←消して先ほどの画像パスを貼り付け);/* 画像パスに変更してください */
これらが完了したら、プレビューで確認するか、保存ボタンを押して終了してください。
もし編集完了に保存ボタンを押し、赤色で何か警告を受けたら、もう一度やり直してください。
複数のアメブロのページを開いていると稀にエラーが起きることがあります。
*テンプレートをカスタマイズする際は自己責任でお願いします。