Simplicityを少し改造してみた part11 SNSボタンのhtml構造とcssの改造案

現在のSimplicityのSNSボタンの構成は、色々な機能がついたと言うこともあって、該当するsns-***.phpに普通にhtmlが書かれているわけではありません。なので、改造しにくい部分でもあったりするのですが、このhtmlを共用しながらcssだけで表示を変えれれば、色んなデザインをcssで行うことができます。

現在のSimplicityのSNSボタンのhtml構造

一部evernoteなどで例外があるものの、このような感じになっています。はたしてここまでの構造が必要かどうかを考えてみたいと思います。

まずは、上から行きましょう。
<div id=”sns-group-top” class=”sns-group sns-group-top”>ですが、僕が思うに、IDはそのページに1つだけしか無いセレクタですから、ここは次のように修正できます。

そして、次の<div class=”sns-buttons sns-buttons-pc”>ですが、おそらくここはmobileかpcかというのを仕分ける部分だと想定すれば、先ほどのdivに、

こう書くのが良いでしょう。これで、#sns-groupのtop位置にあるpc用の表示というのがわかります。cssで言うと、

こんな感じで書くことができると思います。ただし、シェアボタンは複数用意する場合があります。デフォルトでは、記事タイトル下と、記事下ですね。そうなると、IDを使うのが正しいのかどうかを考えてしまいます。なので、ここは

<div class=”sns-group top pc”>とする方が良いかと思います。またレスポンシブで表示できるのであればpcと言うクラスを入れるのも必要かどうかも考えさせられます。ただ、フォントのサイズやその他機能を入れるために必要な場合もあるので、ここはひとまずこのままにしておきます。

次に出てくるシェアメッセージ。ここはこの#sns-groupのブロックの中で唯一pタグが使われていますので、クラスは必要ありません。直接pにスタイルすればよいのです。

ここからリストの部分になります。
<ul class=”snsb snsb-balloon clearfix”>、これを読むと、snsb(おそらくsnsボタン)で、種類がsnsb-balloonで、改行させるよと言うように読めます。しかしながら、最後のclearfixは機能していないようです。おそらくはデフォルト(非同期機能がないボタン等)のボタンや何かしら必要なものがあってそれが残っているだけでしょう。

ulのボタンはその表示する種類が書かれているようです。それならば、

これだけで良いように思います。今回はulのみの場合、公式のデフォルト表示にしますので、classも必要ありません。

リストアイテムの部分は、<li class=”balloon-btn twitter-balloon-btn”>このようになっています。先ほどulで表示するボタンの種類を入れましたので(あるいは入れる予定なので)、クラスのballoon-btnはもちろん必要ありません。次のtwitter-balloon-btnも、balloonボタンであると既にわかっているので、もしここに入れるとすれば、twitterだけで良いわけです。先ほどのulと合わせて、

こういう感じになります。しかし、ここにtwitterは必要でしょうか?確かに、そのリストアイテムはtwitterであると言う識別には良いかも知れません。しかし、ボタン全体のliは横サイズやmargin-bottomを設定しているため、必ずしもtwitterを入れる必要はないわけです。ただ、書いておくとtwiterのカウント、twitterの色と便利に使える場合もあるため、ひとまずここは無くても良いのですが、保留ということでtwitterだけ残しておきます。

ここからが問題点です。SimplicityのSNSボタンは、そのSNSのアイコンとカウントを表示する部分から作られています。該当部分のcssを見た方はご存知でしょうが、横並びにするためにfloatを利用しています。またカウント部分とアイコン部分もfloatにより横並びになっています。

floatと言うスタイルは、本来回り込みに利用します。floatされた例えば画像は浮いている状態になり、右にも左にも移動させることができます。またそれが文章の中であれば文章は画像を回りこんで表示されるためとても便利なのですが、それを制御するためにSimplicityでは、<span class=”balloon-btn-set”>という見えないブロックを用意しています。

構造的にはこんな感じです。

この、.balloon-btn-setがあるおかげで、その中にある、.arrow-boxやicon-twitterなどが変な所に飛んでいかないようになっているわけです。しかし、実はこの.balloon-btn-setは必要ありません。これが必要なのはfloatで中身を右寄せや左寄せしているためなのです。
本来必要なものは、アイコン部分であり、カウント部分だけです。またそれらのリンクも必要でしょう。ここから、次のように変更できます。

ここまでをまとめてみました。

現在、simplicityでは、アイコン部分と、カウント部分が、以下のようになっています。これをaでspanを囲むように変更しました。

これは、spanの中のaである場合は、aタグに囲まれているアイコンやカウントの数字などしか反応エリアがなく、とても狭い場合があるからです。aの中のspanにすれば、spanの幅全体が反応エリアになります。そうでなくても小さい部分ですから、モバイルファーストで考えればこのようにした方が良いかと思います。

元の構造から見てみると、大きく構造が変わったわけではありませんが、セレクタや不要部分が整理されて、わかりやすい構造になったと思いますがどうでしょうか?

ここまでの情報から、実際どうなるのかをサンプルで表示しておきます。

See the Pen wordpressTheme Simplicity SNS button custom html&css by Hidekichi (@Hidekichi) on CodePen.

cssを考えてみる

ここからは、変更したhtmlの構造から、cssをどうすればよいかを考えていきます。
最初の<div class=”sns-group top pc”>はどこに入れるかと言う仕分けになります。.topだけではわからないので.sns-group.topがどういうものかを入れる必要があります。また、SNSボタンの記事下の部分にしても、同じようなボタンを入れるわけですから、

このような感じになるかと思います。他にもpaddingやその他諸々の設定が必要になるかも知れません。

シェアメッセージの部分。pタグになりますが、これは色々な使い方ができます。例えば、そのまま段落として表示しても良いですし、.sns-group.topにrelativeが仕込んでありますから、position:absoluteなどにして、左右の隅や、微妙な微調整もできます。好きにデザインできる部分になります。

ここからが本番です。現在のSimplicity公式のSNSボタンをノーマルバージョンとして説明します。

floatは使わない、今はもうflexの時代なのですよ

さっくりと書いていきます。ちなみに、記事タイトル下と、記事下のSNSボタンを何かしら変更しない場合は、.sns-group ulなどのようにして.topや.bottom専用の書き方は必要ありません。

まずはここまで。ulはdisplay: flexになっています。その他のベンダープレフィックスがついている部分はdisplay: flexがわからないブラウザに対するものなので、おまじないみたいな感じに思って下さい。
ここで重要なのが、display:flexにした時に、flex-flow: row wrap;となっている所です。display: flexでは、まず表示をflexでいくよと宣言します。flex-flowのrowは横並びです。wrapは中身が端末の画面幅によってあふれた場合に折り返すと言う意味合いになります。

これだけで、レスポンシブになるのです。

リストアイテムを並べるために、flexで横並びにすると言うのが理解してもらえればOKな部分です。しかしこれだけだと、各リストアイテムが横並びになるだけで、その中身のアイコンやカウントの部分は横並びになりません。

更に重要なこととして、ここでは基本部分を作るのでulの.balloonクラスは何も指定しないということです。リストアイテムであるliの部分は、width: 90px; height: 20px; になっています。これがいわゆるバルーンボタンのボタンサイズになります。縦幅が必要ならheightを大きくすればそのサイズのボタンができます。横幅はあまり大きくする必要はありませんが、シェア数が4桁、5桁と凄いサイトならもう少しあっても良いかと思います。たいていは上記設定でイケるかと思います。

また、liの中にもflexが出てきます。これは、アイコンやカウント値を横並びにするものです。liのmarginはボタン周囲にどれぐらいスペースを開けるかと言う設定になります。

続いて、リストアイテムの中身アイコン部分と、カウント値回りの設定になります。

アイコン部分

リンクの部分です。オリジナルではここに色々と設定がされていますが、リンクには色やサイズ等の設定は必要ありません。アンダーラインを消すだけでOKです。

まずアイコン部とカウント値の部分はどちらもspanで設定しました。なのでそのどちらにも共通な設定をまずまとめて書きます。ここでは、フォントサイズを14pxに設定して、テキストの位置をセンターにしてあります。

.iconの部分は、サイズをwidth: 30px; height: 100%にしてあります。このheightはliの縦幅となります。なので、liのheightを大きくすればそれに追従するように、.iconの縦幅も大きくなります。

その次の、.icon:hover::before部分。これはフォーラム(iOS8.4.1で2クリックしないとリンクが飛べない問題)で知ったのですが、iOS8.4.1の場合、a:hoverの中にopacity(透明化)が仕込んであると、1発でページ移動ができないらしく、2回クリックせねば飛ばないというある意味バグみたいなものがあったりするので、オリジナルのopacityを擬似要素beforeを利用して、beforeの背景色にrgbaの数値(赤、緑、青、アルファ)で透過した色を重ねることでオリジナルと同じような効果を狙ったものです。

このトピックでレスもしたのですが、

このような状態なら1発で飛べるみたいなので、opacityを仕込む場合はaタグではなく、その中の要素に仕込むと良いみたいです。今回cssでは擬似要素を使っているので、また別のアプローチでデザインすることも可能です。例えばアイコンにhoverした時、擬似要素のcontentプロパティで「share」などと文字を入れてみたり、background-colorではなく、何かしらの画像を使うことで別の演出をすることも可能です。

カウント部分

カウントの基本部分はアイコン部分と同じように、横幅の設定をして、縦幅は100%でliの縦幅に追従させます。違う部分は、カウント値のフキダシの三角を擬似要素beforeとafterで作っている部分です。cssによる三角の作り方は説明が長くなるので他のサイトに任せます。上記だと左向きの三角ができる事になります。

以上で、オリジナルと同じような並びでdisplay: flexを利用した表示が可能になります。ただし、これらはhtmlの構造が今回改造したものになった場合に正しく適用されますので、cssだけをstyle.cssに書いても思った通りの結果にはなりません。予めご了承下さい。

htmlの構造を変えずに、追加cssのみでバルーンボタンにさせる

こうするためには、ulにclassをつけて元々のulのプロパティを継承しながら上書きします。

まず、リストアイテムの高さを80pxにします。デフォルトの横並びの表示時は、flex-flowをrow wrapにしました。しかし、今度は縦並びにするので、flex-flowはcolumn wrapになります。他は基本設定のプロパティから引き継がれるので上書きする部分は以上になります。

次に、htmlの構造をspanの中のaでは反応エリアが狭いということから、aの中にspanを入れるようにしたので、それぞれのaに対してorderを入れることでアイコンとカウント部分の並びを逆にしています。他にも方法はありますが、まぁこれで良いのではないかと。

バルーンボタンのアイコン部、カウント部の設定

アイコン部分はデフォルトの横並びとは代わり、横を100%にします。100%の値はliのwidthになります。heightを35pxにして、高さを設定します。またこの時、中に入るアイコンが画像ではなくテキストなので、line-heightを設定しています。font-awesomeの場合は、高さと同じにすると概ね良いようです。

カウントの部分もアイコン部分と同様ですが、こちらはfontにArialが利用されています。このフォントの場合は、人それぞれの感覚で微調整が必要かも知れませんが、概ねline-heightは33pxで真ん中あたりに見えました。

.count::before部分のbeforeとafterは縦並びになったため、カウント部分のフキダシの矢印が横ではなく下につくために変更になる部分です。この時、デフォルトのものは、top:50%、left:0で設定し、transformのtranslateにて自身を-50%上に動かしてセンターをとっていましたが、矢印が下につくということから、bottomに設定をしています。
しかし、プロパティは継承されるのでbottomに設定を入れたとしても、topの値も残ってしまいます。なのでここはtopにinitialを入れてtopの値を初期化しています。

以上で縦並びのバルーンボタンができます。

SNSボタンの背景色

ちょっとサンプルとは構成が異なるので以下のような感じで背景色が付けられると思います。
それぞれのliにはSNS名のclassが入っているものとする。

以上です。
また、ひとつだけ問題点があります。デフォルトでは、evernoteの部分でカウント部がclipになっています。そのため、デフォルトのhtml構成のように.countが入るべきspanをとってしまうと、フキダシ部分が上記cssでは作れません。他にもボタンのclassなどの構成を共通にして、aタグのhref部分を無くしたりなどで対応する必要があったりしますので注意して下さい。

基本構造ができていたら、それをリデザインするというのはとても簡単にできるというのがご理解頂ければ幸いです。
かなりの長い記事になってしまいましたが、ひとまずcss部分とhtmlの基本構造のカスタマイズはこんな感じになります。

スポンサーリンク

シェアする

フォローする