ちなみに今回設置したのは、SNSのシェアボタンではなく、フォローボタンです。はてなブログにfacebook、Twitter、Google+、Instagram、はてなブログ、feedlyの各種SNSのフォローボタンを設置し … .sidebar__follow-btn .instagram { .p-name{ 今回は、はてなブログのフォローボタンをオシャレにカスタマイズしていきます。 フォローボタンのデザインは記事上・記事下用5種類、サイドバー用4種類、スマホ用2種類の合計11種類を用意しました！ ぜひお試しください！ この度、はてなブログにfacebook、Twitter、Google+、Instagram、はてなブログ、feedlyの各種SNSのフォローボタンを設置しました。見ていただければ、わかる通りですが、いたってシンプルなSNSボタンです。今回は、この各種SNSのフォローボタンのコードを記事に記載しましたので、使ってみたいという方は、コピペしていただければと思います。, ちなみに、このSNSのフォローボタンを作るに当って、参考にさせていただいたのが、こちらの『副業ハック』さんの記事。とってもわかりたすくて参考になりました。ありがとうございます。今回は、この『副業ハック』さんで紹介されていたコードを、ちょっとだけいじらせていただきました。, 流行りに乗れ！WordPressにバイラルメディア風のSNSボタンを設置する方法 – 副業ハック, まずは、どんか感じのSNSボタンか見てもらった方がいいと思いますので、SNSボタンを設置したブログ画像を貼らせていただきました。PC表示の場合は、サイドバーに、スマホ表示の場合は、フッターにそれぞれ設置しました。, ちなみに今回設置したのは、SNSのシェアボタンではなく、フォローボタンですのでお間違えなく！それでは、さっそく設置方法を解説していきます。, 設置方法と言っても、コピペするだけでOKなので、とっても簡単です。まずは、PC表示の方から設置していきたいと思います。それでは、はてなブログのダッシュボードから『デザイン→カスタマイズ→サイドバー→モジュールを追加』に進んでください。, そして、『URL』というところに、ご自分の各種SNSのプロフィールページなどのURLをコピペすればOKです。ここで、一番わかりずらいのが、はてなブログの『読者になる』ボタンです。以下の感じで設定してみてください。, 続いてCSSの設定です。以下のコードをダッシュボードから、『デザインCSS』に進んで、お好みの場所に貼り付ければ終了です。もしかしたら、はてなブログのテーマによって、デザインが崩れる場合は、CSSをいじってみてください。, スマホへの設置方法は、先ほど『モジュールに追加』から追加したHTMLコードを、ダッシュボードから『フッタ→ページャー下』にコピペして、CSSも上のコードと同じものをコピペすれば完成です。, 『副業ハック』さんのわかりやすい記事のおかげで、簡単にSNSのフォローボタンを作成することができました。ちなみに、僕が『副業ハック』さんのコードをちょっといじって変更したところは、以下の通りです。, 以上４点（※だったと思います）を変更しました。皆さんのはてなブログカスタマイズの参考になればと思います。記事にさせていただきました。, ※ 当ブログのはてなブログカスタマイズの過去記事です。もしよろしければ、のぞいてみてください。, #box2 img {max-width: 200%;} color: #fff; -moz-opacity:0.6; color: #cc4895; border-radius: 100%; 詳細プロフィール：ブログ運営者について, 東京都内の初心者・未経験におすすめのダンススクール（ダンス教室・ダンススタジオ）！. はてなブログをコピペ+αでカスタマイズ！ } border: solid 1px #dddddd; フォローボタンも可愛らしいデザインが豊富だ。 このブログでは以下の記事を参照にした。めっちゃいい感じになるはず。 参考記事：はてなブログに11種類から選べるsnsフォローボタンをコピペ＋αで実装するカスタマイズ margin-top: 0.6em; はてなブログのカスタマイズ集（すべてコピペでok）と収益化方法などのまとめ. はてなブログの読者や、Twitter、Facebook、Feedlyなどのフォロワー・読者を増やしたい人にはオススメのカスタマイズ。 多くの方々が公開しているので、好きなデザインから選んでみるとよいかと思います。 cursor:pointer; margin:1%;

.sidebar__follow-btn.-ver2 .instagram { .sidebar__follow-btn.-ver2 .hatena { .sidebar__follow-btn.-circle > span{ color: #fff; } !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)? background:#38393C; }

width:100%; margin: 0px auto 0px; はてなブログ用シェアボタンの設置. } フォローボタンも可愛らしいデザインが豊富だ。 このブログでは以下の記事を参照にした。めっちゃいい感じになるはず。 参考記事：はてなブログに11種類から選べるsnsフォローボタンをコピペ＋αで実装するカスタマイズ } フォローボタンのカスタマイズ. color: #55acee; 'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); "https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css", "http://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe", 'http://blog.hatena.ne.jp/shun_prog0929/www.ituore.com/subscribe', "https://twitter.com/intent/follow?screen_name=shun_hatena", "http://feedly.com/i/subscription/feed/http://www.ituore.com/feed", はてなブログに11種類から選べるSNSフォローボタンをコピペ＋αで実装するカスタマイズ, はてなブログの便利過ぎるテーマ「Spirea」を作った｜一瞬で自分だけのデザインにできる！. それでは記事の設置方法を説明していきます。 注意事項. font-size: 22px; border-radius: 8px; この度、はてなブログにfacebook、Twitter、Google+、Instagram、はてなブログ、feedlyの各種SNSのフォローボタンを設置しました。見ていただければ、わかる通りですが、いたってシンプルなSNSボタンです。今回は、この各種SNSのフォローボタンのコードを記事に記載しましたので、使ってみたいと … !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)? .sidebar__follow-btn > span { www.yuuu-nii.com

snsフォローボタンの設置. .sidebar__follow-btn > span:hover { flex-wrap:wrap;

box-sizing: border-box;

height: 80px; 'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs'); 学生ブロガー。大学院でプログラミングを専攻している。日本のプログラミング教育に疑念を抱く。ブログのカスタマイズが好き。, 学生ブロガー。大学院でプログラミングを専攻している。日本のプログラミング教育に疑念を抱く。.

background:#cc4895; .sidebar__follow-btn .hatena {

} .side-sp {display:none!important;} color: #38393C; border: 1px solid #55acee;

opacity: 0.8; ブログのSNSフォローボタン、はてな読者登録ボタンをおしゃれな感じにしたのでその方法を書いていきます。, 前から言ってますが、PCもいじれず自分で勉強する根性もない僕はスーパーマンたちの知恵に頼っております。, ゆきひーさんのフォローボタン使ってる方めちゃくちゃ多いんですよ。ていうか、デフォルト以外はほぼほぼゆきひーさんのやつ。オソロシイ。もうめちゃくちゃお世話になりまくってます。, 「は？ゆきひーと全然ちげえじゃん」って言われそうですが、ぼくはCSSちょこっと変えただけなんでコードの8割はゆきひーさんのヤツなわけです。, ぼくはSNSのシェアボタン（スマホの写真に写ってるカラフルなヤツ）と統一感のあるデザインにしたくてこんな形に落ち着きました。, そうですよね、そう思いますよね。でもインスタすごいかんね？というか、最近ブロガーの間でインスタが流行ってるもん！, ほら、イケハヤさん（正確に言えば高知県民ではないのか？）だってブログにインスタがっつり貼ってるし, 引用：http://www.ikedahayato.com/20151219/43438032.html, ブログで稼いで美味しいモノたくさん食べてんのか。けしからん。 ぼくも食べたい。がんばろ。, あと、ブロガーの方って結構写真のクオリティーとか気にしてデジカメで撮ったりするじゃん。それだったら、インスタやらない手はないでしょ！, しかも利用者数だってインスタのがツイッターより多いんだぜ（やぎろぐに書いてあった←）、さあこれを読んだ人はインスタとブログを連携させよう。今すぐ！, おし、言いたいことは言い切った！あとはコピペのコード貼り付けるんでサササーっといきます。, PCはダッシュボード>デザイン>記事>記事下orサイドバーへ。ぼくはサイドバーに貼ってる。,

はてな Instagram, コイツをそのまま貼って頂いても全然OKですが（ぼくのurlのままだけど）、変えたい方はコードの赤字部分をそれぞれ自分のSNSのurlに変更してください。, はてなの読者ボタンだけクセがあって、kuunerudasu/kuunerudasu.hatenadiary.jpのところですが「自分のはてなID/自分のブログのURLからhttp://を除いた部分」となるので注意！, お次はCSS。マウスオーバーしたときに、ゆきひーさんの色反転をなくして色が薄くなるようにしたので一瞬で終わります。, .follow-btn{ width: 100%;}.follow-btn a { display: block; height: 50px; line-height: 50px; width: 100%; font-size: 14px; text-align: center; text-decoration: none; }, .follow-btn .hatena { color: #ffffff; background: #3D3F44; }.follow-btn .twitter { color: #ffffff; background: #00ACEE; }.follow-btn .instagram { color: #ffffff; background:#0B3861;},