タイトル位置の変更について

実はいま、別のテンプレートをサイトに設定しておりまして、Simplicityはまだ有効化されていない状態なんですが、大丈夫でしょうか？（カスタマイズ後の確認はライブプレビューで行っています）
サイトはhttp://mp37fm.sakura.ne.jp/です。

Theme Test Driveプラインで作成中の新しいテンプレートを見られるようにしたので、そちらからご確認いただけますでしょうか？
ユーザー名「test」、パスワード「testsimplicitystes」でログインすると、Simplicityで表示されるはずです…

サイトを見せてもらいました。
通常の背景画像(幅いっぱいではない方)がサイトのヘッダに入っていて、サイトタイトル・ディスクリプションあたりが重なってる状態ですかね。

> 現状、ヘッダ画像の上に被さっているタイトルの位置を、
> ヘッダ画像の左上へ移設したいのですが、
> どうすればよいでしょうか。

ということですが、「ヘッダ画像の左上へ移設したい」は重なっている状態でタイトルを左上ギリギリに配置したいのか、

タイトル
[ヘッダ画像]

というようにしたいのかどちらでしょう？

もし後者であれば、
サンプル: 一定のアスペクト比を保つヘッダー画像 レスポンシブ | codepen

こんな感じに出来ます。ただしこれは、Simplicityのデフォルトのスタイルシートではなく、以前トピックを立てられた方のスタイルシートを読み込んであるので、このまま利用しても正しく動作しないかも知れません。が、こんな感じでやることもできますし、またタイトルだけを背景の外に持って行くことも可能です。

またタイトルの色等でなにか見えやすくするのではなく、「左上」に移動させる他の理由もあれば書いてもらえるとより希望にそえるかも知れません。

Hidekichiさん
わざわざありがとうございます。

タイトルの位置は、Hidekichiさんが仰っておられるように、

タイトル
[ヘッダ画像]

というように、完全にヘッダ画像とタイトル部分を分離したいです。
ちょうど、今使っている（ログインしていないユーザーに見えている）Twenty fourteenのような感じにしたいです。

タイトルを移動させたい理由なんですが、ヘッダ画像を、「ブログ（サイト）のタイトルの背景」といった感じに扱うのではなく、普通のサイトでいうところの「トップ画像」的な役割を持たせたいと思いまして、今回こちらで分離に関してご相談させていただきました。

サンプル: #site-titleを移動 | codepen

このサンプルでは、#site-titleを#headerの親のheaderタグの最前列に移動させています。

しかし別の方法もあります。
#headerに背景画像が入っているのでサイトタイトルと重なりますが、#headerよりも下に画像が入る分のブロックを作り、そこに画像を入れればSimplicityの構造はそのまま、画像を挿入することもできます。
jQueryでする場合はどこにでもどのようにでも画像を入れられ、またそのスタイルもcssで操作することができます。
PHPでももちろん同様にすることが可能です。ただし、親テーマなどのアップデートで再度設定し直す必要があるので面倒といえばそうです。

画像に関してもcssで設定しておけば、挿入したい箇所にjQueryでブロックを入れるだけで、その背景の画像はcssで設定されていますから、ブロックの挿入のみで済みます。
imgタグを入れたい場合は、ブロックの挿入+imgタグ(class入り)としてjQueryで挿入することでアスペクト比を任意のものにして挿入することもできます。

逆を言えば上記のように画像を入れず、サイトタイトルを挿入するというのも可能です。cssでsimplicityのタイトルを非表示にしておき、サイトタイトルを別途任意の箇所に入れるということでも実現は可能です。

いろいろとありがとうございます。
#headerの下に画像表示エリアを作るという方向でいこうと思います。
アップデート時の問題は、子テーマにhome.phpを入れて解決しようと思います。
聞いてばかりになってしまって申し訳ないんですが、この画像表示エリアに、wpのヘッダ部分のように、ランダムに画像を表示させることは可能でしょうか？

多分言われているのは、こういう感じではないかとサンプルを作りました。

サンプル: #headerに別の画像を入れて任意の間隔でランダム表示 | codepen

間隔は10秒です。画像のアドレスを追加するだけでいくつも画像が切り替わります。
画面幅に対して16:9で画像が表示されるようにしてあります。ここらはPCの場合大きすぎると思うので任意調整して下さい。cssでpadding-top:56.25%これが16:9です。メディアクエリでそれぞれの時のpaddingを設定すればできます。

画像切替時の処理を入れたので、切り替え間隔は10秒にしてあります。ここらをもっと凝る場合は、それに合わせて切り替え間隔を調整してください。
切り替えのアニメーションは単純にfadein-outしているのではなく、cssを$.defferdという奴で切り変えています。これは処理が完了した時に次の処理へと繋ぐためのものです。
これを上手く活用すれば、もっと凝った画像切り替えが可能です。例えば、次の画像を一枚用意しておいて、最初のを消すことでクロスフェードさせたりとか、その他諸々。

imgタグの親になるブロックを挿入する箇所を#header-inの(.after→).appendにすれば、サイズは自動でSimplicityに追従します。現在は、別でブロックを入れてあるために、各々好きなサイズにできます。その例としてひとつタブレット用のメディアクエリを入れておきました。

× $.defferd
◯ $.Deferred

いろいろとありがとうございました。
とりあえずimgタグの挿入でなんとか対処しました。
ランダム表示時も後ほど試してみます。ありがとうございました。