スマホのヘッダーにつきまして

前のは試してみたんですが面倒臭いのと、ちょっと仕様を変えないといけないので、サックリとjQueryでやってみました。子テーマjavascript.jsにまんま追記して下さい。

サンプル: 画面サイズでサイトタイトルのテキストと画像を入れ替える | jsFiddle

一応、リサイズも設定できるようにしてあります。
サンプルでは440px以下の場合画像が表示するようにしてありますが、スマホの横向きの場合も考えて、あるいは実機で確認してみて、サイズを調整して下さい。
ただし、スマホの場合は、サイトhead内のviewportの設定でだいぶ表示が変わります。ここらも留意するべき部分です。

もし、スマホのサイトディスクリプションが不要なのであれば、
if (window.innerWidth < 440)の過去の中に、
$(“#site-description”).addClass(“descriptionSwitch”);

その下のelseの中に
$(“#site-description”).removeClass(“descriptionSwitch”);
を入れて下さい。(※ サンプルではコメントアウトしてあります)

あと、サンプルのcssを子テーマstyle.cssの最後に追記して下さい。
サンプルページの右下リザルトは、その境界線をマウスでドラッグすることでサイズを変えることができます。

× if (window.innerWidth < 440)の過去の中に、
◯ if (window.innerWidth < 440)のカッコの中に、

す、すごい…（汗）
「サックリと」でこんなことができるのですね…

Hidekichi様ありがとうございます！
完璧です！

内容はあまり理解できないので（汗）取り敢えずご教示頂いた通り javascript.js を子テーマに丸ごと追記しました。

ロゴ画像をどこに入れるのかちょっと迷いましたが、

var title = “Simplicity”,
img = “http://wp-simplicity.com/wp-content/uploads/2015/11/KHQEKCKQOX.jpg&#8221;;

の img = の画像URLをロゴ画像のものと交換してみて表示できました。
この時点でスマホのロゴ画像はサイズなども完璧にフィットしました。

PCで確認してみたところタイトルが「Simplicity」になってしまっていたので、ちょっと焦りましたが（苦笑）、これも var title = “Simplicity”, の部分を自分のサイトタイトルに変更することで解決できました♪

実機で確認＆横向きではテキストのタイトルになる（！）を確認。これで完璧でしたので、サンプルの css を子テーマの style.css に追記するのを忘れてしまってたのですが、もし width を変更したければこの styli.css の 300px の数値を変更するばよい、ということになりますでしょうか？

さらに

＞スマホのサイトディスクリプションが不要なのであれば

とのことですが、これは現在の設定ではサイトディスクリプションを表示する設定になっていると理解してよろしいでしょうか？

> もし width を変更したければこの styli.css の…

サイトタイトル部のimgに対しては、cssでしかスタイルしてないので、style.cssでいじくってもらえれば色々とできると思います。

> 現在の設定ではサイトディスクリプションを
> 表示する設定になっていると理解してよろしいでしょうか？

スクリプト側で表示させているのではなく、表示されているものがあれば、スマホのサイズになった時(サンプルでの440px)非表示にでき、PCの際表示することができるという意味です。
もしすでにカスタマイズされていて非表示にされているのであれば、jQueryで操作しなくても良いかと思います。

なるほど了解しました！

Hidekichi様、何から何までありがとうございました！