風の羅針盤 | Destination of winds.

【WordPress】記事下のSNSフォローボックスを見やすくしてみました

time 2016/06/01  所要時間:約 2

【WordPress】記事下のSNSフォローボックスを見やすくしてみました

どうもこんにちは。ちゃぼP(@chabo0429)です。

先日、WordPressのプラグイン「SNS Count Cache」がバージョンアップしたという記事を書いたのですが、

【WordPress】SNS Count Cacheが0.9.0へバージョンアップ!新たにPush7などへ対応 | 風の羅針盤 | Destination of winds.
このサイトでも、一生懸命にSNSからシェア数の収集を行ってくれているプラグイン、「SNS Count Cache」ですが、久々のアップデートとなったようです。

https://marubon.i…

このバージョンアップによって、TwitterやPush7のフォロワー数をキャッシュしてカウントを取れる仕組みになりました。

そこで、この風の羅針盤の記事ページの下の部分のフォローボックスの見栄えをちょっと良くしてみることにしました。

スポンサーリンク

公式のフォローボタンをやめて、アイコンフォントでフォローボタンを作ってみた

ブログをやっていらっしゃらない方は、あまり興味をそそられないと思いますが・・(^^;)

一応ね。もうちょっとオリジナリティーを出してみようということで、トライしてみたところ、いい感じで仕上げられたと思っています。

①PC表示のボックス

まず、今までのボックス。こんな感じでした。

SNS_Follow_box01

これもスッキリ綺麗でしたが、Twitterはフォロワーの数が出ていないし、ボタンの大きさもバラバラ。

まあ、用は事足りるんですが、イマイチデザインが私の美的センスを刺激してしまうものでございました。

そこで、これをこのようにしてみました。

SNS_Follow_box02

はい、ドーン(笑)

それぞれのオフィシャルカラーのボックスに全て白抜きの文字で、アイコンの右側にフォロー数を表示。

かなり美しくないっすか?(笑)

うん、いい感じだ!(ちゃぼP、悦に入るその1)

②モバイル表示のボックス

続いて、モバイル表示。

SNS_Follow_box03

このように、モバイルの場合は表示領域が狭いので、TwitterとFeedlyで一列、その下にPush7がもう一列あります。

これを新しいデザインで作ってみると・・・

SNS_Follow_box04

はいどうよ、これ!!

すげーイイじゃん!イカすじゃん!(死語)

横長の公式フォローボタンがなくなったので、横幅に余裕が出来、2列に分ける必要がなくなりました。

スッキリしていて綺麗でしょ??

うん、こりゃーイイ!我ながらよくできた。やったぜー!(ちゃぼP、悦に入るその2)

さいごに

というか、アイコンフォントとか、よくわかんなかったので、調べながらの作業でしたので、時間がかかりましたが、これでめでたく綺麗なデザインにできました。

部長に明日教えてあげよう(笑)

欲しがるかな?

部長の常連さん、どう思います?(笑)

要らないって言うかなー。

もし需要があるようなら、導入方法を記事にしたいと思います。もしよろしければコメントくださいね〜

スポンサーリンク

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

シェアしてくれると、ちゃぼPめっちゃよろこびます^^v

コメント

  • おはようございます。
    以前ナビ部長に「のぞいて見てね」といわれてお邪魔した鈴江です。
    落ち着いた感じです。吹き出しの強さがなくなって良い感じです。
    好きなデザインです。
    鈴江

    by 鈴江浩之 €2016年6月1日 5:36 AM

    • ありがとうございます!!
      昨夜突然ひらめいて作ってみました。
      後で詳しく記事にしてみようかなと思っています!

      by chabo €2016年6月1日 8:45 AM

down

コメントする




*

この記事の関連カテゴリ

関連記事



スポンサーリンク