サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年6月3日 17:57
お世話になります。質問させていただきます。
WordPressを使い始めたばかりの初心者です。
サイトのヘッダーに表示されるロゴを、スマホとPCで別の画像に切替えたいと思っています。
検索で自分なりに調べたのですが、PHPに関する知識がないため分からず、ご教示いただけますと幸いです。
やりたいことは、simplisityのフォーラムに投稿されていたこの方と同じです。
http://bit.ly/2XlfXDm
これを参考にカスタマイズしようとしたのですが、Cocoonではどのファイルのどこを変更したらいいのか分からずできませんでした。
当方のサイトURLは以下で、添付の画像のようにしたいと思っています。
https://road-to-maker.com/
お手数をおかけしますが、よろしくお願い致します。
以下、環境情報です。
---------------------------------------------- サイト名:Road to Maker サイトURL: https://road-to-maker.com ホームURL: https://road-to-maker.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 スキン:/wp-content/themes/cocoon-master/skins/skin-colors-red/style.css Wordpressバージョン:5.1.1 PHPバージョン:7.2.6 ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36 サーバーソフト:Apache サーバープロトコル:HTTP/1.1 言語:ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7 ---------------------------------------------- テーマ名:Cocoon バージョン:1.5.3 カテゴリ数:4 タグ数:7 ユーザー数:1 ---------------------------------------------- 子テーマ名:Cocoon Child バージョン:1.0.7 ---------------------------------------------- Gutenberg:1 ホームイメージ:/wp-content/themes/cocoon-master/screenshot.jpg ---------------------------------------------- ブラウザキャッシュ有効化:0 HTML縮小化:0 CSS縮小化:0 JavaScript縮小化:0 Lazy Load:0 WEBフォントLazy Load:0 ---------------------------------------------- 利用中のプラグイン: All In One SEO Pack 2.12.1 EWWW Image Optimizer 4.7.4 Imsanity 2.4.2 Open external links in a new window 1.3.2 ----------------------------------------------
2019年6月3日 19:16
@media screen and (min-width: 501px) { /* 元のロゴ画像を非表示 */ .logo > a img { visibility: hidden; } /* ページ毎にロゴ画像を指定 */ .logo > a .site-name-text { display: inline-block; background: url("https://wp-cocoon.com/wp-content/uploads/2018/02/Cocoon-logo-sq-200.png") no-repeat; background-size: contain; background-position: center; } }
例えばスマホってのが500pxまでをスマホとすればこんな感じで。min-width: 501px 数値を変更してくださいね。
カスタマイズ記事としては以下
https://bibabosi-rizumu.com/cocoon-header-logo-each-page/
イメージ画像として
https://gyazo.com/7bbe1cd759891cd61296d4f52f90ea01
設定上ではスマホの画像を設定。PCやタブレットではCSSで変更する感じになります。
もし『色んなカスタマイズ』を行って、AMPにも反映させたい場合、style.cssに追記しても良いと思います。AMPの容量的に問題があれば、
外観・カスタマイズ・追加 CSS
に追記すれば、現状は『色んなカスタマイズ』してもAMPには反映しないと思われます。
わいひら reacted
Topic starter
2019年6月3日 20:09
かうたっく様
ご返信まことにありがとうございます。
さっそくCSSに追記したところ、切り替えを実装することができました。
かなり苦労していろいろと調べていたので、本当に助かりました・・・。
実はかうたっく様が書かれた記事は拝見していたのですが、backgroundのタグを使っていたため、背景画像の切り替えのみできるのかと思って私のケースでは当てはまらないのかと思っておりました。見事に適用されていてびっくりです。
教えてもらった内容をもとに理解を進めたいと思います。
まずは取り急ぎ御礼申し上げます。
ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。