Blogger(blogspot)主要9種のシェア（共有）ボタンの追加とカスタマイズ方法
Blogger(blogspot)のシェアボタン（ソーシャルブックマーク）をCSSでカスタマイズする方法
これまで全4回の講座ではtwitterとFacebookとFeedlyとはてなブックマーク、そしてGoogle PlusとTumblrとEメールで送信ボタンのBloggerの言語を使ってのハイパーリンクの作成方法を考案してきました。今回はそれらのリンクをCSSボタンで実装する方法について考えたいと思います。初回の講座で使ったデザインを応用します。
このボタンはdivの全体がクリックまたはスマホでタッチできるハイパーリンクとなっています。やり方については前に書きましたので省略します。このHome Pageという文字を上下左右中央に持ってくるか、あるいは画像に置き換えるかしてソーシャルブックマークボタンを作ってみましょう。
SNSのアイコン画像をダウンロードして透過してサイズを統一します
まずはtwitterやfacebookなどのアイコン画像をダウンロードしてきてPhotoshopなどで背景を透過し、サイズを統一してBloggerにアップロードしておきます。Photoshopでアイコンを作成する場合は適当な大きさのキャンバスを作ってアウトプット時に画像サイズを縮小します。
こんな感じで私は300pxで作ります。
さて肝心のアイコンの色や形ですが、私の経験では灰色はまったくといってよいほど共有してもらえません。小さいアイコンも同じで色付けをしたところでシェアしてもらえた試しがありません。ですのでシェアボタンはなるべく大きく色が付いているのが一番良いと思います。色の彩度の調節はCSSで多少は抑えられると思います。
ではアイコンのメイキングタイム！
PhotoshopでSNSボタンのアイコンをいくつかパターンを変えて作ってみました。そこはご自分でブログに合ったアイコンを作成してくださいね。
どのパターンがいいかなぁ。シンキングタイム！
この明るさは結構目立ちますね。もっと暗いほうがいいかな！？CSSでopacity:0.5;という透過度を設定できますので「黒」でもいいですね。「白」と「黒」を用意しておけばどのブログでも通用するでしょう。
作ったアイコンの数は全部で9個になりました。サイズは100px四方になりました。実際に表示するには大きすぎましたが後で縮小表示できますのでこのくらいでもよいでしょう。
アップロードして表示を確かめます。
さて、肝心のCSSデザインですが、マウスオーバーで色が変わるのがいいのか、世の中のほとんどはスマホからの閲覧ですから果たしてマウスオーバーの変色に意味があるのでしょうか。オンクリックやタッチで色が変わったほうがまだ実用的ですね。
クリックまたはタップ時の色をCSSで変更するには「:active」という「疑似クラス」を使います。ホバーについては後でもできますから今回は省略します。
画像の表示ですが、htmlの「img src=""」を使うかCSSの「background-image:url('画像のアドレス');」を使うか微妙なところですね。「img src=""」を使うとアイコンを右クリックで保存できたり、何かのアクションをした際にイメージ画像が引っかかって邪魔になるかもしれませんのでCSSのbackground-imageを使ったほうがよさそうにも思えます。
そういうことで、CSSで画像を表示させてみましょう。
リンク部分は<a expr:href=''><span class='share_button'></span></a>という文法を使うことに決めました。普段spanはあまり使わないのですが、Aタグの中に何も無いとエラーがでるといけませんので、一応こうしておくことにしました。クラスは仮にシェアボタンとしておきましょう。
ではプログラミングというか、コーディングに参ります。
背景色はツイッターのブランドカラーです。
テンプレートに記述するコードは以下の通りです。
CSS
.share-button {
width:（好きな幅を指定します）;
height:（好きな高さを指定します）;
background-color:（ここに各アイコンの色を記入します）;
background-image: url('ここに画像のURLを書きます');
background-position: center center;
background-repeat: no-repeat;
}
.share-button a{
display: block;
height: 100%;
position: relative;
width: 100%;
z-index: 0;
}
.share-button:hover{
background-color:#D2691E;
}
.share-button:active {
background-color: #CCCCCC;
}
.share-button:visited{
background-color: #000000;
}
テンプレート編集画面
<div class="share-button">
<a expr:href='前回までに紹介したコード' target='_blank'><span class=''>画像を使わない人はここにテキスト</span></a>
</div>
</div>
これで各ソーシャルメディアのリンクボタンを作る基礎が完成しました。「.share-button」という文字は各メディア用に色や動作を変えるのであればそれぞれ名前を変えてくださいね。
さて、あとはBloggerのスキンのところにこれらのCSSを記述していきます。記事ページの任意の場所に表示用のリンクを記述して完成です。
サイズや色など自由に変えられますのでご自分のお好きな色や形にしてみましょう。
さて、あとはBloggerのスキンのところにこれらのCSSを記述していきます。記事ページの任意の場所に表示用のリンクを記述して完成です。
サイズや色など自由に変えられますのでご自分のお好きな色や形にしてみましょう。
さて、どうでしょうか。私はマウスオーバーで色が変わるように設定しました。ブランドカラーは一応見てきましたけど、その他のサイトで言われているようなRGBカラーとは違う数値になりました。もしかしたらお使いのパソコンによってカラーピッカーの判定が変わるのかもしれません。
このページのソースを利用する場合はブログでこのページを紹介するかシェアボタンを押して共有してください。無断で利用される場合は悪く思われているということを忘れないでください。この機能を作りページで解説するのに4時間以上かかりましたので無償でいいので反応を起こしてくださるようお願い申し上げます。
改善点
今回はdivボックスを使って紹介しましたがlistタグを使って表示したほうがスマートかもしれません。その方法については後日また詳しくご説明したいと思います。
新しいテンプレートContempoやSOHOの問題点と解決方法
2017年に一新されたテンプレートでは expr:href=''の使用によるデータの呼び出しがどうもうまくいきません。任意の文字列に「+」演算子でデータの呼び出しコードを連結することができなくなっています。以前のテンプレートならば簡単に共有ボタンが設置できるはずです。解決方法はURLのデータの呼び出しはdata.post.urlと小文字で書くことです。
アドバイス
今回は作業量が多いので難しいかもしれません。でもがんばってください。私でもできましたのでみなさんも絶対できるはずです。このページのソースを利用する場合はブログでこのページを紹介するかシェアボタンを押して共有してください。無断で利用される場合は悪く思われているということを忘れないでください。この機能を作りページで解説するのに4時間以上かかりましたので無償でいいので反応を起こしてくださるようお願い申し上げます。
