今回は、WordPressの公式テーマを、自分好みにカスタマイズしようかと考えているときに発見したTipsです。公式テーマのstyle.cssを変更したくて、Chrome Developer Toolsをごにょごにょ触っているときに発見しました。
目次
DOMは指定して移動ができる
私の場合、ナビゲーションバーを変えたら、レイアウトがどうなるかを見たかったので、Elementパネルから該当するdiv要素をクリック。
（画像の赤枠で囲っているdiv要素をクリックすると、画面上で青枠部分が指定される）
そのままドラッグアンドドロップで、自分の好きな位置にdiv要素を移します。するとレイアウト上でもナビゲーションバーが移動していることが分かります。
（赤枠で囲っているdiv要素を移動させることでナビゲーションバーも一緒に移動）
DOMが書き換わっているだけなので、リロードすれば、元の画面に戻ってしまいます。実際の画面に反映させたければ、wp-contentのphpファイルを変更させます（今回の場合はheader.php)。
ドットインストールのレッスンにもありました！
今回の記事を書いてみて、Developer Toolsの用語とかを調べていたら、ドットインストールのレッスンでも説明されていましたね。
動画の例では、p要素を上下に移動させているようです。(1:24ごろ)Developer Toolsには、他にも便利そうな機能がありそうなので、他のレッスンを受けてみますか！
〔参考サイト〕