サラリーマンぽんぽん

普通のサラリーマンが日常を綴り、かつて読者がたくさんいた受験日記ブログを上回る反響を目指しますw

フラットデザインのシェアボタンを取り付けてみた!

SNSにシェアできるボタンを取り付けよう

はてなブログはデフォルトでSNSのシェアボタンがついているんですけど、いかんせん表示されるまでに時間がかかるのとせっかくデサインを変えたんだからボタンもかっこ良くしたい!

と思いたち、いろいろな記事を探してたどり着いたページのものを取り付けてみます。

フラットデザインだしカッコいいな!っていうきっかけだけですがこれを僕のブログにも使ってみました!

参考にさせていただいたサイト

今回は,だいぱんまんさんのこちらのサイトに紹介されているコードを使ってみました。

www.daipanman.com

2017/1/8に不具合の修正がされておりますので,これまで使っていた方ももう一度確認してみることをおすすめします。 こうして修正してくれるのもすごくありがたいですね。

CSSやhtmlは上のページのものを使用させていただきましたので,みなさんも上のページから確認してみて下さい。

以下は,実際に自分が実施手順をトレースしてやってみた結果です。だいぱんまんさんのページに殆ど書いて有ることをやっただけですが,読みながらやるだけで出来ちゃうわかりやすい説明になっていました。

Webフォントをインポートする

シェアボタン用のフォントを読み込みます。 目次を自動挿入するときに使ったheadに要素を追加に追加です。

www.pom2e.com

ダッシュボード→設定→詳細設定→headに要素を追加

部分に貼り付けます。

f:id:pom2e:20170118224652p:plain

CSSを貼り付ける

  1. PC用を ダッシュボード→デザイン→スパナマークのカスタマイズ→ヘッダ→タイトル下
  2. スマホ用 デザイン→スマホアイコン→ヘッダ→タイトル下

PC用の場合は,下の画像の場所です。スマホの場合は,スパナの隣のスマホボタンを押して切り替えたら出てきます。

f:id:pom2e:20170119215048p:plain

使用しているデザインがレスポンシブの場合は,スマホ用をPC用のヘッダ内タイトル下に貼り付けたら良いかと思います。私はそうしてみました。

ただ,LINEはスマホからしかシェアできないので,PCでLINEを押してもなにも起こらないという事になってしまいます。。。これはどうしようかな〜? スマホからのみ表示させるように変えてみようかなと思っています。

Htmlを貼り付ける

貼り付ける場所は,これまたAdSenseのときと一緒ですね。

www.pom2e.com

これまた,PC用とスマホ用のに種類があります。

レスポンシブなので,CSS同様,スマホ用を記事下に追加しました。

f:id:pom2e:20170118224744p:plain

これで作業は終了です!!

記事のプレビューで確認

記事のプレビューをすることで記載したCSSとhtmlが反映されたかを確認することができます。

f:id:pom2e:20170119215033p:plain

私のブログ記事にもシェアボタンが表示されました!!

f:id:pom2e:20170119215020p:plain

まとめ

  1. はてな標準装備のシェアボタンではなく,フラットデザインのボタンを取り付けてみました。
  2. Webフォントをheadに追加する
  3. CSSをデザインのヘッダ→タイトル下に記載
  4. htmlを記事の記事下に記載
  5. PC用とスマホ用2種類があるので,両方を記入すること。レスポンシブの場合は,PCのデザインをカスタマイズするボックスにのみ記入すること。
  6. LINEボタンが必要なければ,PC用を使う。

これでシェアしてくれる人が増えることを祈るばかりです笑