新アメブロのカスタマイズ~サイドバーの読者登録ボタンを変更~

サイドバーの読者登録ボタンを変更

 

アメブロのヘッダー画像を自分だけのオリジナル画像に変えたいという方はこちら

 

これはアメブロの新しいスキン「css編集用デザイン」に対応しています。

今回のカスタマイズはアメブロのサイドバーにある読者登録ボタンを・・・

サイドバーの読者登録ボタンを変更

 

このようにオリジナル画像に変更します。

サイドバーの読者登録ボタンを変更

 

今回のカスタマイズではまずは読者登録用のボタンを用意する必要があります。

読者登録のボタン

 

ボタンを簡単に作成することができる無料ソフトでお勧めなのはInkscape

Inkscapeのダウンロードや使い方はこちらをご覧下さい。

サイドバーの大きさ(横幅)は180pxもしくは300pxです。

ボタンを作成する際には、横幅が180pxもしくは300px以下のサイズで作成してください。

 

それではカスタマイズ開始。

「ブログを書く」⇒「アメブロを書く」⇒「画像フォルダ」で、作成した画像をアップロードしておきます。

記事の上に読者登録のボタンを設置

 

次に「ブログを書く」⇒「デザインの変更」⇒「CSSの編集」とクリック。

 

そしてcss編集欄の一番下までスクロールさせ、以下を全てコピペし各所を編集、保存します。

.readerMenu a.skinImgBtnS{
width:300px;/* ボタンの横幅 */
height:60px;/* ボタンの高さ */
text-indent:-9999px;
background-image:url(ここにアップロードした画像のURL);
background-repeat:no-repeat;
background-position:center 0px;
display:block;
}
.readerMenu a:hover.skinImgBtnS{
background-position:center –60px;/* ボタンの高さ */
}
.readerMenu .skinMenuBody{
padding:0px;
margin:0px;
}

赤字のところは人によって異なるのでそれぞれ編集してください。

サイドバーの読者登録ボタンを変更

 

たったこれだけでカスタマイズ完了。

 

人気ブログランキングで今何位?

アメブロのヘッダー画像を無料で作成

  • このエントリーをはてなブックマークに追加

【PR】話題のラインスタンプを自分で作って販売する方法

ブログランキング応援していただけると嬉しいです↓

にほんブログ村 釣りブログ バスフィッシングへ にほんブログ村 釣りブログ 東海釣行記へ にほんブログ村 釣りブログへ

この記事の著者

kazushi釣りと生き物をこよなく愛するWEBデザイナー

釣りと焼酎が好きなWEBデザイナー。夜な夜な真っ暗な部屋で水槽を眺めながら呑んでいます。最近のマイブームはハンドメイドルアー制作。琵琶湖のほとりでひっそりとWEB制作事務所を営んでいます。

この著者の最新の記事

関連記事

カテゴリー

アーカイブ

インスタやってます

ページ上部へ戻る