Bloggerのテンプレートを使っていると、

SNSの共有ボタンがダサすぎる…
と感じたことはありませんか?

この現象、Bloggerの専用テンプレートを購入しても起きるんですよね!
海外サイトでテンプレートを購入すれば、デザインは良かったりします。
ですが、日本では馴染みがないシェアボタンが多すぎるのです。
そんな中で、Blogger用のSNSボタンを公開しているのがトーマスイッチさんでした。
[コピペだけ]6種類のオリジナルSNSボタンをBloggerに設置する方法を紹介する
私も、このSNSボタンに最初お世話になっていたのですが、いくつかの問題点とデザインに関しての不満がありました。

そこで、私なりにBlogger専用のSNS共有ボタンを作ってみることにしました。
分かり易くSNSシェアボタンの貼り付け方を説明して行くので、誰でもおしゃれな共有ボタンをBloggerに設置することが出来るはずです!
共有ボタンの編集画面はどこ?
Bloggerの管理画面にある左メニューの「テーマ」を選びましょう。
すると、こんな画面になるかと思います。
この画面の「カスタマイズ」と書かれているボタンをクリックしましょう。
すると、いくつかメニューが表示されます。
その中の「HTMLを編集」を選びましょう。

すると、画面にずらーっとプログラミングコードが表示されるかと思います。
そこで、「Ctrl+F」(検索)を押して以下のコードを
- 「Ctrl+C」:コピー
- 「Ctrl+V」:ペースト
して探してみて下さい。
]]></b:skin>
このコードよりも上に、今からSNS共有ボタンのデザイン(CSS)を追加して行きます。
もし、このコードよりも上にコードを貼って機能しない場合は、
</style>
こちらのコードよりも上にコードを貼ってみて下さい。
SNS共有ボタンのデザインコード
それでは、ここからデザインの画像例も併せて、SNSの共有ボタンのデザインコードをご紹介して行きますね!
Blogger用カラフルなSNSボタン
.sns{margin:10px auto; text-align:center; width:90%;} .sns ul {list-style:none !important; padding: initial !important;} .sns li {float:left; width:20%; height:54px; margin:20px 3px; list-style:none !important;} .sns li span,.sns .fa{font-size:15px !important;} .sns li a {font-size:13px; position:relative; display:block; padding:8px; transition:0.3s; border-radius:6px; text-align:center; text-decoration: none;} .twitter a {background:#00acee; color:#fff;} .twitter a:hover {color:#00acee; background:#fff;} .facebook a {background:#3b5998; color:#fff;} .facebook a:hover {background:#fff; color:#3b5998;} .google1 a {background:#db4a39; color:#fff;} .google1 a:hover {background:#fff; color:#db4a39;} .hatebu a {background:#5d8ac1; color:#fff;} .hatebu a:hover {background:#fff; color:#5d8ac1;} .pocket a {background:#f03e51; color:#fff;} .pocket a:hover {background:#fff; color:#f03e51;} .clearfix:after {content: ""; display: block; clear: both;} @media only screen and (max-width: 780px) {.sns li{width:20%;}
Blogger用モノトーンSNSボタン
.sns{margin:10px auto; text-align:center; width:90%;} .sns ul {list-style:none !important; padding: initial !important;} .sns li {float:left; width:20%; height:54px; margin:20px 3px; list-style:none !important;} .sns li span,.sns .fa{font-size:15px !important;} .sns li a {font-size:13px; position:relative; display:block; padding:8px; transition:0.3s; border-radius:6px; text-align:center; text-decoration: none;} .twitter a {background:#000; color:#fff;} .twitter a:hover {background:#fff; color:#000;} .facebook a {background:#000; color:#fff;} .facebook a:hover {background:#fff; color:#000;} .google1 a {background:#000; color:#fff;} .google1 a:hover {background:#fff; color:#000;} .hatebu a {background:#000; color:#fff;} .hatebu a:hover {background:#fff; color:#000;} .pocket a {background:#000; color:#fff;} .pocket a:hover {background:#fff; color:#000;} .clearfix:after {content: ""; display: block; clear: both;} @media only screen and (max-width: 780px) {.sns li{width:20%;}
Blogger用カラー隙間なしSNSボタン
.sns{margin:10px auto; text-align:center; width:90%;} .sns ul {list-style:none !important; padding: initial !important;} .sns li {float:left; width:20%; height:54px; margin:20px 0; list-style:none !important;} .sns li span,.sns .fa{font-size:15px !important;} .sns li a {font-size:13px; position:relative; display:block; padding:8px; transition:0.3s; text-align:center; text-decoration: none;} .twitter a {background:#00acee; color:#fff;} .twitter a:hover {color:#00acee; background:#fff;} .facebook a {background:#3b5998; color:#fff;} .facebook a:hover {background:#fff; color:#3b5998;} .google1 a {background:#db4a39; color:#fff;} .google1 a:hover {background:#fff; color:#db4a39;} .hatebu a {background:#5d8ac1; color:#fff;} .hatebu a:hover {background:#fff; color:#5d8ac1;} .pocket a background:#f03e51; color:#fff;} .pocket a:hover {background:#fff; color:#f03e51;} .clearfix:after {content: ""; display: block; clear: both;} @media only screen and (max-width: 780px) {.sns li{width:20%;}
Blogger用白枠カラフルSNSボタン
.sns{margin:10px auto; text-align:center; width:90%;} .sns ul {list-style:none !important; padding: initial !important;} .sns li {float:left; width:20%; height:54px; margin:20px 3px; list-style:none !important;} .sns li span,.sns .fa{font-size:15px !important;} .sns li a {font-size:13px; position:relative; display:block; padding:8px; transition:0.3s; border-radius:6px; text-align:center; text-decoration: none;} .twitter a {background:#fff; color:#00acee; border:2px solid #00acee;} .twitter a:hover {background:#00acee; color:#fff;} .facebook a {background:#fff; color:#3b5998; border:2px solid #3b5998;} .facebook a:hover {background:#3b5998; color:#fff;} .google1 a {background:#fff; color:#db4a39; border:2px solid #db4a39} .google1 a:hover {background:#db4a39; color:#fff;} .hatebu a {background:#fff; color:#5d8ac1; border:2px solid #5d8ac1;} .hatebu a:hover {background:#5d8ac1; color:#fff;} .pocket a {background:#fff; color:#f03e51; border:2px solid #f03e51;} .pocket a:hover {background:#f03e51; color:#fff;} .clearfix:after {content: ""; display: block; clear: both;} @media only screen and (max-width: 780px) {.sns li{width:20%;}
Blogger用黒枠モノトーンSNSボタン
.sns{margin:10px auto; text-align:center; width:90%;} .sns ul {list-style:none !important; padding: initial !important;} .sns li {float:left; width:20%; height:54px; margin:20px 3px; list-style:none !important;} .sns li span,.sns .fa{font-size:15px !important;} .sns li a {font-size:13px; position:relative; display:block; padding:8px; transition:0.3s; border-radius:6px; text-align:center; text-decoration: none;} .twitter a {background:#fff; color:#000; border:2px solid #000;} .twitter a:hover {background:#888; color:#fff;} .facebook a {background:#fff; color:#000; border:2px solid #000;} .facebook a:hover {background:#888; color:#fff;} .google1 a {background:#fff; color:#000; border:2px solid #000;} .google1 a:hover {background:#888; color:#fff;} .hatebu a {background:#fff; color:#000; border:2px solid #000;} .hatebu a:hover {background:#888; color:#fff;} .pocket a {background:#fff; color:#000; border:2px solid #000;} .pocket a:hover {background:#888; color:#fff;} .clearfix:after {content: ""; display: block; clear: both;} @media only screen and (max-width: 780px) {.sns li{width:20%;}
デザインの大きさを変更したい場合
もし共有ボタンのデザインの大きさを変更したい場合は、
.sns li {
このコードを探し、「width:20%」という部分を変更して調整してみて下さい。
表示させたい場所に貼り付けるコード
最後に、以下のコードを共有ボタンを貼り付けたい場所に設置して下さい。
<b:if cond='data:blog.pageType == "item"'> <div class='sns'> <ul class='clearfix'> <li class='twitter'><a expr:href='"https://twitter.com/share?url=" + data:post.url + "&text=" + data:post.title + " – @(自分のTwitterアカウント)より"' onclick='window.open(this.href, 'windowName', 'height=300,width=600');return false;' target='_blank'><i class='fa fa-twitter'/></a></li> <li class='facebook'><a expr:href='"https://www.facebook.com/sharer.php?u=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=550, height=650, left=24, top=24, scrollbars, resizable');return false;' target='_blank'><i class='fa fa-facebook'/></a></li> <li class='google1'><a expr:href='"https://plus.google.com/share?url=" + data:post.url' onclick='window.open(this.href, 'windowName', 'width=400, height=500, left=24, top=24, scrollbars, resizable');return false;' target='_blank'><i class='fa fa-google-plus'/></a></li> <li class='hatebu'><a expr:href='"http://b.hatena.ne.jp/add?mode=confirm&url=" + data:post.url + "&text=" + data:post.title' onclick='window.open(this.href, 'windowName', 'height=300,width=600');return false;' target='_blank'><i class='fa'>B!</i></a></li> <li class='pocket'><a expr:href='"http://getpocket.com/edit?url=" + data:post.url + "&text=" + data:post.title' onclick='window.open(this.href, 'windowName', 'height=300,width=600');return false;' target='_blank'><i class='fa fa-get-pocket'/></a></li> </ul> </div> </b:if>
Twitterには、投稿をシェアして貰った時に、自分のところにも通知が来るように設定しておきました。
コードの中で「@(自分のTwitterアカウント)」を探し、そこに自分のTwitterアカウントを挿入して下さい。
共有ボタンの表示場所はどこが良い?
記事の内容の終わった後に、シェアボタンを貼り付けるのが一番良いでしょうね。
<!-- Post ShareButtons -->
「Ctrl+F」を押して、この文字をコピペして探してみて下さい。
そして、その中にある
<b:if cond='data:blog.pageType == "item"'>
というコードから、
</b:if>
という閉じタグまでを、新しい共有ボタンのコードに置き換えましょう。
これで、あなたに合ったソーシャルボタンを使う事が出来ますよ!
このように、Bloggerのデザインを根本的に変更したい方は、
Bloggerおしゃれテンプレートに変更させる5つのステップ
Bloggerのダサいテンプレートをおしゃれなテンプレートに変更する方法を分かり易く解説しています。もちろん、無料でまるでWordPressのようなクールなテンプレートに変更することが出来ますよ!
こちらの記事も併せてお読み下さい。
さらにBloggerについて知りたい方の為に、Bloggerの始め方&使い方マニュアルみたいなものを作成しました。
この記事に従ってブログ運営をして行けば、集客はもちろん収益の大幅アップも間違いなしです!
Bloggerブログについてさらに詳しく知りたい方は、
Bloggerブログの始め方と使い方
ブログ初心者が、Blogger始める前に知っておくべき基本知識や使い方って何だろう?Bloggerブログの為のこの完全マニュアル記事を読めば、ブログのSEO検索や収益性が増すことはまず間違いないでしょう。初期投資も格安で始められるBloggerは、初心者向けのブログ運営として超お勧めですよ!
こちらの記事をお読み下さいませ。
0 コメント