Simplicityの骨組みをフレキシブルボックスにする バイラルSNSボタン編

Screenshot_from_2015-03-22 11-13-48Simplicity1.5.5あたりから、SNSボタンタイプをバイラルタイプにすることができるようになっています。
寝ログでもflex-boxでのレイアウト例がとりあげられたわけですが、グローバルナビの設定だったのでウチではバイラルSNSボタンのカスタマイズを紹介したいと思います。

考え方として、基本的な設定を書いてみたいと思います。

もし、flex-boxを利用したレイアウトを考える時、その対象がリストであればULタグに対して、

liに対して、

以上でレイアウトはできますが、SimplicityのCSSはリンク(aタグ)に対して結構装飾が行われているので、そちらも書いておきます。

ul li aの部分

ulの設定から解説していくべきですが、まずul li aからしていきます。
ul li aはボタンの形状をどうするかと言う部分です。widthやheightをautoにしてあるのは、その親のliのサイズに合わせるようにしているからです。

各ボタンのタイトルはtext-alignで右寄せ、左寄せ、真ん中寄せとできます。上下の空きはpaddingで決定しています。paddingを調整することでやや上とか、やや下などの微妙な調整ができると思いますが、fontによっては若干ズレたりするでしょうから、そこをどうするかを検証する必要があるかも知れません。
またモバイル表示時にfont-sizeが16pxでは大きすぎてボタン枠からはみ出ることもあるかも知れません。メディアクエリなどを利用してfont-sizeを変更する方が良いかと思います。

ul liの部分

本来のstyle.cssの設定上では、ボタンをfloatで表示しています。つまり、横並びにして左寄せしていると言う感じです。flex-boxではそれらは必要ありませんからfloat: none;で打ち消します。
実を言うとここのheightは必要ないだろうと思います。marginで設定できる部分でもありますし。このことからオプション扱いにしています。
flexの設定は、flex: 1 25%の場合、

このような意味を持っています。

  • flex-grow: 1;としてあるものの中にflex-grow: 2が入ると他の倍の大きさになります。
  • flex-shrinkはflex-wrap:nowrapでしか効果を出せなく、flex-growとは反対に数値が大きくなると幅が狭くなっていきます。
  • flex-basisは、例えばflex-direction(flex-flow)でrowの場合は横幅を、columnの場合は縦幅を調整することになります。

min-width: 200px;と言うのは、最低200pxと設定しておき、その時の幅が200px以下になると親要素であるulに設定してあるflex-flow: row wrap;が効いて自動的に改行します。仮に最初に3列あった時、ブラウザのwindow幅が900以下になった時(paddingやmarginの関係でその全てではない)は自動で2列になり、最後に余ったボタンが1つだけなら自動で100%の横幅、2つなら50%の横幅に調整されます。
これまでの設定なら、iPhone5の画面幅(320px)なら縦1列で表示されるはずですが、現在どのファイルの部の部分で出力しているのかを調べている最中で未発見ですが、<head>の中のstyleで、メディアクエリ内にwidth:130pxが設定されているため1列にはなりません(※2015/3/23追記参照)。ここがwidth: autoになれば1列表示になるはずです。

2015/3/23追記
<head>のstyleは、親テーマcss-custom.phpに記載されています(ver1.5.8で該当ファイルの一番下)。

ulの部分

ここは、子要素であるliに対してどのように表示するかを設定します。従来であればfloatを利用するためdisplay: block;等を使ったり、横並びにするためにdisplay: inline-block;等色々とする所ですが、flex-boxを利用するため、display: flexを利用します。
端末によってはdisplay: flexが対応していないため、flex-boxを利用したり色々としないといけない部分です。

flex-flowは、flex-directionとflex-wrapを合わせたようなものです。rowが横並び、columnが縦並びの表示になり、wrapだと幅が指定幅を超えた時折り返し、nowrapだとflexされずにコンテナを突き抜けていきます。

justify-contentsは、ここでは子要素のliをどのように配置するかを指定します。例えば上記で指定しているspace-betweenでは、最初と最後をコンテナ幅ピッタリに配置して、その間にあるアイテムを均等に配置します。space-aroundでは、最初と最後の前後にもスペースを入れます。他にも、flex-startやflex-endなどの指定で、いわゆるfloatのように左寄せ、右寄せも可能です。

配置を並べ替えたい時

上記では、Simplicityが吐き出す順番でボタンが並びます。twitter,facebook,google+…と並んでるかと思いますが、class=”google-plus-btn-icon”に対して、order: 1;、class=”twitter-btn-icon”に対してはorder: 2;と言うように指定していけば、順序をcss側で制御することができます。
ここでの注意点としては、指定していない他のliはorder: 0;となっているので先頭に表示されます。表示する全てのボタンに対して数値の設定が必要かと思います。ひとつだけ先頭にしたい場合は、class=”google-plus-btn-icon”に対して、order: -1;などと指定することで先頭にすることができます。もし仮に、class=”twitter-btn-icon”に対してはorder: -2;と指定すると、twitterのiconが先頭になることに注意が必要です。

逆順で表示したい時は、flex-flow: row-reverse wrap;等でできるのですが、行ごとに逆順だったと思うのでここも注意が必要です。これはwrapに対してreverseが設定されていないから行ごとになりますが1行で全てが収まる場合は全てのボタンを逆順で表示できると思います。
flex-flow: row-reverse wrap-reverse;とすれば全体的に逆順になるかと思います。

Simplicityでのセレクタ指定

タイトル下のSNSボタンの場合は、#sns-group-top ul(li a)と、#sns-group-top以下の要素に指定しますが、それぞれの要素(ulやli)にclassが指定されているので、仮に、

子テーマにこう書いて適用させた時、例えばul.snsbの指定が適用されているような場合は、.snsbのプロパティを#sns-group-top ulの中のプロパティで上書きしたり、打ち消したりしなくてはいけません。
もしくは、たいてい親テーマの.snsb等が適用されていると思うので、子テーマに.snsbを追加して打ち消すプロパティを指定すれば良いことになります。

親テーマに書いてあるだけのプロパティ等ならなんとかできたりもしますが、中程に書いたように<head>のstyleで指定してあるような場合は、その元を探すしか無いので案外大変です。それでも内容がわかっていれば子テーマで書き換えればよいだけなんですが、案外気が付かないものです。
設定はちゃんとしたのに反映されないという場合は、ブラウザのweb開発環境等でよく調べる必要がありそうです。

記事下のSNSボタンは #sns-groupの子要素なので、そこを上記などを参考に変更すればタイトル下のSNSボタンとはまた違う並びのボタン(例えばPCの場合1列で表示とか)を作ることもできます。

2015/08/01 現在の設定

See the Pen WordPressTheme Simplicity sns button setting by Hidekichi (@Hidekichi) on CodePen.

上記の本体アドレス:http://codepen.io/Hidekichi/pen/EjGmwQ/
codepenに、現在の設定部分を書き出しました。元ファイルがscssなので、そのまんまですが、上記アドレスより本体にアクセスしまして、右側CSSの部分よりview compiledボタンを押すとcssになります。自動でプレフィックス付くので、たぶんそのまんまで大丈夫なんじゃないかなぁと思います。
もしかしたら、この部分以外にも設定があるかも知れません。
jsの部分に説明を書きましたが、cssの途中にある /* custom setting */(わかりやすいように大きくコメントアウトしてます)の部分が必要な部分で、それよりも前のつらつらと書いてあるものは、ボタンの色やその他諸々のオリジナルで言うsns.cssあたりの部分です。今は統合されたり色々な状態になっているので、子テーマに追記する必要はありません。resultで見栄えがわかりやすいように入れてあるだけです。

子テーマstyle.cssに追記する場合は、必ず View Compiled ボタンを押して、CSSにしたものを追記してください。

不明な箇所があったらコメントでお願いします。

スポンサーリンク

シェアする

フォローする

コメント

  1. 梅本 より:

    僕もsimplicityのテーマを使っています。
    iPhoneでの表示が気に入らず色々と調べていたら
    このブログにたどり着きました。
    どこを探してもないので
    もしよければこのサイトのようなバイラルSNSボタンの作り方やどこに上記のコードを入れたらいいか教えていただけないでしょうか?

    • hidekichi より:

      どうもはじめまして。
      バイラルボタンは、子テーマstyle.cssに書くだけでイケたと思います。
      ちょっとコメントではそこそこ長くなってしまうので、この後、記事中に現在の設定を書き出しておきます。
      ただし、うちの環境はちょっと特殊で、親テーマstyle.cssをはじめ、その殆どを1つのファイルにまとめて書いてありますので、子テーマstyle.cssに現在の設定を書くだけでは適用されない部分があるかも知れません。
      その際は、FirefoxやChrome等のモダンブラウザF12キーよりweb開発環境を開いて、セレクタ・適用しているスタイルシート等を調べて不必要なプロパティをコメントアウトするか、打ち消す設定を入れなければならないことを先に述べておきます。そのまま子テーマに書けばイケるかも知れませんが、これは何とも言えない部分ですので。

      web開発環境はデベロッパーツール等の名称でも検索できるので、使い方等は色々探してわかりやすい記事で確認してください。