medium_2283270415 (1)
photo credit: Lucy Nieto via photopin cc

ブログをカスタマイズする中で、とあるプロパティを利用する事で比較的簡単にデザインを変更出来る事を知りましたのでシェアしてみたいと思います。PonDadです。

目次

  1. web-kitとは
  2. ソーシャルボタンの設置
  3. フレキシブルボックスレイアウト(flex-box)を利用する
  4. まとめ

web-kitとは

WordPressのテンプレートの中でも良く見かけるコードだったのですが、内容は今ひとつ分からず今まで触っていなかったのですが、こちらのプロパティを利用する事で想像以上にCSSを利用して豊かな表現が出来る事を知りました。

では、このweb-kitというのは何なのでしょうか。Wikipediaには以下の様に記述されています。

WebKit(ウェブキット)は、アップルが中心となって開発されているオープンソースのHTMLレンダリングエンジン群の総称である。HTML、CSS、JavaScript、SVG、MathMLなどを解釈する。
WebKitは、元々アップルのMac OS Xに搭載されるSafariのレンダリングエンジンとして、LinuxやBSDといった、Unix系用のレンダリングエンジンであるKHTMLをフォークして開発された。現在はその他の多くのプラットフォームに移植されている。

まあ、これだけ見ると余計訳が分からなくなりそうですが、Appleが中心となって開発されている様なので信頼出来そうです。(どうも調べてみるとGoogleとAppleで共同で開発したものの様ですが、Googleは袂を分かったようです)

このweb-kitを利用する事で、web上で様々な表現が可能になっています。私自身はほんの一部しか理解していませんが、それでも記述が飛躍的に楽になったので、その記述例を紹介したいと思います。

ソーシャルボタンの設置

こちらに関しては様々な記事で紹介されていますので割愛します。@shirose_jpさんがこちらの記事でかなり分かりやすく記述されているのでご参照下さい。→「記事共有用のソーシャルボタンを WordPress に手動で設置する方法(Twitter、Facebook、はてなブックマーク)

ソーシャルボタンを何も装飾せずに並べるとこのような表示になると思います。

HTML

<br />
&lt;!-- シェアボックス --&gt;<br />
&lt;div class=&quot;tori&quot;&gt;トリ&lt;/div&gt;<br />
&lt;div class=&quot;oyayubi&quot;&gt;親指&lt;/div&gt;<br />
&lt;div class=&quot;tasu&quot;&gt;たす&lt;/div&gt;<br />
&lt;div class=&quot;bu&quot;&gt;ぶ!&lt;/div&gt;<br />
&lt;!-- シェアボックス --&gt;<br />

CSS

<br />
	/*トリとか親指の装飾*/<br />
.tori {<br />
    color: #00acee;<br />
   padding: 5px;<br />
   font-size: 20px;<br />
}<br />
.oyayubi{<br />
    color: #3b5998;<br />
   padding: 5px;<br />
    font-size: 20px;<br />
}<br />
.tasu{<br />
    color: #db4a39;<br />
  padding: 5px;<br />
    font-size: 20px;<br />
}<br />
.bu{<br />
   color: #008de1;<br />
  padding: 5px;<br />
    font-size: 20px;<br />
} </p>
<p>

TwentyThirteen簡単カスタマイズ【サイドバー・フッター・投稿ページのカスタマイズ】 | TwentyThirteen 2013-10-24 16-05-20 (1)

これを横並びにきれいに並べたい、と思ったのですが、以前なかなか上手くいきませんでした。オーソドックスな方法としては要素を「ul」「li」要素で囲んで空間を調整するのが一般的な様です。

しかしながら…なかなか知識がないと「li」要素の前に黒丸が出没して消せなかったり、回り込み解除が上手くいかなかったり、となかなか上手にレイアウト出来ません。さて、困った。

フレキシブルボックスレイアウト(flex-box)を利用する

上述のweb-kitの中にフレキシブルボックスレイアウト(flex-box)というプロパティがあり、こちらを利用する事で誰でも簡単に(そう、私でさえ)きれいにソーシャルボタンを並べる事が出来ます。

記述はこのように行ないます。(classを.share boxと指定してみました)

HTML

<br />
&lt;!-- シェアボックス --&gt;<br />
&lt;div class=&quot;sharebox&quot;&gt;<br />
&lt;div class=&quot;sharebox-item tori&quot;&gt;トリ&lt;/div&gt;<br />
&lt;div class=&quot;sharebox-item oyayubi&quot;&gt;親指&lt;/div&gt;<br />
&lt;div class=&quot;sharebox-item tasu&quot;&gt;たす&lt;/div&gt;<br />
&lt;div class=&quot;sharebox-item bu&quot;&gt;ぶ!&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;!-- シェアボックス --&gt;<br />

CSS

<br />
/*シェアボックス*/<br />
.sharebox{<br />
    display: -webkit-box;<br />
    display: flex box;<br />
    background-color: #f6f6f6; /*背景の色を指定*/<br />
    border: 1px solid #ddd; /*背景の枠線を指定*/<br />
}<br />

これで、flex-boxの中にソーシャルボタンがきれいに並べる事が出来ます。

TwentyThirteen簡単カスタマイズ【サイドバー・フッター・投稿ページのカスタマイズ】 | TwentyThirteen 2013-10-24 16-04-17 (1)

このflex-box、更にボックスの中の要素の位置を変更する事が出来ます。圴一に並べたり、縦に並べたり、はたまた要素の並び順を変更したり、といった事も可能です。

今回はボックスの中央にレイアウトする様に指定してみます。

-webkit-box-pack: center;というプロパティを利用します。(先ほどのclassに追加して、あたらなclassの.sharebox-pack-centerを追加します)

記述はこのように行ないます。

HTML

<br />
&lt;!-- シェアボックス --&gt;<br />
&lt;div class=&quot;sharebox sharebox-pack-center&quot;&gt;<br />
&lt;div class=&quot;sharebox-item tori&quot;&gt;トリ&lt;/div&gt;<br />
&lt;div class=&quot;sharebox-item oyayubi&quot;&gt;親指&lt;/div&gt;<br />
&lt;div class=&quot;sharebox-item tasu&quot;&gt;たす&lt;/div&gt;<br />
&lt;div class=&quot;sharebox-item bu&quot;&gt;ぶ!&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;!-- シェアボックス --&gt;<br />

CSS

<br />
/*シェアボックス真ん中*/<br />
.sharebox-pack-center{<br />
  -webkit-box-pack: center;<br />
}<br />

この様に並びました。

TwentyThirteen簡単カスタマイズ【サイドバー・フッター・投稿ページのカスタマイズ】 | TwentyThirteen 2013-10-24 16-07-45 (1)

その後要素の周辺をmarginで、レイアウト内の空間を調整したいときはpaddingで調整すれば完成です。

記述例です。ボタンの左右に少し空間を空けてみました。

HTML

<br />
&lt;!-- シェアボックス --&gt;<br />
&lt;div class=&quot;sharebox sharebox-pack-center&quot;&gt;<br />
&lt;div class=&quot;sharebox-item tori&quot;&gt;トリ&lt;/div&gt;<br />
&lt;div class=&quot;sharebox-item oyayubi&quot;&gt;親指&lt;/div&gt;<br />
&lt;div class=&quot;sharebox-item tasu&quot;&gt;たす&lt;/div&gt;<br />
&lt;div class=&quot;sharebox-item bu&quot;&gt;ぶ!&lt;/div&gt;<br />
&lt;/div&gt;<br />
&lt;!-- シェアボックス --&gt;<br />

CSS

<br />
/*シェアボックスの要素を装飾*/<br />
.sharebox-item{<br />
  margin: 0 20px;<br />
}<br />

表示例です。

TwentyThirteen簡単カスタマイズ【サイドバー・フッター・投稿ページのカスタマイズ】 | TwentyThirteen 2013-10-24 16-15-46 (1)

まとめ

このflex-boxの良いところはやはりその名の通り、画面幅に合わせて設定した表示を維持してくれるところです。レスポンシブテーマを使用している方などにも使い勝手が良い様に思います。

注意点としては、いわゆるモダンブラウザと呼ばれるものにしか対応していない様なので、古いIEなどでは正確な表示が出来ない様なのでそこはご了承下さい。(私はSafariとChromeでしか確認していません…)

このweb-kit、この様にボックスのレイアウトだけでなく、本当に様々な表現が可能な様なので、機会を見て他の表現もシェアしてみたいと思います。

※記述方法など不備がありましたらコメントにてご指摘下さい。

参考文献

CSS3逆引きデザインレシピ
原 一成
翔泳社
売り上げランキング: 182,466