「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の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. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

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

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

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

10 投稿
3 ユーザー
7 Likes
1,232 表示
(@やなぎ)
Active Member
結合: 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)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

やなぎさん

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

やなぎさんは、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独自の親子テーマの問題の解消をなさることを、強くお勧めします。

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

 

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


   
わいひら reacted
(@やなぎ)
Active Member
結合: 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)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

やなぎさん

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

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

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

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

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

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

   
わいひら reacted
(@やなぎ)
Active Member
結合: 3年前
投稿: 12
Topic starter  

@mk2_mk2 

mk2様

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

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

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

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


   
わいひら reacted
はる
(@haruinoue)
Noble Member Moderator
結合: 4年前
投稿: 1062
 

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

@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 

   
わいひら reacted
(@やなぎ)
Active Member
結合: 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)
Illustrious Member Moderator
結合: 3年前
投稿: 6776
 

やなぎさん

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

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

   
わいひら reacted
(@やなぎ)
Active Member
結合: 3年前
投稿: 12
Topic starter  

@mk2_mk2 

mk2様

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

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


   
(@やなぎ)
Active Member
結合: 3年前
投稿: 12
Topic starter  

@haruinoue @mk2_mk2 

はる様 mk2様

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

大変感謝しております。

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


   
共有:

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

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

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

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

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

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

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

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