##業務目標
会社として立ち上げるオウンドメディアの準備もいよいよ佳境に入った。環境としては、WordPress4.7.13 + Sango 1.8.2テーマが採用されたが、
<body class="home blog">
<div id="container">
<header id="header">"メニューバーを含むヘッダー"</div>
<div id="header-image">"カバー写真"</div>
<div id="content">"記事一覧"</div>
</div>
</body>
となっているのを、どうしても、
<body class="home blog">
<div id="container">
<div id="header-image">"カバー写真"</div>
<header id="header">"メニューバーを含むヘッダー"</div>
<div id="content">"記事一覧"</div>
</div>
</body>
に入れ替えたい。
つまり、カバーを上のほうに持ってきてインパクトを狙いたいのだ。
###課題
なんだ、単にテーマファイルをいじればいいじゃないか？
そう思うだろうか。しかし社会は甘くないのである。
#####テーマ改修リバート問題
どんなテーマにもいえることだが、子テーマの改変でカバーできるCSSとは異なり、HTML/PHP構文本体の改修は、テーマのアップデートによってリバートされてしまう。
子テーマにindex.phpを入れて親テーマをバイパスすればリバート問題こそ解決するが、親テーマのアップデートにおけるindex.phpへの変更が反映されず、他のファイルのみがアップデートされる事態となり、遅かれ早かれ矛盾して500 internal errorと相成りそうである。
そのため、子テーマCSSの改修のみで、目標を達成する必要があるのだ。
###試行
(CSS改修だけで実現できることは前提）
####@saksak氏 【レスポンシブ】PCとスマホでdivの順番を入れ替える
こんなのを発見したので、とりあえずトライ。CSS flexboxという最新仕様を使うそうな。
#####特長
- レスポンシブ対応である。
flexboxの対象にするためには、CSS上でセレクタを指定して、「display:flex」を付与するだけでよいそうな。いけそうじゃん！
(display:flexは)親要素に加える必要がある唯一のプロパティです。その子要素は自動的にflexアイテムになります。
通常の上⇒下の表示は
.flex-container {
flex-direction: column;
}
になるそう。
これを今回のケースにあてはめると、div id="container"にdisplay:flexとflex-direction: columnを設定すれば、子要素のdivはみなflexになるはずだ。
（ただし、引用したQiitaでは、「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンドです。を利用してるので若干定義のしかたが違う。
#####Orderを定義
さて、いよいよ、子要素のdivにorderを設定。
「order」のデフォルト値: 0なので、
#container{
display: flex;
flex-direction: column;
}
#header-image{
order: -1;
}
##できたっ！！
試行1回目でうまくいくって普通ないことです。記念にヘンリー・フォードの名言を。
There is no man living who isn’t capable of doing more than he thinks he can do.
どんな人間も、自分が思っている以上のことができる。