特典機能について

モバイル版トップページのヘッダー背景画像のサイズを変えたいです。 | Cocoonテーマに関する質問 | Cocoon フォーラム

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
モバイル版トップページのヘッダー背景画...
 
共有:
通知
すべてクリア

[解決済] モバイル版トップページのヘッダー背景画像のサイズを変えたいです。


やなぎ
 やなぎ
(@やなぎ)
ゲスト
結合: 3か月前
投稿: 12
Topic starter  

【モバイル版トップページのヘッダー背景画像のサイズを変えたいです。】
 

トップページのみヘッダー背景画像を他のページと違うものを表示するようにしたく、
現在PC版の表記にてトップページのみstyle.cssにて画像を指定をしています。
そのせいなのか、モバイルで表示すると画像サイズが大きすぎて表示されていない状態です。

モバイル版もPC同様にトップページのみ他のページと違うヘッダー背景画像を指定したいのですが
こちらの表示サイズはCSSで指定することは可能なのでしょうか?

またCSS以外に上記仕様にする方法がありましたらご教示いただきたいです。

 

色々自力で調べてみたのですが、どうしてもわからず、色々試してみても希望通りにならないため、
皆様のお力をお借りしたく書き込み致しました。
こちらのの解決方法をご存じの方がいましたら、ご教示いただけますと幸いです。

 

▼ワードプレス環境
使用サーバー:ConoHa
使用テーマ:cocoon
使用スキン: ぽんひろさんの「Season (Winter) 」をベースに、自分好みにカスタマイズしてます
現在使用している背景画像サイズ:
トップページ:固定ページをトップに設定しています。
※PC表示でトップページのみヘッダー背景画像を変更しているのは、下記をstyle.cssに記入しています

/*トップページ*/
.home .header{
background-image: url('画像URL');/*もしくはテーマ設定で設定したもの*/
}
.home .header-in{
height: 750px;/*好みの高さ*/
}

 

 

----------------------------------------------
サイト名:柳 萌奈 オフィシャルサイト
サイトURL: https://moena-y.com
ホームURL: https://moena-y.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon
スタイルシートURL:/wp-content/themes/cocoon-child
親テーマスタイル:/wp-content/themes/cocoon/style.css
子テーマスタイル:/wp-content/themes/cocoon-child/style.css
スキン:/wp-content/themes/cocoon/skins/skin-season-winter/style.css
WordPressバージョン:5.8.1
PHPバージョン:7.4.16
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.4
カテゴリ数:5
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.2
style.cssサイズ:1805バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2021/09/phonto.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.12
BackWPup 3.10.0
Broken Link Checker 1.11.15
Category Order and Taxonomy Terms Order 1.5.7.7
ConoHa WING コントロールパネルプラグイン 1.1
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.4.2
Edit Author Slug 1.8.3
EWWW Image Optimizer 6.2.5
Rinker 1.9.1
SiteGuard WP Plugin 1.6.0
TypeSquare Webfonts for ConoHa 2.0.2
WP Multibyte Patch 2.9
XML Sitemaps 4.1.1
----------------------------------------------


未解決
mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2311
 

やなぎさん

お問い合わせとは別件ですが、先にすべきことがあります。

やなぎさんは、ConoHa独自に改変を行った親子テーマをインストールなさっています。

そのため、標準フォルダとは別の場所にインストールされています。

テンプレートURL:/wp-content/themes/cocoon
スタイルシートURL:/wp-content/themes/cocoon-child

その結果、ダッシュボードからの親テーマのアップデートができない状態のようです。

テーマ名:Cocoon
バージョン:2.3.4

現在の最新版は2.3.6で、少々古いようです。

この問題を解決しておかないと、今後ずっとバージョンアップができません。

まずは、親子テーマの問題を解決なさることをお勧めします。

対処方法は、以下のトピックをご参照ください。(リンク先とその1つ下。)

https://wp-cocoon.com/community/postid/55462/

 

また、以下のプラグインの不具合の影響を受けている可能性がありますが、まずは、親子テーマの対処をしていただかないと、はっきりは分かりません。

(投稿者アーカイブページの投稿者名が表示されていない)

TypeSquare Webfonts for ConoHa 2.0.2

 

まずは、ConoHa独自の親子テーマの問題の解消をなさることを、強くお勧めします。

そこそこ作業量がありますので、お時間のある時に、作業なさるのが良いと思います。

 

解消しましたら、改めて最新の環境情報のご提示をお願い致します。


わいひら 件のいいね!
やなぎ
 やなぎ
(@やなぎ)
ゲスト
結合: 3か月前
投稿: 12
Topic starter  

@mk2_mk2 

mk2様

ご指摘ありがとうございます。
こちらこのような状態になっていることを知らなかったため、大変助かりました。

ひとまず、親子テーマの部分について、リンク先をもとに対処してみました。

ちなみに「投稿者アーカイブページの投稿者名が表示されていない」件ですが、
こちらは「Cocoon設定」→「本文」の箇所にある「投稿者情報表示設定」で「投稿者名の表示」にチェックを外しているのですが、こちらが関係しているのでしょうか…?
(基本的に私以外が投稿することが無いため、非表示にしております。)

 

親子テーマの修正について、きちんと出来ているか少々不安ですが、
対処後の環境情報を以下に提示します。

----------------------------------------------
サイト名:柳 萌奈 オフィシャルサイト
サイトURL: https://moena-y.com
ホームURL: https://moena-y.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
親テーマスタイル:/wp-content/themes/cocoon-master/style.css
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
スキン:/wp-content/themes/cocoon-master/skins/skin-season-winter/style.css
WordPressバージョン:5.8.1
PHPバージョン:7.4.16
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/93.0.4577.82 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:2.3.6
カテゴリ数:5
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.3
style.cssサイズ:1810バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Font Awesome:5
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/uploads/2021/09/phonto.jpg
----------------------------------------------
ブラウザキャッシュ有効化:1
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:1
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1.12
BackWPup 3.10.0
Broken Link Checker 1.11.15
Category Order and Taxonomy Terms Order 1.5.7.7
ConoHa WING コントロールパネルプラグイン 1.1
ConoHa WING 自動キャッシュクリア 1.0.0
Contact Form 7 5.4.2
Edit Author Slug 1.8.3
EWWW Image Optimizer 6.2.5
Rinker 1.9.1
SiteGuard WP Plugin 1.6.0
TypeSquare Webfonts for ConoHa 2.0.2
WP Multibyte Patch 2.9
XML Sitemaps 4.1.1
----------------------------------------------


mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2311
 

やなぎさん

只今スマホからで、調べるのは難しい状態なのですが。

環境情報を拝見する限りは、親子テーマは上手くインストールされたと思います。

「投稿者アーカイブページの投稿者名が表示されていない」件ですが、
こちらは「Cocoon設定」→「本文」の箇所にある「投稿者情報表示設定」で「投稿者名の表示」にチェックを外しているのですが、こちらが関係しているのでしょうか…?
(基本的に私以外が投稿することが無いため、非表示にしております。)

これは、上記とは無関係だと思われます。
今調べることができませんので、確実なことは言えませんが。

私が言っているのは、添付の左側の人型のアイコンの部分です。

 
以下のプラグインに不具合があったような記憶があります。
TypeSquare Webfonts for ConoHa 2.0.2
もし、ご利用になっていないようでしたら、上記プラグインを無効化してみてください。
 
それでアイコンの右側に、投稿者名が表示されるようであれば、上記プラグインの不具合だと思われます。
 
 
本題については、他の方をお待ちください。
 
私はしばらくスマホですので、確認できなさそうです。

わいひら 件のいいね!
やなぎ
 やなぎ
(@やなぎ)
ゲスト
結合: 3か月前
投稿: 12
Topic starter  

@mk2_mk2 

mk2様

ご返信ありがとうございます。

ご指摘いただきましたプラグインを無効化したら、投稿者名の表示がされるようになりました。
ありがとうございます。

本題の内容に関しましては、他の方よりご回答いただけることを待ちたいと思います。

この度はありがとうございました。


わいひら 件のいいね!
はる
(@haruinoue)
メンバーサイト Moderator
結合: 1年前
投稿: 802
 

モバイル表示時のヘッダーのサイズについては

@media screen and (max-width: 834px) {
  .home .header-in {
    height: 300px;/好みの高さ*/
  }
}

で調整できます。

「横幅が834pxより小さい端末の時は、ヘッダーの高さを300pxにする」という内容です。


現在ヘッダー背景画像は以下URLになっていて、画像は表示されていないようです。

 https://lh3.googleusercontent.com/V7Ic_YG-EjolET6sCtoXqSuGUnDYbPS6URF7smCIupTID1s9qkLehWTs_gmVBPWo6NmbyzqG0MpHti0gsKCacKWPuxiB2eyG6m3qVfSPKrav7QgLNRZ1qaq_AHtsDdHwhklwGa09eArfEbzXRxvOUTcfc47wF3n8E5hk1CGSmnPVNJfFfsHx89Pu6lHSsrRWJZe3jD02lmDeeCcj_PKA7iDBDh3R0kiL5zjH51omHvb1pudKHU1G1XkJE8963ETO_F_auXvckZiMgvuw7dwVzSH-RoAKWjr8RavN2a_b_GngAYXVA0g0DFNPHCTBn-cWBIBBRkHgFH7cvPUdc44MuoEwqp5kM2E_M7vpKErPVYFT3Jg3QQ-Vty0mX6tI_pWVAGUzzDSGdFlgOqKCnmS6uvYmAfS_C1YOg7tGZh8ZljmLjLZOo1USlk5Fi3mQIQPfICs2nWjk7sYZ1EVpuYVxfzZxfAXOfs4MMhKSdXzj_zXSGUyXTiktQTsEKNMtuSTYip4KCzjzyZwUkO6mbaqsnUvsDIKSW93CI1LFQGXOoCCXr3GkciALh5uuqSWtOqKFC2p_sSqLGSRI93vLeYMcKDnTqU6qTQYws5E1SZf1YfKkfRFL_OvG6wkXJJNW-EBOf5Z1_25an02_EldT738UghJwHsWfGg3OmNlaQ1d8ndGu2yoyICClb7j01nhFwcz9U9KBHgVfsmyT9eyFMHhebk-f=w1270-h662-no?authuser=0

わいひら 件のいいね!
やなぎ
 やなぎ
(@やなぎ)
ゲスト
結合: 3か月前
投稿: 12
Topic starter  

@haruinoue 

はる様

ご教示ありがとうございます!
ご教示いただきましたCSSタグで画像サイズの調整ができそうです!

しかしながら、こちら現在画像が表示されていない原因が分からずでして…

現在、PC用の表記で使用しているタグを参考に下記のように設定してみましたが表示されずです。
(CSSの知識が無いため、タグが間違えているかもしれません><)
※画像のURLはPC用のトップで使用しているものと同じものです。

@media screen and (max-width: 834px) {
 background-image: url('https://lh3.googleusercontent.com/V7Ic_YG-EjolET6sCtoXqSuGUnDYbPS6URF7smCIupTID1s9qkLehWTs_gmVBPWo6NmbyzqG0MpHti0gsKCacKWPuxiB2eyG6m3qVfSPKrav7QgLNRZ1qaq_AHtsDdHwhklwGa09eArfEbzXRxvOUTcfc47wF3n8E5hk1CGSmnPVNJfFfsHx89Pu6lHSsrRWJZe3jD02lmDeeCcj_PKA7iDBDh3R0kiL5zjH51omHvb1pudKHU1G1XkJE8963ETO_F_auXvckZiMgvuw7dwVzSH-RoAKWjr8RavN2a_b_GngAYXVA0g0DFNPHCTBn-cWBIBBRkHgFH7cvPUdc44MuoEwqp5kM2E_M7vpKErPVYFT3Jg3QQ-Vty0mX6tI_pWVAGUzzDSGdFlgOqKCnmS6uvYmAfS_C1YOg7tGZh8ZljmLjLZOo1USlk5Fi3mQIQPfICs2nWjk7sYZ1EVpuYVxfzZxfAXOfs4MMhKSdXzj_zXSGUyXTiktQTsEKNMtuSTYip4KCzjzyZwUkO6mbaqsnUvsDIKSW93CI1LFQGXOoCCXr3GkciALh5uuqSWtOqKFC2p_sSqLGSRI93vLeYMcKDnTqU6qTQYws5E1SZf1YfKkfRFL_OvG6wkXJJNW-EBOf5Z1_25an02_EldT738UghJwHsWfGg3OmNlaQ1d8ndGu2yoyICClb7j01nhFwcz9U9KBHgVfsmyT9eyFMHhebk-f=w1270-h662-no?authuser=0');/*もしくはテーマ設定で設定したもの*/
}
@media screen and (max-width: 834px) {
.home .header-in {
height: 280px;/好みの高さ*/
}
}

トップページのみ、違う画像を指定しているため、
「cocoon設定」→「ヘッダー」で色々修正しても、トップページの画像が表示されない状態です。

こちらの原因・対処法についてご存じでしょうか?

五月雨式の質問となってしまい、申し訳ございません。
ご存じでしたら、ご教示いただけますと幸いです。


mk2
(@mk2_mk2)
メンバー Moderator
結合: 9か月前
投稿: 2311
 

やなぎさん

添付いただいた画像のURLにアクセスすると、以下のようにログイン画面が表示されます。

 
Googleドライブに保存された画像なのでしょうか?
 
その場合は、参照権限がないと、表示されないと思います。
(権限がない場合は、ログインが必要。「共有化」というのでしょうか。)
 
ただ、権限を付与(共有化)したとしても、外部参照になってしまいますから、表示速度は落ちますし、あまりお勧めはしません。
 
画像をサーバーに取り込んだ方が良いように思います。

わいひら 件のいいね!
やなぎ
 やなぎ
(@やなぎ)
ゲスト
結合: 3か月前
投稿: 12
Topic starter  

@mk2_mk2 

mk2様

ご指摘ありがとうございます!

googleドライブよりURL化してしまっておりました。
一度、画像をサーバーに取り込んでからURL化してCSSに反映してみます!


やなぎ
 やなぎ
(@やなぎ)
ゲスト
結合: 3か月前
投稿: 12
Topic starter  

@haruinoue @mk2_mk2 

はる様 mk2様

この度は質問へのご回答ありがとうございました。
無事に、自分の理想の表示にすることができました!

大変感謝しております。

本当にありがとうございました!


わいひらmk2 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

Cocoon
タイトルとURLをコピーしました