アメブロカスタマイズ辞典

「アメブロカスタマイズ」など多数のキーワードで検索順位1位を獲得する実績
ウェブ制作や集客コンサル、SEOコンサルなどのお仕事もお気軽にご相談ください!


テーマ:
自分で作れる、オリジナルカスタマイズが出来るブログパーツを作りました!

何故これを作ろうかと思ったのかというと、

ブログパーツってどれもこれも自分で変更出来ずにしばらくしたら飽きてきませんか?

そこを自分で変更出来る様にすれば、面白いんじゃないかと思い作ってみました!

どんなのかというと・・・

ブログパーツ

サンプルサイトのサイドバーに設置してみましたので、実物をご覧下さい!

サンプルサイト

これでインパクトあるペタボタンや読者登録ボタンが作れます!

しかも!

後ろで動いてる写真は自由に差し替え出来ます!

可愛い愛犬の写真や、綺麗な風景、自分の好きな写真を何枚でも入れれます!


設置も至ってシンプル!

コードをコピペするだけで難なく設置出来ます!

では早速使い方を説明します~


設置するボタンを選ぶ



いつもの様にボタンの素材は作ってますので、ご自由にお使いください!

ご自分で作れる方は透過PNGで画像を作って、CSSだけ持って返って下さい~

使う画像素材を右クリックで名前を付けて保存して下さい。
※同じ絵の薄い色と濃い色1セット2枚ですので、2枚とも保存して下さい。

[ 白バージョン ]

$アメブロカスタマイズ辞典 $アメブロカスタマイズ辞典

$アメブロカスタマイズ辞典 $アメブロカスタマイズ辞典

$アメブロカスタマイズ辞典 $アメブロカスタマイズ辞典




[ 黒バージョン ]
$アメブロカスタマイズ辞典 $アメブロカスタマイズ辞典


$アメブロカスタマイズ辞典 $アメブロカスタマイズ辞典


$アメブロカスタマイズ辞典 $アメブロカスタマイズ辞典


保存した画像を
[アメブロを書く]→[画像フォルダ]にアップロード。

$アメブロカスタマイズ辞典

アップロードした画像をクリックすると、このようにポップアップしますので、
ポップアップした画像の上で、右クリックし、画像のURLをメモ帳などにコピーしておきましょう。


CSSをコピペする



CSS編集の一番下に下記CSSコードをコピペして下さい。


[ ペタボタンのCSS ]

.antscarousel .petabtn{
display:block;
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
background:url(ここに先ほど保存した薄い方のペタボタン画像のURL) no-repeat center center;
z-index:9999;
}

.antscarousel .petabtn:hover {
background:url(ここに先ほど保存した濃い方のペタボタン画像のURL) no-repeat center center;
}




[ 読者登録のCSS ]

.antscarousel .readerbtn{
display:block;
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
background:url(ここに先ほど保存した薄い方の読者登録画像のURL) no-repeat center center;
z-index:9999;
}

.antscarousel .readerbtn:hover {
background:url(ここに先ほど保存した濃い方の読者登録画像のURL) no-repeat center center;
}




[ アメンバー申請のCSS ]

.antscarousel .amebtn{
display:block;
position: absolute;
left:0;
top:0;
width:100%;
height:100%;
background:url(ここに先ほど保存した薄い方のアメンバー画像のURL) no-repeat center center;
z-index:9999;
}

.antscarousel .amebtn:hover {
background:url(ここに先ほど保存した濃い方のアメンバー画像のURL) no-repeat center center;
}





フリープラグイン



フリープラグインの一番下に下記コードをコピペして下さい。
※必ずサイドバーの配置でフリープラグインが有効になってるか確認して下さい!

[ スクリプト読み込みコード ]

<script type="text/javascript" src="http://www.ants-works.com/ameblo/js/myscript.js"></script>



[ htmlコード ]

<div class="antscarousel">
<a href="ここにペタ、または読者登録などのURL" class="petabtn" target="_blank"></a>
<ul>
<li><img src="スライドさせたいお好きな画像のURL" width="ここに画像の横幅を入れて" height="ここに画像の縦幅を入れて" /></li>
<li><img src="スライドさせたいお好きな画像のURL" width="90" height="170" /></li>
</ul>
</div>
<a href="http://ameblo.jp/ants-works/" target="_blank">アメブロカスタマイズ辞典</a>



ちょっと説明します。

まず赤字でpetabtnと書かれてます。

これはペタボタンのクラス名ですのでお使いになるボタンによってここを変えて下さい。

ペタボタンならそのまま petabtn
読者登録ボタンなら readerbtn
アメンバーボタンなら amebtn
この様に変更して下さい。

次にスライドさせたいお好きな画像をアップロードし、
そのURLを[スライドさせたいお好きな画像のURL]と書かれた所に入れます。

ここからがポイントです!

width="ここに画像の横幅を数字で入れます"
横幅が200pxなら、width="200" と数字だけを入れて下さい。

height="ここの縦幅も同じです"
画像の縦幅が300pxなら、height="300" と入れて下さい!

※画像を追加したい場合は、
<li><img src="スライドさせたいお好きな画像のURL" width="90" height="170" /></li>
これをどんどん追加して行くだけでOK!

さらにアドバイスを!
画像の横幅はバラバラでも良いですが、縦幅は全部ピッタリ合わせた方が綺麗です!

1枚目が width="130" height="210" だとしたら、
2枚目は width="200" height="210"
3枚目は width="223" height="210"
このように横幅はバラバラでもいいですが、縦幅は揃えた方が綺麗でしょう!

また、画像のサイズ変更や加工を簡単に出来るジェネレーターがありますのでオススメです!
使い方の説明もしてますので、簡単に作れると思います!
写真加工に役立つサイト picnik


[ 追記 ] 応用編



このブログパーツ、実は色んな応用が出来ます!

例えば?

サロンなどを経営されてる方、別にホームページがあり、そっちに誘導したい方など

サロンやお店の写真をスクロールさせてそっちに飛ばすんですw

その際、ペタや読者登録の画像は不要になりますので、CSSのここを消せばOKです!

.antscarousel .petabtn { これの

background:url(ここに先ほど保存した薄い方のペタボタン画像のURL) no-repeat center center;

上記一行と

.antscarousel .petabtn:hover {
background:url(ここに先ほど保存した濃い方のペタボタン画像のURL) no-repeat center center;
}

これを消せばボタン画像は消えてスクロール画像のみとなります!

リンク先も飛ばしたいホームページURLにして下さいね!




最後にブログパーツの下に僕のブログへのリンクが貼ってます!

なるべく外さないでねw
お願いしますですm(..)m


では今日はこの辺で!







いいね!した人  |  コメント(17)