特典機能について

スマホ ヘッダーロゴ画像 | Cocoonテーマに関する質問 | 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. ブラウザ環境チェックツール

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

スポンサーリンク
共有:
通知
すべてクリア

スマホ ヘッダーロゴ画像


おすし
 おすし
(@おすし)
ゲスト
結合: 1年前
投稿: 25
Topic starter  

お世話になっております。
いつもcocoonを使用させていただき誠にありがとうございます。

スマホとPCのヘッダー画像をそれぞれ別のものを使用したいと考えているのですが、何か良い方法はありますでしょうか。
色々探したのですが、それらしき回答を見つけることができませんでした。

ご回答いただけますと幸いです。
宜しくお願い致します。
----------------------------------------------
サイト名:おすし修行ログ
サイトURL: https://airlineman.com
ホームURL: https://airlineman.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン:5.4.1
PHPバージョン:7.3.17
ブラウザ:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:en-US,en;q=0.9
----------------------------------------------
テーマ名:Cocoon
バージョン:2.1.5.4
カテゴリ数:4
タグ数:21
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.1.1
style.cssサイズ:13016バイト
functions.phpサイズ:203バイト
----------------------------------------------
Gutenberg:0
AMP:0
PWA:0
Font Awesome:4
Auto Post Thumbnail:0
Retina:0
ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:0
CSS縮小化:0
JavaScript縮小化:0
Lazy Load:0
WEBフォントLazy Load:0
----------------------------------------------
利用中のプラグイン:
Contact Form 7 5.1.8
WP Mail SMTP 2.0.1
----------------------------------------------


引用解決済
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

べつに、私は、おすしさんの担当じゃないのですが・・

 

こんな記事ありましたよ。

 

PCとスマホでヘッダー画像を切り替える方法

 

私は、やったことないですが・・

 

Cocoonでも、出来るかどうか、おすしさんが試してくださると、皆さんも真似できるかもしれませんね。


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

おすしさんのサイトの場合は、1023pxが切り替えポイントみたいですね。

 

もし、Cocoonでも、出来るようでしたら、CSSのコードも紹介していただけると、皆さん、参考にできるかもしれませんね。

 

頑張ってみてください。


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

PHPか、JavaScriptじゃなきゃできないかと思ったのですが・・

前述のリンクの記事のやり方でもできるのかな・・

@media screen and (max-width: 1023px) {
.logo-menu-button img {
display: none;
}
.logo-menu-button .menu-button-in::after {
background-image: url(モバイル時の画像のパス);
background-size: 100% auto;
content: "";
display: block;
height: 44px;
width: 209px;
margin: 0 auto;
}
}

またまた、適当に書いたものなので、間違っているかもしれません。

実際のところは、私もよくわかりません。

モバイルのときとPCのときで、違う画像という発想がありませんでした。


Ikumiわいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

おすしさん

私、思ったのですが・・・

 

前のトピックで、1枚の画像だけで、ヘッダー画像を上手く配置する方法のアドバイスをさせていただいたのですが、それだと、当然、モバイル表示のときは、中央の文字が小さくなっちゃう訳ですよ。

 

そこで、モバイルのときだけ、画像を取り替えたくなっちゃう訳ですよ。(すみません。これは、推測です。)

 

そうじゃなくて、振り出しに戻って、2枚の画像を使ってヘッダーのデザインをすればいいのではないかと思います。

 

このCocoonのサイトは、ヘッダーの背景画像に、1024px × 309px の画像を使い、ヘッダーのロゴ画像の方に、200px × 88px のサイズの画像を使っているようです。

 

つまり、ロゴ画像と背景画像を分離して2枚の画像を用意すれば良い話なんです。

 

おすしさんのヘッダー画像のサイズは、1900px × 400px ですから、そっちを、フライトアナウンスだけの画像にして、ロゴ画像は別に作ればいいんです。

 

png画像は透明をサポートしているので、ロゴ画像の方は、背景色を半透明の白にすれば、今までと、ほぼ同じデザインにできるはずです。

 

2枚の画像を重ねて表示するイメージです。

 

当然、前のトピックで、1枚の画像だけでヘッダー画像を配置するために設置した、CSSのコードは、不要になりますよね。

 

そう言う私のサイトも、1枚の画像とテキストのサイト名で作ってるんですけどね。

 

 


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

ちなみに、「エアライン情報を発信」は、ロゴ画像には含めずに、Cocoon設定のキャッチフレーズのところに入力するようにすれば、このCocoonのサイトと同じ仕様になるのではないかと思います。

 

ロゴ画像のサイズは、Cocoonのサイトに近いサイズでいいのではないかと思いますが、ご自身で、いろいろ試してみてください。


わいひら 件のいいね!
返信引用
おすし
 おすし
(@おすし)
ゲスト
結合: 1年前
投稿: 25
 

@leafytreeさん

毎回本当にありがとうございます!
お返事が遅くなり誠に申し訳ありません。

アドバイスいただいた通り今夜試してみよう思います。
また結果報告させていただきます。


リフィトリー 件のいいね!
返信引用
おすし
 おすし
(@おすし)
ゲスト
結合: 1年前
投稿: 25
 

https://airlineman.com/
試してみたのですが、うまくいきませんでした汗

背景画像:1900×400ピクセル
ロゴ:101×262ピクセル
(cocoon設定上では1300×800に今はなっています)

PC画面だとなぜかロゴ画像も全体に広がっており、モバイルでは依然として小さくなってしまっております。

モバイルでは横全体(メニューや検索部分にかかるくらい)まで伸ばしたいと考えているのですが、何か方法はありますでしょうか。


返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

@おすし さん

ちょっと、良く見ている時間がないのですが、このまえ、追記した、ヘッダー画像用のCSSをコメントアウトするか、削除するかしないと、ロゴ画像も大きくなってまうはずです。

 

どのCSSを追記したか、覚えていますか?

 

前のトピックを参照してください。

 


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 
投稿者:: @おすし

モバイルでは横全体(メニューや検索部分にかかるくらい)まで伸ばしたいと考えているのですが、何か方法はありますでしょうか。

これは、PC用にきちんと設定できてから、考えれば良いかと思います。

何もかも、いっぺんにはできないです。

 


わいひら 件のいいね!
返信引用
おすし
 おすし
(@おすし)
ゲスト
結合: 1年前
投稿: 25
 

お忙しい中ありがとうございます。

コメントアウトしたところ、ロゴ画像が大きくなる問題は解消できました!
モバイル画面でロゴ画像を大きく表示させるとこはもう少し調べてみようと思います。


返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

@おすし さん

おお、イケるじゃないですか。

 

PC用のロゴもちょっとデカすぎなので、たしか、Cocoon設定で、サイズ指定できたような気が・・

 

「ヘッダー」タブの設定項目を見てください。


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

@おすし さん

ロゴ画像の背景は、白無地の半透明には作れませんか?

画像加工ソフトか何かで・・

フライトアナウンスボードの画像がロゴの背景にも混ざってしまっています。

文字の背景は白無地で、半透明にしましょう。

 

あ、でも、そうすると、モバイルのときにヘッダーモバイルボタンの白地に馴染んでしまうかな?

Cocoonのサイトは確か白地にロゴだったような・・

ああ、間違えました。

Cocoonのサイトは、青い背景色にしているんですね。


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

@おすし さん

良く考えて、デザインしないと、難しいですね。 🤣 

でも、やり方は、理解できてきたみたいなので・・(言い訳(汗))

 

そうそう、いろいろ試して!!

試せば、好きなデザインにできるかも!


わいひら 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

@おすし さん

PCのブラウザの画面幅も広げたり、縮めたりしてみて、見え方が、どのように変わるのか、確認してください。


返信引用
おすし
 おすし
(@おすし)
ゲスト
結合: 1年前
投稿: 25
 

背景とロゴのつながりは少し理解できた気がしたので、ちょっとずつずらして納得のいく形に持っていきたいと思います!


リフィトリー 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

@おすし さん

そうですね。

その理解が大切なんだと思います。

確か、いくみさんのサイトが、とても参考になるはずです。

えーと、どこにリンクあったかな・・


返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

ありました。

こちらです。

[Cocoon] ヘッダー画像サイズと選ぶポイント


わいひら 件のいいね!
返信引用
おすし
 おすし
(@おすし)
ゲスト
結合: 1年前
投稿: 25
 

ありがとうございます!
明日また試してみたいと思います!

毎回とても丁寧に説明していただき誠にありがとうございます。


わいひらリフィトリー 件のいいね!
返信引用
uiko
 uiko
(@uiko)
ゲスト
結合: 1年前
投稿: 12
 

今更かもしれませんが、参考になると思います。

https://bibabosi-rizumu.com/cocoon-header-logo-each-page/

 


わいひら 件のいいね!
返信引用
Ikumi
(@ikumi)
Trusted Memberサイト
結合: 2年前
投稿: 93
 

私もまったく同じことをしたくて、今はアピールエリアのスペースを利用しています。(プラス、フォーラムで見つけたコードを使っています。)

リフィトリーさんのコードでできるんですね~ 😀 。今度試してみます!

もしも、ヘッダー背景画像とロゴ画像のバランスや位置を2枚の画像で調整するのが難しいと感じるデザインの場合、以下の記事がお役に立てるかもしれません。

[Cocoon] デザイン性アップ! アピールエリアにヘッダー画像挿入

 

あ・・・。大分前のトピックでした!

This post was modified 1年前 by Ikumi

リフィトリーさる子 件のいいね!
返信引用
リフィトリー
(@leafytree)
メンバー Moderator
結合: 3年前
投稿: 6148
 

@ikumi さん

投稿者:: @ikumi

リフィトリーさんのコードでできるんですね~ 😀 。今度試してみます!

いや、これ、苦しまぎれに検索したら、見つけたもので、疑似要素を使ってやる方法なので、もっと良い方法が他にありそうな気がします。

 

私は、久しぶりに、おすし さんのサイトを見てみたら、2枚の画像で、バッチリできているので、なんだか嬉しいです。

 

きっと、Ikumi さんの記事([Cocoon] ヘッダー画像サイズと選ぶポイント)が参考になったのだと思います。

 

投稿者:: @ikumi

もしも、ヘッダー背景画像とロゴ画像のバランスや位置を2枚の画像で調整するのが難しいと感じるデザインの場合、以下の記事がお役に立てるかもしれません。

[Cocoon] デザイン性アップ! アピールエリアにヘッダー画像挿入

Ikumi さんの記事は、Webサイト作成の専門的な知識を持っていなくても、デザインの幅を広げてくれるとても有用な記事だと、またまた関心しています。

 

デザインの事例も素敵で魅かれます。


さる子, Ikumiわいひら 件のいいね!
返信引用
Ikumi
(@ikumi)
Trusted Memberサイト
結合: 2年前
投稿: 93
 

恐縮です、ありがとうございます 🙂 !


返信引用
かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 4年前
投稿: 4764
かうたっく - Facebook
 
投稿者:: @uiko

今更かもしれませんが、参考になると思います。

https://bibabosi-rizumu.com/cocoon-header-logo-each-page/

あっ、懐かしの1ページ

ありがとうございまっす 🤗 


返信引用

返信する

投稿者名

投稿者メールアドレス

タイトル *

許可された最大ファイルサイズ 5MB

 
プレビュー 0リビジョン 保存しました
共有:
スポンサーリンク
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日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年11ヶ月

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

◎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をコピーしました