Simplicityの骨組みをフレキシブルボックスにする part2

まだ微調整と修正が必要ですが、現在当サイトはfloatを使わずレイアウトするflex-boxでSimplicityのレイアウトをしています。これによってどうなるかは、前回にも書いたとおりです。

Simplicityの骨組みをフレキシブルボックスにする
※ウチのサイトはjQueryでごちゃごちゃとしているので必ずしも下記の通りでできるわけではありませんが参考までに Simplicityの構...

変更例 ブログカード

ボックスを作るにあたり、基本縦並びにして、サムネイルとコンテンツを横並びにしたいので、そのままだとできなくはないにせよ手間なので、横並びにできるようにブログカードの設定を変えます。

functions.phpにブログカードの設定は書かれており、

※ 本来は一行で書かれていますが、わかりやすく改行しました。

ここでfunctions.phpを直接編集しても良いのですが、アップデートした時にまた元に戻ってしまうことがあるため、子テーマのjavascript.jsに.blog-card-thumbnail, .blog-card-contentを囲む.bwrapと言うclassを追加します。

これで、.blog-cardの子要素は縦並びで表示され、今囲んだbwrapの子要素を横並びにする準備ができました。

構造的には、

  • .blog-card
    • .blog-card-thumbnail
    • .blog-card-content
    • .blog-card-footer

こうなっているのを、

  • .blog-card
    • .bwrap
      • .blog-card-thumbnail
      • .blog-card-content
    • .blog-card-footer

こんな感じにしたいわけです。そこで状態として飾り付け等はナシでboxだけCSSでレイアウトすると、

※ 2014/7/7 flex部分ちょっと書き変えました

もうちょいと本来は色々できて、横幅が狭くなってきたら折り返しはどうするかなど設定もできるのですが、まぁこんな感じで。もし仮に、サムネイルとコンテンツを逆並びにしたい時は、box-ordinal-groupで順番をつければよいですしとても簡単にレイアウトできます。
.blog-card-contentの部分がフレックスになっているので、勝手に余ったスペース分だけ横に伸びるため(スペースを埋めるため)、レスポンシブのデザインにはもって来いです。

現在はベンダープレフィックス(-webkit,-moz等)をつけないとアレですが、float等を利用してレイアウトするよりも記述も減り応用も効くためレスポンシブなサイトを作りたい場合はとても有用です。

新たな問題浮上

さて、ここでひとつ問題が浮上します。
例えば、メディアクエリ等でブレイクポイントを作り、一定の画面幅になったら表示を変更するというような場合で、Googleの広告などを表示している時、スマホなどのサイズのブレイクポイントにするにあたりdisplay:noneを広告のclassに入れたりします。
画面幅を狭くして広告をCSSで消す時は普通に消えますが、表示しようとしてdisplay:blockにしたい時がその問題点。

本文下の広告が2つ入るスポンサーリンクで、画面を狭めた時右側を消すとします。で、狭めた後元に戻そうとするわけですが、ブレイクポイントで表示するようにしているにも関わらず表示されないことがあります。
Display:noneにしているだけですからdisplay:blockにすれば表示されるはずの所が表示されない。おそらく前のブレイクポイントの設定を引きずっているのが原因だと思うんですがそんな時どうするか?

まぁあまりないシチュエーションかも知れませんが、その解決方法を書いておきます。

方法は他にもありますが、例えば上記のように、window.resizeで画面幅を監視して、画面幅が800px以下になった時はモバイルメニューを表示し、それ以外の時はモバイルメニューを消して、もし広告の右側が消えている場合は表示すると言うようなスクリプトです。
isを利用して、状態が:hidden(見えていない時)を調べています。上記のスクリプトの場合、800px以下の時はCSSで#ad-box(広告を囲むために新設したタグ)の右側の広告は消すようにしてあり、800px以上になった時、つまりは画面を狭い所から広げた時に、もし右側の広告が消えていたら表示するという処理をしています。

そもそもは各端末(スマホ、タブレット)用にブレイクポイントを作ってあるわけですから、それら端末で開いた時には各ブレイクポイントの設定で表示されるため上記はあまり意味のない処理ではあります。
例えばノートPCとタブレットなどの場合、あまり画面サイズが変わらないものもあって、タブレットでは画面サイズをあまり変えることはないと思うんですが、ノートPCとかの場合画面を狭めたり色々すると思うわけです。
そういった場合のレスポンシブな処理をするために入れてある小細工と言う感じでしょうか。

まだ手を入れる所が気づいているだけでいくつかあるのですが、操作がわかる人は、モダンブラウザ各種からweb開発環境を開いて、このサイトのCSSを見てみて下さい。
ちなみに、snsボタンは面倒なため、子テーマCSSからimportしていますが、親テーマのstyle.cssはimportしていません。つまり当サイトは現在、子テーマstyle.cssとsns.cssのみで動作しているという感じです。

ブレイクポイントの見直しもしなきゃなぁと思ったり、まだ直さないといけないと言う部分もたくさん残っています。おかけでcloudさんはちょっとお休み状態です。

またflex-boxは書き方が変更されたりしています。例えば、

こんな感じに。ひとまず古い書き方でも大丈夫なようですが、場合によっては仕様変更後の書き方でやったほうが良いかも知れません。
参考: CSS flexible box の利用

スポンサーリンク

シェアする

フォローする