キャッチフレーズ位置変更

俺ならこうするシリーズ

#header .alignleft {
  display: flex;
  flex-flow: column wrap;
}

#site-title {
  order: 2;
}

#site-description {
  order: 1;
}

ベンダープレフィックスはつけてないので、別途付けてください。ちなみに、画像ロゴはどんなのかわからないので上記の例としては、通常のタイトルとディスクリプションを入れ替える方法です。
位置を変えることにより、マージンやらパディングが色々おかしなことになると思うので、そのあたりは要調整です。

毎度お世話になっています。

要調整が知識に追い付かなさそうでしたので、
今回はheader-logo.phpのタグ位置を、

<h1 id=”site-description”>
<?php echo $site_description ?>
</h1>
<h2 id=”site-title”>
<?php echo $site_title ?>
</h2>

上記に入れ替えて解決しました。
ご教授ありがとうございました。

header-logo.phpをいじくると親テーマのアップデートのたびに修正しないといけないのを記憶しておいてください。あれ？子テーマにheader-logo.phpありましたっけ？

解決された処理を見ると、jQueryで簡単にできそうな感じです。

つまりは、

(function($){
	$(function(){
		$('#site-title').replaceWith("<h2>"+$("#site-title").html()+"</h2>");
		$('#site-description').replaceWith("<h1>"+$("#site-description").html()+"</h1>");
		$('#h-top h2').prependTo("#h-top .alignleft");
	});
})(jQuery);

こういう感じです。これなら子テーマjavascript.jsに追記するだけでよいので、親テーマのアップデートに影響されません。また以前は、#site-titleがh1、#site-descriptionがh2だったと思うんですが、現在はpタグになってるようなので、どちらも対応できるようにidからタグの付け替えしてみました。

タグをつけかえた後、#h-top .alignleftの先頭にh2を持って行くことで位置の変更をしています。
まぁjQueryの場合は一瞬チラつくと思うので、phpの方がさっくりイケるにはイケルんですけどね。

そのphpとjQueryよりもサックリといけるのがcssではあるんですが・・・ここらはまぁ好きな感じで良いと思います。