Cocoon設定・モバイル・モバイルボタン

にある

サイトヘッダーロゴを表示する

モバイルでヘッダーロゴを表示するか。

ロゴを表示するようにして、保存すればどうでしょう？

@kautakku　返信ありがとうございます。設定してみたのですが上手く反映されませんでした。

追加で気づいた事なのですが、PC上でもブラウザを縮小するとロゴヘッダーが途中でなくなってしまいます。

連投申し訳ないです。

ロゴヘッダーではなくヘッダー背景に変更し画像を読み込んで

サイトヘッダーロゴを表示する

モバイルでヘッダーロゴを表示するか。を設定するとモバイルでも反映されました。

しかし見切れてしまうので、できれば画像の大きさのままで表示させたいなと思っています。

カスタムCSSというところに以下のCSSを書いていらっしゃるようです。

/*端末幅が768px以下のとき*/
@media screen and (max-width: 768px){
#header .site-name-text{
display: none;
}
}

ちょっと、場所が特定できないのですが・・

上記のCSSをコメントアウトして試してみてください。

その場合は、背景画像ではなく、ロゴ画像の方でイケそうな気がします。

カスタムCSSの場所は、おそらく、プラグインの

Simple Custom CSS 4.0.3

の中ではありませんか？

この画像自体、テーマ側では背景画像として認識していると思います。
実際テーマ設定でも背景画像として設定されているかと思います。
背景画像の場合は、そのような表示になる仕様です。

背景画像を全部毎回表示するには、JavaScriptで縦横比を保持するスクリプト子テーマのjavascript.jsに書くしかないかもしれません。

あと画像的に、「背景の猫の絵」と「サイト名の文字列」部分は分離して、文字列は別に作成して、「ロゴ画像」として設定するとか。
そうすれば「ロゴ画像」だけは少なくとも表示されると思います（背景画像は提示されたように縮小されるけど）。

@yhira さん

もともと、ロゴ画像として設定されていたようです。

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/
.header-in {
    width: 100%;
}

.logo-image{
  padding: 0;
}

.logo-image span, .logo-image a {
    width: 100%;
}

.header-in img {
    width: 100%;
}

上記のCSSも設定されていたようですし。

ただ、

/*端末幅が768px以下のとき*/
@media screen and (max-width: 768px){
#header .site-name-text{
display: none;
}
}

これで、けしちゃってたみたいです。

@mayutarou さん

どこに以下のCSSを書いたか、思い出しましたか？

/*端末幅が768px以下のとき*/
@media screen and (max-width: 768px){
#header .site-name-text{
display: none;
}
}

@leafytree　ありがとうございます。プラグインを挟んで記述していましたのでsimple Custom CSSの中にありました。自分でコピペして書き足していたものなのでこれしか見当たりませんでした。

コメントアウトしましたが、表示されませんでした。

@mayutarou　さん

あら、上手くいきましたね。 ? 

その下の、

/*端末幅が480px以下のとき*/
@media screen and (max-width: 480px){
#header .site-name-text{
display: none;
}
}

も、コメントアウトしてみてください。

ブラウザのキャッシュを削除してみてください。

まだ、480px以下の方が生きてしまっていますね。

コメントアウトしてみてください。

こんな感じです。

/*端末幅が768px以下のとき
@media screen and (max-width: 768px){
#header .site-name-text{
display: none;
}
}
*/

/*端末幅が480px以下のとき
@media screen and (max-width: 480px){
#header .site-name-text{
display: none;
}
}
*/

@yhira　詳しくありがとうございます。CSSでは難しいのですね。

JavaScriptですか、プログラミングは知識不足でどう記述すれば良いか分からないです；

@mayutarou さん

CSSでもできます。

いま、途中まで、出来ていますよ。

私のWindows環境のFirefoxでは、モバイル表示でも上手く表示出来ていますよ。

Macでは、どうでしょうか？

ブラウザのスーバーリロードは、やってみましたか？

私の環境では以下のように見えています。

@leafytree　480pxをコメントアウトし、先ほどスーパリロードやってみました。

なるほど・・・こっちのキャッシュが上手く反映されてなかったという事ですね。

わぁすごい！！！どの端末も表示されています！本当に感謝です。

プログラミングは勉強不足なので今回すごく勉強になりました！

無事に解決できました＾＾ありがとうございます！！

かわいいヘッダー画像ですね！

@leafytree　ありがとうごさいます！そう言ってもらえるなんてとても嬉しいです＾＾！

このねこちゃん達でブログを色々展開していこうかと思っています。

また分からない事がありましたらお世話になると思いますが、その時はよろしくお願いします。