スポンサーサイト

 

--.--.--

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!
-------- | スポンサー広告 | | | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/20-8532434b

「スポンサーサイト」へのトラックバック

- TrackBack -


「スポンサーサイト」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

各種ボタン
記事下にある、拍手ボタンとSNSのボタンが寂しかったので、
オリジナルの物に変えてみたっ!!

FC2ブログの「環境設定」で、拍手ボタンの他に、TwitterとFacebookのボタンが表示出来るけど、デザインや大きさの種類も少ないしFacebookのボタンは、カウントの吹き出し部分が付いてる物しか無かったので、どうにかしたかった... 「0」のままだと悲しいしからね...w
でも、表示自体を無くすとレイアウト的に寂しくなってしまうし...
そこで「じゃあ自分で作っちゃえばいいんだっ!!」 となった訳ですw

※今回作ったボタンはSNSのTwitter・Facebook・Google+1の3つと、拍手・RSS・ブックマーク(お気に入りに追加)・お問い合わせの合計7種類。




【オリジナルボタン作成の流れ】


  1. 1.Twitter・Facebook・Google+1ボタンのリンク先URL
  2. 2.拍手・RSS・ブックマーク(お気に入りに追加)・お問い合わせボタンのリンク先URL
  3. 3.各種ボタンの作成
  4. 4.出来上がり♪



1.Twitter・Facebook・Google+1ボタンのリンク先URL


まずは、各ボタンを押した時のリンク先はこんな感じです。(色々検索しまくって探しましたw)

<a href="http://twitter.com/share?url=<%topentry_enc_link>&text=
<%enc_blogname>&url=<%enc_url>" target="_blank">ここにテキストもしくは画像</a>

<a href="http://www.facebook.com/share.php?u=<%topentry_enc_link>&t=
<%topentry_enc_title>" target="_blank">ここにテキストもしくは画像</a>

<a href="https://plus.google.com/share?url=<%topentry_enc_link>" 
target="_blank">ここにテキストもしくは画像</a>

※他にもたくさんのSNSがありますが、今回はこの3つのSNSを選びました。 
※見やすいように改行してますが、実際は改行せずに1行でOKです。
※<%○○○>は、FC2ブログの変数です。(詳しくは「テンプレート用 変数一覧 」でご確認下さい)

※上記は各記事ページにボタンを設置した場合のURLですので、トップページ等他のページにボタンを設置する場合は必要に応じて変数の部分を変更して下さい。





2.拍手・RSS・ブックマーク・お問い合わせボタンのリンク先URL



<a href="http://clap.fc2.com/post/interest2014/?url=<%topentry_enc_link>&title=
<%topentry_enc_utftitle>" target="_blank">ここにテキストもしくは画像</a>
※「FC2拍手 」を利用してます。(http://○○○~の部分は各自異なります)

<a href="http://interest2014.blog.fc2.com/?xml" target="_blank">
ここにテキストもしくは画像</a>
※http://○○○~の部分は各自異なります。

<a rel="sidebar" href="javascript:void" 
onClick="toFavorite(location.href,document.title);" 
title="このページをブックマークする">ここにテキストもしくは画像</a>
※「HTMLで書けるお気に入りに追加ボタンの実装 / サイト作成メモ 」様を参考にさせて頂きました。

<a href="http://form1.fc2.com/form/?id=935253" target="_blank">
ここにテキストもしくは画像</a>
※「FC2メールフォーム 」を利用してます。(http://○○○~の部分は各自異なります)




3.各種ボタンの作成


上記リンク先URLにある7種類のボタンを作る事にし、そして画像を一切使わずHTMLとCSSで光沢のあるボタンっぽく見えるようチャレンジしましたw(自己流なので、もっと良い作り方がありそうですが...)
※クリックした際のウインドウサイズの指定やブックマークの部分で、JavaScriptを使ってます。

各ボタンのアイコン部分には「Font Awesome 」を利用してます。
「Font Awesome」のページは英語なので使い方が分からない場合は、下記のブログが参考になります。
これは便利!アイコン型WebフォントのCDN「Font Awesome」 / Webpark 」様

3-1.各種ボタンのHTML部分



<div class="btn-box">

<a href="http://clap.fc2.com/post/interest2014/?url=<%topentry_enc_link>
&title=<%topentry_enc_utftitle>" target="_blank" 
title="この記事に「拍手」を送る">
<div class="clap"><div><i class="fa fa-thumbs-up"></i></div></div></a>

<a href="http://twitter.com/share?url=<%topentry_enc_link>&amp;text=
<%topentry_enc_utftitle>/ <%enc_blogname>&amp;url=<%topentry_enc_link>" 
onclick="window.open(this.href, 'Twitter-window', 'width=550, height=450, 
menubar=no, toolbar=no, scrollbars=yes'); return false;" 
title="この記事について「Twitter」でつぶやく">
<div class="twitter"><div><i class="fa fa-twitter"></i></div></div></a>

<a href="http://www.facebook.com/share.php?u=<%topentry_enc_link>&t=
<%topentry_enc_title>" onclick="window.open(this.href, 'Facebook-window', 
'width=550, height=450, menubar=no, toolbar=no, scrollbars=yes'); 
return false;" title="この記事を「Facebook」でシェアする">
<div class="facebook"><div><i class="fa fa-facebook"></i></div></div></a>

<a href="https://plus.google.com/share?url=<%topentry_enc_link>" 
onclick="window.open(this.href, 'google-window', 'width=550, height=450, 
menubar=no, toolbar=no, scrollbars=yes'); return false;" 
title="この記事を「Google+」でシェアする">
<div class="google"><div><i class="fa fa-google-plus"></i></div></div></a>

<a href="http://interest2014.blog.fc2.com/?xml" onclick="window.open
(this.href, 'RSS-window', 'width=700, height=500, menubar=no, toolbar=no, 
scrollbars=yes'); return false;" title="最新記事の「RSS」を購読する">
<div class="rss-feed"><div><i class="fa fa-rss"></i></div></div></a>

<a rel="sidebar" href="javascript:void" 
onClick="toFavorite(location.href,document.title);" 
title="このページをブックマークする">
<div class="bookmark"><div><i class="fa fa-star"></i></div></div></a>

<a href="http://form1.fc2.com/form/?id=935253" class="maile-to" 
title="お問い合わせ">
<div class="mail-to"><div><i class="fa fa-envelope"></i></div></div></a>
</div>
※分かりやすいように適度なところで改行してます。

3-2.各種ボタンのCSS部分



.btn-box{ font-size:25px;}

.clap,.twitter,.facebook,.google,.rss-feed,.bookmark,.mail-to{
float:left;
width:32px;
height:32px;
border-radius:8px;
margin-right:15px;
box-shadow: 2px 2px 2px 0px #555555;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}
.clap:hover,.twitter:hover,.facebook:hover,.google:hover,.rss-feed:hover,.bookmark:hover,.mail-to:hover{
box-shadow: 0px 0px 0px 0px #fff;
}
.clap div,.twitter div,.facebook div,.google div,.rss-feed div,.bookmark div,.mail-to div{
height:30px;
text-align:center;
border-radius:7px;
}
.clap div i,.twitter div i,.facebook div i,.google div i,.rss-feed div i,.bookmark div i,.mail-to div i{ line-height:32px; }

.clap{ border:1px solid #333; }/* ▼ 拍手ボタン部分 ▼ */
.clap div{
color:#fff;
border-top:#ddd 1px solid;
border-bottom:#666 1px solid;
background: rgb(170,170,170);
background: -moz-linear-gradient(top, rgba(170,170,170,1) 0%, rgba(119,119,119,1) 45%, rgba(85,85,85,1) 50%, rgba(34,34,34,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(170,170,170,1)), color-stop(45%,rgba(119,119,119,1)), color-stop(50%,rgba(85,85,85,1)), color-stop(100%,rgba(34,34,34,1)));
background: -webkit-linear-gradient(top, rgba(170,170,170,1) 0%,rgba(119,119,119,1) 45%,rgba(85,85,85,1) 50%,rgba(34,34,34,1) 100%);
background: -o-linear-gradient(top, rgba(170,170,170,1) 0%,rgba(119,119,119,1) 45%,rgba(85,85,85,1) 50%,rgba(34,34,34,1) 100%);
background: -ms-linear-gradient(top, rgba(170,170,170,1) 0%,rgba(119,119,119,1) 45%,rgba(85,85,85,1) 50%,rgba(34,34,34,1) 100%);
background: linear-gradient(to bottom, rgba(170,170,170,1) 0%,rgba(119,119,119,1) 45%,rgba(85,85,85,1) 50%,rgba(34,34,34,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaaaaa', endColorstr='#222222',GradientType=0 );
}
.clap div:hover{
border-top:#eee 1px solid;
border-bottom:#999 1px solid;
background: rgb(204,204,204);
background: -moz-linear-gradient(top, rgba(204,204,204,1) 0%, rgba(153,153,153,1) 45%, rgba(119,119,119,1) 50%, rgba(68,68,68,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(204,204,204,1)), color-stop(45%,rgba(153,153,153,1)), color-stop(50%,rgba(119,119,119,1)), color-stop(100%,rgba(68,68,68,1)));
background: -webkit-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(68,68,68,1) 100%);
background: -o-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(68,68,68,1) 100%);
background: -ms-linear-gradient(top, rgba(204,204,204,1) 0%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(68,68,68,1) 100%);
background: linear-gradient(to bottom, rgba(204,204,204,1) 0%,rgba(153,153,153,1) 45%,rgba(119,119,119,1) 50%,rgba(68,68,68,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#444444',GradientType=0 );
}
.clap div i{margin-top:-1px;}

.twitter{ border:1px solid #ccc; }/* ▼ Twitterボタン部分 ▼ */
.twitter div{
color:#55acee;
border-top:#fff 1px solid;
border-bottom:#eee 1px solid;
background: rgb(252,252,252);
background: -moz-linear-gradient(top, rgba(252,252,252,1) 0%, rgba(240,240,240,1) 50%, rgba(229,229,229,1) 51%, rgba(223,223,223,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(252,252,252,1)), color-stop(50%,rgba(240,240,240,1)), color-stop(51%,rgba(229,229,229,1)), color-stop(100%,rgba(223,223,223,1)));
background: -webkit-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(240,240,240,1) 50%,rgba(229,229,229,1) 51%,rgba(223,223,223,1) 100%);
background: -o-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(240,240,240,1) 50%,rgba(229,229,229,1) 51%,rgba(223,223,223,1) 100%);
background: -ms-linear-gradient(top, rgba(252,252,252,1) 0%,rgba(240,240,240,1) 50%,rgba(229,229,229,1) 51%,rgba(223,223,223,1) 100%);
background: linear-gradient(to bottom, rgba(252,252,252,1) 0%,rgba(240,240,240,1) 50%,rgba(229,229,229,1) 51%,rgba(223,223,223,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#dfdfdf',GradientType=0 );
}
.twitter div:hover{
border-top:#fff 1px solid;
border-bottom:#fff 1px solid;
background: rgb(255,255,255);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 50%, rgba(235,235,235,1) 51%, rgba(239,239,239,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(245,245,245,1)), color-stop(51%,rgba(235,235,235,1)), color-stop(100%,rgba(239,239,239,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(245,245,245,1) 50%,rgba(235,235,235,1) 51%,rgba(239,239,239,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(245,245,245,1) 50%,rgba(235,235,235,1) 51%,rgba(239,239,239,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(245,245,245,1) 50%,rgba(235,235,235,1) 51%,rgba(239,239,239,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(245,245,245,1) 50%,rgba(235,235,235,1) 51%,rgba(239,239,239,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
}

.facebook{ border:1px solid #315096; }/* ▼ Facebookボタン部分 ▼ */
.facebook div{
color:#fff;
border-top:#ccf 1px solid;
border-bottom:#88b 1px solid;
background: rgb(133,165,235);
background: -moz-linear-gradient(top, rgba(133,165,235,1) 0%, rgba(49,80,150,1) 45%, rgba(1,32,102,1) 50%, rgba(49,80,150,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(133,165,235,1)), color-stop(45%,rgba(49,80,150,1)), color-stop(50%,rgba(1,32,102,1)), color-stop(100%,rgba(49,80,150,1)));
background: -webkit-linear-gradient(top, rgba(133,165,235,1) 0%,rgba(49,80,150,1) 45%,rgba(1,32,102,1) 50%,rgba(49,80,150,1) 100%);
background: -o-linear-gradient(top, rgba(133,165,235,1) 0%,rgba(49,80,150,1) 45%,rgba(1,32,102,1) 50%,rgba(49,80,150,1) 100%);
background: -ms-linear-gradient(top, rgba(133,165,235,1) 0%,rgba(49,80,150,1) 45%,rgba(1,32,102,1) 50%,rgba(49,80,150,1) 100%);
background: linear-gradient(to bottom, rgba(133,165,235,1) 0%,rgba(49,80,150,1) 45%,rgba(1,32,102,1) 50%,rgba(49,80,150,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#85a5eb', endColorstr='#315096',GradientType=0 );
}
.facebook div:hover{
border-top:#eef 1px solid;
border-bottom:#bbf 1px solid;
background: rgb(145,176,246);
background: -moz-linear-gradient(top, rgba(145,176,246,1) 0%, rgba(97,128,198,1) 45%, rgba(81,112,182,1) 50%, rgba(97,128,198,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(145,176,246,1)), color-stop(45%,rgba(97,128,198,1)), color-stop(50%,rgba(81,112,182,1)), color-stop(100%,rgba(97,128,198,1)));
background: -webkit-linear-gradient(top, rgba(145,176,246,1) 0%,rgba(97,128,198,1) 45%,rgba(81,112,182,1) 50%,rgba(97,128,198,1) 100%);
background: -o-linear-gradient(top, rgba(145,176,246,1) 0%,rgba(97,128,198,1) 45%,rgba(81,112,182,1) 50%,rgba(97,128,198,1) 100%);
background: -ms-linear-gradient(top, rgba(145,176,246,1) 0%,rgba(97,128,198,1) 45%,rgba(81,112,182,1) 50%,rgba(97,128,198,1) 100%);
background: linear-gradient(to bottom, rgba(145,176,246,1) 0%,rgba(97,128,198,1) 45%,rgba(81,112,182,1) 50%,rgba(97,128,198,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#91b0f6', endColorstr='#6180c6',GradientType=0 );
}

.google{ border:1px solid #d33; }/* ▼ Google+ボタン部分 ▼ */
.google div{
color:#fff;
border-top:#ebb 1px solid;
border-bottom:#c88 1px solid;
background: rgb(244,99,80);
background: -moz-linear-gradient(top, rgba(244,99,80,1) 0%, rgba(221,75,57,1) 45%, rgba(205,59,41,1) 50%, rgba(221,75,57,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,99,80,1)), color-stop(45%,rgba(221,75,57,1)), color-stop(50%,rgba(205,59,41,1)), color-stop(100%,rgba(221,75,57,1)));
background: -webkit-linear-gradient(top, rgba(244,99,80,1) 0%,rgba(221,75,57,1) 45%,rgba(205,59,41,1) 50%,rgba(221,75,57,1) 100%);
background: -o-linear-gradient(top, rgba(244,99,80,1) 0%,rgba(221,75,57,1) 45%,rgba(205,59,41,1) 50%,rgba(221,75,57,1) 100%);
background: -ms-linear-gradient(top, rgba(244,99,80,1) 0%,rgba(221,75,57,1) 45%,rgba(205,59,41,1) 50%,rgba(221,75,57,1) 100%);
background: linear-gradient(to bottom, rgba(244,99,80,1) 0%,rgba(221,75,57,1) 45%,rgba(205,59,41,1) 50%,rgba(221,75,57,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f46350', endColorstr='#dd4b39',GradientType=0 );
}
.google div:hover{
border-top:#fee 1px solid;
border-bottom:#fbb 1px solid;
background: rgb(255,147,128);
background: -moz-linear-gradient(top, rgba(255,147,128,1) 0%, rgba(255,123,105,1) 45%, rgba(253,107,89,1) 50%, rgba(255,123,105,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,147,128,1)), color-stop(45%,rgba(255,123,105,1)), color-stop(50%,rgba(253,107,89,1)), color-stop(100%,rgba(255,123,105,1)));
background: -webkit-linear-gradient(top, rgba(255,147,128,1) 0%,rgba(255,123,105,1) 45%,rgba(253,107,89,1) 50%,rgba(255,123,105,1) 100%);
background: -o-linear-gradient(top, rgba(255,147,128,1) 0%,rgba(255,123,105,1) 45%,rgba(253,107,89,1) 50%,rgba(255,123,105,1) 100%);
background: -ms-linear-gradient(top, rgba(255,147,128,1) 0%,rgba(255,123,105,1) 45%,rgba(253,107,89,1) 50%,rgba(255,123,105,1) 100%);
background: linear-gradient(to bottom, rgba(255,147,128,1) 0%,rgba(255,123,105,1) 45%,rgba(253,107,89,1) 50%,rgba(255,123,105,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9380', endColorstr='#ff7b69',GradientType=0 );
}

.rss-feed{ border:1px solid #ffbc00; }/* ▼ RSSボタン部分 ▼ */
.rss-feed div{
color:#fff;
border-top:#eed 1px solid;
border-bottom:#dc8 1px solid;
background: rgb(255,204,80);
background: -moz-linear-gradient(top, rgba(255,204,80,1) 0%, rgba(255,172,0,1) 45%, rgba(255,156,0,1) 51%, rgba(255,172,32,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,204,80,1)), color-stop(45%,rgba(255,172,0,1)), color-stop(51%,rgba(255,156,0,1)), color-stop(100%,rgba(255,172,32,1)));
background: -webkit-linear-gradient(top, rgba(255,204,80,1) 0%,rgba(255,172,0,1) 45%,rgba(255,156,0,1) 51%,rgba(255,172,32,1) 100%);
background: -o-linear-gradient(top, rgba(255,204,80,1) 0%,rgba(255,172,0,1) 45%,rgba(255,156,0,1) 51%,rgba(255,172,32,1) 100%);
background: -ms-linear-gradient(top, rgba(255,204,80,1) 0%,rgba(255,172,0,1) 45%,rgba(255,156,0,1) 51%,rgba(255,172,32,1) 100%);
background: linear-gradient(to bottom, rgba(255,204,80,1) 0%,rgba(255,172,0,1) 45%,rgba(255,156,0,1) 51%,rgba(255,172,32,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcc50', endColorstr='#ffac20',GradientType=0 );
}
.rss-feed div:hover{
border-top:#ffe 1px solid;
border-bottom:#eed 1px solid;
background: rgb(255,233,109);
background: -moz-linear-gradient(top, rgba(255,233,109,1) 0%, rgba(255,201,30,1) 45%, rgba(255,185,29,1) 50%, rgba(255,201,62,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,233,109,1)), color-stop(45%,rgba(255,201,30,1)), color-stop(50%,rgba(255,185,29,1)), color-stop(100%,rgba(255,201,62,1)));
background: -webkit-linear-gradient(top, rgba(255,233,109,1) 0%,rgba(255,201,30,1) 45%,rgba(255,185,29,1) 50%,rgba(255,201,62,1) 100%);
background: -o-linear-gradient(top, rgba(255,233,109,1) 0%,rgba(255,201,30,1) 45%,rgba(255,185,29,1) 50%,rgba(255,201,62,1) 100%);
background: -ms-linear-gradient(top, rgba(255,233,109,1) 0%,rgba(255,201,30,1) 45%,rgba(255,185,29,1) 50%,rgba(255,201,62,1) 100%);
background: linear-gradient(to bottom, rgba(255,233,109,1) 0%,rgba(255,201,30,1) 45%,rgba(255,185,29,1) 50%,rgba(255,201,62,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffe96d', endColorstr='#ffc93e',GradientType=0 );
}
.rss-feed div i{padding-top:1px;}

.bookmark{ border:1px solid #00c300; }/* ▼ ブックマークボタン部分 ▼ */
.bookmark div{
color:#fff;
border-top:#beb 1px solid;
border-bottom:#8c8 1px solid;
background: rgb(0,227,0);
background: -moz-linear-gradient(top, rgba(0,227,0,1) 0%, rgba(0,195,0,1) 45%, rgba(0,169,0,1) 50%, rgba(0,192,0,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,227,0,1)), color-stop(45%,rgba(0,195,0,1)), color-stop(50%,rgba(0,169,0,1)), color-stop(100%,rgba(0,192,0,1)));
background: -webkit-linear-gradient(top, rgba(0,227,0,1) 0%,rgba(0,195,0,1) 45%,rgba(0,169,0,1) 50%,rgba(0,192,0,1) 100%);
background: -o-linear-gradient(top, rgba(0,227,0,1) 0%,rgba(0,195,0,1) 45%,rgba(0,169,0,1) 50%,rgba(0,192,0,1) 100%);
background: -ms-linear-gradient(top, rgba(0,227,0,1) 0%,rgba(0,195,0,1) 45%,rgba(0,169,0,1) 50%,rgba(0,192,0,1) 100%);
background: linear-gradient(to bottom, rgba(0,227,0,1) 0%,rgba(0,195,0,1) 45%,rgba(0,169,0,1) 50%,rgba(0,192,0,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e300', endColorstr='#00c000',GradientType=0 );
}
.bookmark div:hover{
border-top:#efe 1px solid;
border-bottom:#beb 1px solid;
background: rgb(140,255,140);
background: -moz-linear-gradient(top, rgba(140,255,140,1) 0%, rgba(119,238,119,1) 45%, rgba(85,204,85,1) 50%, rgba(102,220,102,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(140,255,140,1)), color-stop(45%,rgba(119,238,119,1)), color-stop(50%,rgba(85,204,85,1)), color-stop(100%,rgba(102,220,102,1)));
background: -webkit-linear-gradient(top, rgba(140,255,140,1) 0%,rgba(119,238,119,1) 45%,rgba(85,204,85,1) 50%,rgba(102,220,102,1) 100%);
background: -o-linear-gradient(top, rgba(140,255,140,1) 0%,rgba(119,238,119,1) 45%,rgba(85,204,85,1) 50%,rgba(102,220,102,1) 100%);
background: -ms-linear-gradient(top, rgba(140,255,140,1) 0%,rgba(119,238,119,1) 45%,rgba(85,204,85,1) 50%,rgba(102,220,102,1) 100%);
background: linear-gradient(to bottom, rgba(140,255,140,1) 0%,rgba(119,238,119,1) 45%,rgba(85,204,85,1) 50%,rgba(102,220,102,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8cff8c', endColorstr='#66dc66',GradientType=0 );
}

.mail-to{ border:1px solid #09f; }/* ▼ お問い合わせボタン部分 ▼ */
.mail-to div{
color:#fff;
border-top:#ccf 1px solid;
border-bottom:#99e 1px solid;
background: rgb(109,179,242);
background: -moz-linear-gradient(top, rgba(109,179,242,1) 0%, rgba(84,163,238,1) 45%, rgba(54,144,240,1) 50%, rgba(54,123,219,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(109,179,242,1)), color-stop(45%,rgba(84,163,238,1)), color-stop(50%,rgba(54,144,240,1)), color-stop(100%,rgba(54,123,219,1)));
background: -webkit-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 45%,rgba(54,144,240,1) 50%,rgba(54,123,219,1) 100%);
background: -o-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 45%,rgba(54,144,240,1) 50%,rgba(54,123,219,1) 100%);
background: -ms-linear-gradient(top, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 45%,rgba(54,144,240,1) 50%,rgba(54,123,219,1) 100%);
background: linear-gradient(to bottom, rgba(109,179,242,1) 0%,rgba(84,163,238,1) 45%,rgba(54,144,240,1) 50%,rgba(54,123,219,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#367bdb',GradientType=0 );
}
.mail-to div:hover{
border-top:#eef 1px solid;
border-bottom:#ccf 1px solid;
background: rgb(157,227,255);
background: -moz-linear-gradient(top, rgba(157,227,255,1) 0%, rgba(132,211,255,1) 45%, rgba(102,192,255,1) 50%, rgba(102,171,255,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(157,227,255,1)), color-stop(45%,rgba(132,211,255,1)), color-stop(50%,rgba(102,192,255,1)), color-stop(100%,rgba(102,171,255,1)));
background: -webkit-linear-gradient(top, rgba(157,227,255,1) 0%,rgba(132,211,255,1) 45%,rgba(102,192,255,1) 50%,rgba(102,171,255,1) 100%);
background: -o-linear-gradient(top, rgba(157,227,255,1) 0%,rgba(132,211,255,1) 45%,rgba(102,192,255,1) 50%,rgba(102,171,255,1) 100%);
background: -ms-linear-gradient(top, rgba(157,227,255,1) 0%,rgba(132,211,255,1) 45%,rgba(102,192,255,1) 50%,rgba(102,171,255,1) 100%);
background: linear-gradient(to bottom, rgba(157,227,255,1) 0%,rgba(132,211,255,1) 45%,rgba(102,192,255,1) 50%,rgba(102,171,255,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9de3ff', endColorstr='#66abff',GradientType=0 );
}
.mail-to div i{margin:-2px 0 0 1px;}
※改行すると、ものすごく縦長になるので改行せずにそのまま載せました。
※CSSのグラデーションは「Ultimate CSS Gradient Generator 」を利用しました。




4.出来上がり♪


上記のHTMLとCSSのソースをコピペすると、こんな感じで表示されます。(一応表示を確認♪)




※CSS部分はすでにテンプレートに記述してるので、HTML部分のソースを上記からコピペでそのままこの記事内に貼り付けてみました。(URLは各自で編集が必要なので、コピペの際はお気を付け下さい。)

※上記は表示を確認する為に、直接記事内にソースをコピペしてますが、記事内からでは正常にリンクしませんのでご注意下さい。


【ボタン設置の注意点など】

・オリジナルのボタンを使う場合は、FC2ブログのデフォルトで用意されてる拍手ボタン等は非表示にした方が良いです。(ボタンが重複してしまうので^^;) 


・ボタンはテンプレート内のどこにでも表示出来ますが、記事下に配置する場合は、「テンプレートの設定」のHTMLソース内で「<!--/more-->」を検索して、その下辺りに記述すると丁度良いかもです。
※検索はキーボードの「Ctrl」+「F」で行えます。
それ以外に設置する場合は、<!--topentry--> ~ <!--/topentry-->の変数の間に設置します。
※詳しくは「テンプレート用 変数一覧  」で変数と、その変数が使えるエリアをご確認下さい。

私の場合は、各記事の下とページ最上部右端にボタンを配置して、それぞれの配置場所に合わせてURLもちょっと変えたりしてみました。(お問い合わせボタンはページ最上部のみに配置)
※ページ最上部へも配置したのは、ぶっちゃけ空きスペースをどうするか悩んでたので...w



以上の流れで、無事に各ボタンが機能すればオリジナルボタンの完成です♪
自分的には、中々良い出来になったと満足してますが、この手間が面倒だ... と言う場合は
忍者おまとめボタン 」がおススメです
ボタンの種類がすごく豊富で、好きなボタンだけを選んで並べる事が出来るので、カウントの吹き出しが無いボタンだけを並べたり、ボタンの色を統一したり等など、かなり自分好みに出来ると思います。
ブログランキングに参加中♪
良かったらポチっとお願いします
にほんブログ村 IT技術ブログ Webサイト構築へ
B!


関連記事
2014-09-18 | その他 | コメント(0) | トラックバック(0) | このページのトップへ

http://interest2014.blog.fc2.com/tb.php/20-8532434b

「オリジナルの拍手とSNSのボタンを作ってみた」へのトラックバック

- TrackBack -


「オリジナルの拍手とSNSのボタンを作ってみた」へのコメント

- Comment -

コメントの投稿

- Post a Comment -










管理者にだけ表示を許可する

※コメントを投稿する際に、任意の編集用パスワードを設定することで投稿後にコメントの修正・削除が可能になります。

▼クリックすると配色が変更されます  
このボタンの設置方法は こちら♪

White
Black

プロフィールClick

プロフィール画像

Author:あると♪
ブログ開始: 日目
公開記事数:

Webサイト製作の勉強にと思ってブログのカスタマイズに挑戦してる初心者です♪その他にも気になった事、興味がある事などを気ままに書いてますっ!!

当ブログのご案内は こちら♪

最新記事Click

最新コメントClick

カテゴリClick

月別アーカイブClick

アクセスカウンターClick

設置日
2014.11.19

スポンサーリンクClick

このページの目次Click

人気ランキングClick

ブログパーツ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。