スポンサーリンク

スポンサーリンク

つぶやき

【つぶやき】オリジナルSNS フォローボタンを作ってみた!

2018年11月8日

シェア

 

  • 2018年11月9日
    シェアボタンをカスタマイズしたので追記しました。
フォローする?

 
『Feedly』をはじめたのをきっかけに「フォローボタンを作ってみよう!」と思い、アイコンフォントを導入したりしました。

 

きらり
SNSボタンはもう設置されてるのになんで変えようと思ったの?
結耶
シェアボタンはプラグインやテーマ(Stinger Plus2)のボタンで文句はないんだけどね。
フォローボタンがいいのが見つからないんだもん!

 

 

シェアボタンに関しては簡単に設置できるプラグインやテーマのボタンで文句はありません。
ですが…フォローボタンについては使っているプラグインにはTwitterやGoogle+など一部しかなく、テーマのボタンではシェアボタンもフォローボタンも『同じ』ものになってしまいます。

各SNSのボタンのコードを設置しようと思っても大きさがバラバラ(^-^;

とにかくフォローボタンに関しては気に入るものがなく、「こうなったら自作するしかない!」と思い、Twitter、Feedly、RSSの3つを自作してみました。

 

 

自作しようと思っても

いざ自作しようと思ってもブログ初心者の私にはどう作ればいいのかわかりません。

なので

 
こちらのデザインをお借りすることにしました。

そしてCSSとHTMLのコードをコピペして表示してみたら…

こんな風になってしまいました(^-^;

 

きらり
あらら。結耶直せるの?
結耶
やってみましたよ!私の知りうる限りの知識で!w

 

 

細々と修正

まずは『黒ポチ』を消さなくてはいけません。
これは簡単にHTMLの最初のulにCSSでlist-style:noneを追加。
これで黒ポチが消えます。

続いて上気になる2つの枠。
「どうして2つ表示されるんだろう」と思ったら、テキスト部分のdivを消すと消えたので、divをspanに変更。
divをspanに変更すると当然CSSが反映されなくなるのでCSSの/*ボタン内テキスト調整*/の『.flowbtn2 div』のdivをspanに変更。
これでテキスト部分にCSSが反映されます。

そして今度は上にズレているアイコンの調整です。
これはCSSの/*ボタン全体*/に『padding-top:10px;』を追加。

 

きらり
これで直ったの?
結耶
ほぼね。あとはパソコンとスマホで確認しながらさらに細かいところを直したけどね(^-^;

 

スポンサーリンク

 

 

ボタンが完成しさらに気になるところが!

フォローする?

 
完成したボタンを記事などに貼り付けてみると別のことが気になりはじめる。

きらり
今度は何が気になるの~!

 
私はシェアボタンにプラグインとテーマのボタンを使っていました。

デザインが違うソーシャルボタンが3種類…。ユーザーが混乱しそうです。
とりあえずフォローボタンとシェアボタンの2種類にしたいところ。

なので、テーマのボタンを上に表示させ、プラグインを辞めることにしました。
その方がブログが軽くなるようだし!

 

結耶
でもテーマのボタンはデカすぎる~!

そして現在テーマ(Stinger Plus2)のソーシャルボタンのカスタマイズをしようと思っていますw

きらり
結耶にできるの~(¬_¬)
結耶
わからないけどやってみる~!
できなければ簡単なプラグインのボタンに変えます(^-^;

 

 

2018年11月9日 追記

シェアボタンのカスタマイズ

早速シェアボタンのカスタマイズをしてみました♪

このシェアボタンのカスタマイズは無料テーマ『Stinger Plus2』のシェアボタンです。

まずはシェアボタンをカスタマイズするために

 
ことらの記事を参考にさせていただき、私はStinger Plus2の子テーマを使っているので子テーマに『sns.php』をコピーして書き換え。
書き換えると言っても中身を削除してコピーしたコードを貼り付けるだけw

そして『style.css』にCSSをコピーして追加。
ただ、上記の記事のCSSではなかなか私好みにならないため、カスタマイズ前に使っていたCSSも使うことに(^-^;

さらにトップページのシェアボタンも同じようにするため、上で書き換えた『sns.php』コピーして、ファイル名を『sns-top.php』に変更して、子テーマフォルダにアップロード。

記事上部に表示させるためにコピーした『sns.php』のファイル名を『sns_kizi_top.php』に変更して子テーマフォルダにアップロード。

Stinger Plus2の記事上部にシェアボタンを表示させる方法については下記の記事を参考にさせていただきました。

 

結耶
これでとりあえずソーシャルボタンのカスタマイズは終わり~♪
きらり
以外に早かったね!

 

 

カスタマイズ終了

さらに細々とカスタマイズしてなんとかソーシャルボタン完成です♪

最終的にシェアボタンは6個のボタンを横並びにしてみました!

ブログ初心者の私にはなかなかハードルが高い(^-^;
それでも私の乏しい知識でなんとか出来ました。

いい勉強になりました!

 

スポンサーリンク

 

フォロー

 

応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら Contact

 

ブログサークル
ブログにフォーカスしたコミュニティーサービス(SNS)。同じ趣味の仲間とつながろう!

 

おすすめ

おすすめ

       
シェア

-つぶやき

Scroll Up

Copyright© きらり☆彡 , 2018 All Rights Reserved Powered by STINGER.