ヘッダーにはサイトのタイトルと、
キャッチフレーズを出すことができます。短い見出しみたいなアレです。
表示される位置はヘッダータイトルの上か、
もしくは下へ表示することができ、
キャッチフレーズの表示・非表示は、
管理画面のCocoon設定 ⇨ ヘッダーにある、キャッチフレーズの配置から行えます。
それを前提に、、
PCには出したい、けどスマホは非表示にしたいとき・・・どうすればよいか？のカスタマイズです。
Cocoonの設定で、
キャッチフレーズを“表示しない”にすると、PCとも表示ナシになるパターン💦
これがまた紆余曲折w
いくつか検索にはかかります。が！コードがどれも反映しない、、
参考になりました
Cocoonフォーラムに感謝です。
同じく管理画面の外観 ⇨ カスタマイズ ⇨ CSS追加へ以下を入力します。
/*モバイルキャッチフレーズ非表示*/
.tagline {
display: none;
}
このコードのままで上手くいった気がする…
けれどそのあとで、
スマホだけでなくPCでも非表示になってしまい💦
ってことで試行錯誤でっす。
ソースの表示で見ると、確かにキャッチフレーズのコードとしては合っている。
そこで次のように表記し直してみると、狙った通りになりました👍
さきほどのコードを削除し、
モバイル向けに用意したCSS欄にコードを移動します。
気づけば難しくないのかもしれませんが😆
コレ、PC表示も込みのコード…モバイル専用のコードってわけじゃない。
/*モバイルグローバルメニュー並び*/
@media screen and (max-width: 768px) {
#navi .navi-in > .menu-mobile li {
width: 33%;
}
#navi .navi-in > .menu-mobile li a {
font-size: 13px; /*場合によってフォントサイズを小さく*/
}
div.tagline {
display: none;
}
}
な・の・で
モバイル版グローバルメニューの投稿で作成した、スタイルシートのコード内に記入してみました。
こういうコードは、
Cocoonでもサイトのテーマが違えば変わるのだろか、、
いくつか検索で調べても、
反映しないコードがあったので、自身のソース見ないとダメなんだな~と😅
ところで場合によっては、
CSS追加欄にモバイル用のコード入れるとエラーになってしまい…反映しないことがあったりしました。
そんなときは、
外観 ⇨ テーマファイルエディターを開いてみてください。
そこにもCSSコードを入力できるのです。
ここでCSS変更する必要ないよ～と出てますが、非常手段ということでw
こんなふうに入力すると、
なぜか反映されましたのでご参考までに。。。😁
反応しなかったときは、
こっちに入力してみてください。ただ基本は、カスタマイズからCSS追加するようにしましょう。
コメント