wordpress

ソーシャルボタン設置はコレ!オシャレなフラットデザインになりました☆

ソーシャルボタン設置はコレ!オシャレなフラットデザインになりました☆

ブログのSNSのシェアボタンのデザインを変更する方法の中でも、設置する難易度は低めで見た目のオシャレなデザインを採用することが出来ました。

オシャレなフラットデザインになったSNSボタン

今回導入の際に使用しているテーマはSTINGER3ベースの「DeepJaggy-threeColumn」というテーマですが、STINGER3なら同様のカスタマイズが可能であると思います。

参考にしたページはこちらです。

ただし全てのカスタマイズが実現できなかったため、以下のように少し自己流に変更しております。

Facebook、Twitter、はてなブックマーク、feedlyでフォロー、LINEで送る、Google+でシェアの6種類のボタンから、Facebook、Twitter、はてなブックマーク、Google+の4種類のみ表示させています。

feedlyでフォローボタンの設置が私の場合うまくいかなかったので、一つ削ると5つのボタンではバランスが悪いのでもう1つLINEで送るボタンを削って4種類としました。

この方法だと、コピペだけで設置できるので何度激低いです。

feedlyでフォローボタンの設置はRSSのURLをコード内に貼り付けたりするのですが、うまくいかずエラーになってしまうので潔く割り切りました。

自己流に4種類のSNSのみに削ったコードは以下になりますので、そのままSTINGER3であればsns.phpへ元のコードを消して貼り付けてください。丸ごと入れ替えるという事です。

お次にCSSを変更しておきます。

その前にあるプラグインを入れてさらに簡易化させました。

Simple Custom CSSならレイアウトを壊さず安全です!

 ブログなどのサイトの文章中に少し個性を出してみたいと思ったら、CSS(Cascading Style Sheets)の編集を行う事でがらりと見た目を変えることが出来ます。CSSとはスタイルシートと呼ばれるものであり、サイトのデザインを編集したりする機能を持っています。初…

Simple Custom CSSというプラグインなのですが、テーマのCSSを直接いじることなくプラグイン専用のカスタムCSSエリアにCSSを追記していくだけで反映されるので、テーマのバージョンアップとかテーマの変更をした際にもCSSへの追記部分が引き継がれるという優れものです。

また自分が追記したCSSなら自分でもわかっているので、後々管理が楽という点でもお勧めです!

今回はcustom cssへと記述するコードの例です。

custom cssの最後に記述します。

本来ならSTINGER3の場合、PC用とスマホ用でCSSの記述をそれぞれ行う必要があります。

しかし、今回はcustom cssへそのまままとめて一緒に記述していますが、特に問題なく動作しています。

Simple Custom CSSというプラグインを入れているのであれば、今回やったことといえばsns.phpへHTMLコードを貼り付けて、Simple Custom CSSのcustom cssにcssをまとめて貼り付けただけです。

cssにはLINEやfeedlyのデザインを決めるコードも一緒に入っていますが、sns.phpでは記述していないので反映されることはありません。

不要な部分を削除しておきたい方は自己にて行ってください。

今回は極力簡単に行えた方法を記事にしてみました。

LEAVE A REPLY

*
*
* (公開されません)

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)