【Cocoon】モバイルメニューの設定方法とカスタマイズ へのコメント https://yujiblog.org/cocoon-menu-mobile 収益化に特化したブログノウハウを発信 Sat, 28 Jan 2023 07:11:45 +0000 hourly 1 https://wordpress.org/?v=6.3.8 yuji より https://yujiblog.org/cocoon-menu-mobile#comment-175 Wed, 28 Sep 2022 11:31:39 +0000 https://yujiblog.org/?p=11488#comment-175 maimai への返信。

コメントありがとうございます。
詳細を確認したいので、TwitterのDMまでご連絡ください！

]]> maimai より https://yujiblog.org/cocoon-menu-mobile#comment-174 Wed, 28 Sep 2022 08:42:42 +0000 https://yujiblog.org/?p=11488#comment-174 初めまして。
現在、初心者ながらHP作成に取り組んでおり
こちらのサイトに辿り着きました。

コードを使用させて頂いたのですが、
メニューの文字が左寄りになってしまいます。（中央にしたい）
また、点線の長さも文字数分しか長さがありません。
どのようにすれば良いでしょうか？

私はミックスブルーのスキンを使用しているのですが、それが原因でしょうか？
こちらの記事とは関係ないですが、インデックスのフロントページタイプをタブ一覧に変更しても表示されません（他のものも表示が変わりませんでした）
ご教授頂ければ幸いです。

]]> yuji より https://yujiblog.org/cocoon-menu-mobile#comment-168 Wed, 17 Aug 2022 22:56:39 +0000 https://yujiblog.org/?p=11488#comment-168 ゆきだるま への返信。

嬉しいメッセージありがとうございます。
質問がありましたら、いつでもご連絡ください！

]]> ゆきだるま より https://yujiblog.org/cocoon-menu-mobile#comment-167 Wed, 17 Aug 2022 16:34:47 +0000 https://yujiblog.org/?p=11488#comment-167 参考にさせていただきました。
簡単に出来ました。
ありがとうございます。

]]> yuji より https://yujiblog.org/cocoon-menu-mobile#comment-82 Tue, 30 Mar 2021 08:01:49 +0000 https://yujiblog.org/?p=11488#comment-82 HDK への返信。

@media (max-width: 834px)
img.site-logo-image {
display: none;
}
を追加してみてください！

]]> HDK より https://yujiblog.org/cocoon-menu-mobile#comment-81 Sun, 21 Mar 2021 05:49:31 +0000 https://yujiblog.org/?p=11488#comment-81 おかげ様でなやみに悩んでいたメニューがきれいにまとまりました。
本当にありがとうございました。
1点教えていただくことは可能でしょうか？
記載いただいたコードをコピーして『モバイル表示版ヘッダー』を作成できましたが、サイトのデザイン的にロゴ(イメージ写真では「sample」となっている箇所)を表示できないようにできるとよりよいと考えております。
どのコードを削除すればなくせますでしょうか？
申し訳ございませんがよろしくお願いいたします。

]]> yuji より https://yujiblog.org/cocoon-menu-mobile#comment-70 Tue, 02 Mar 2021 13:29:36 +0000 https://yujiblog.org/?p=11488#comment-70 JUN への返信。

【”\f060″】ですが、すべて半角で打ち直してみてください。
コピペで入力すると、フォントの関係で【””】の引用符部分が別文字に変更されてしまうようです。

]]> JUN より https://yujiblog.org/cocoon-menu-mobile#comment-68 Mon, 01 Mar 2021 14:19:40 +0000 https://yujiblog.org/?p=11488#comment-68 yuji への返信。

消すとまた×に戻ってしまいました。

]]> yuji より https://yujiblog.org/cocoon-menu-mobile#comment-67 Mon, 01 Mar 2021 14:08:38 +0000 https://yujiblog.org/?p=11488#comment-67 JUN への返信。

font-family: FontAwesome;

の1文を削除してみてください。

]]> JUN より https://yujiblog.org/cocoon-menu-mobile#comment-66 Mon, 01 Mar 2021 13:45:12 +0000 https://yujiblog.org/?p=11488#comment-66 迅速なご対応ありがとうございました。
早速やってみました。

×マークが変わりましたが、矢印ではなく意図しない違う記号になってしまいました。
Font Awesomeのf060は左矢印のはずですがﾞ…
何度もすいません、なぜか分かりますでしょうか？

]]> yuji より https://yujiblog.org/cocoon-menu-mobile#comment-64 Mon, 01 Mar 2021 10:04:12 +0000 https://yujiblog.org/?p=11488#comment-64 JUN への返信。

以下の変更を試してみてください。

【変更前】
span.fa.fa-close::before{/*戻るボタン*/
↓
【変更後】
span.fas.fa-times::before{/*戻るボタン*/

]]> JUN より https://yujiblog.org/cocoon-menu-mobile#comment-62 Mon, 01 Mar 2021 06:05:35 +0000 https://yujiblog.org/?p=11488#comment-62 早速のご連絡ありがとうございました。
下記にてご連絡差し上げます。
何か分かりましたら宜しくお願い致します。

貼り付けたコードはyuji様が公開されていたコードをベースに、モバイルメニューフォントサイズ、色、背景色を私がアレンジしました。

span.fa.fa-close::before{/*戻るボタン*/
font-family: FontAwesome;
content: “\f060”;
}
.menu-content .menu-drawer {
padding: 0 1em;
margin:0;
}
ul.menu-drawer:before{
font-size:1.2em;
display: block;
font-weight: normal;
background: white;
color:#7b7b7b;
padding: .5em;
margin-bottom:1em;
font-family: sans-serif;
text-align: center;
border-bottom:3px dotted #90C31F;
}
ul.menu-drawer:after {
background: white;
}
.menu-drawer li {
background-color:#fff;
padding:0;
border-radius:20px;
}
.menu-drawer a{/*menuの文字色を黒*/
font-size:1.0em;/*menuの文字サイズ*/
background-color:#006699;/*menuの文字部の背景色*/
color:#ffffff!important;/*menuの文字色*/
margin: 6px 0;
padding: 4px 1em;
border-radius:20px;
}
.menu-drawer a:hover{
background-color:#90C31F!important;
color:#fffff4!important;
transition: 0.2s ;
}
.menu-drawer .sub-menu {
padding-left:30px;
margin-top:0;
}
@media (max-width:834px){
.sub-menu{
box-shadow: none!important;
}
}

]]> yuji より https://yujiblog.org/cocoon-menu-mobile#comment-61 Sun, 28 Feb 2021 23:17:02 +0000 https://yujiblog.org/?p=11488#comment-61 JUN への返信。

こんにちは。

確認しますので、ページURLと実際に貼り付けたコードを送ってください。
コメント欄の他、お問い合わせフォームやツイッターのDMからでもOKです。

]]> JUN より https://yujiblog.org/cocoon-menu-mobile#comment-59 Sun, 28 Feb 2021 17:23:10 +0000 https://yujiblog.org/?p=11488#comment-59 はじめまして、JUNと申します。
COCOONを使用しており、モバイル用にはヘッダーモバイルボタンを使用しております。
一番上に表示される×マークが気に入らず、矢印に変更したいと思って検索をしていたところ、
Yuji様のサイトに辿り着きました。
早速、モバイル表示　ヘッダーメニューのコードを子テーマのスタイルシートにコピペしてみました。
メニュー表示は変更しましたが、残念ながら肝心の×マークが矢印に変わってくれませんでした。
何か考えられる設定等ございましたら、ご教示頂けますと幸いに存じます。
宜しくお願い致します。

]]> 山室功 より https://yujiblog.org/cocoon-menu-mobile#comment-51 Mon, 01 Feb 2021 00:53:22 +0000 https://yujiblog.org/?p=11488#comment-51 yuji への返信。

Yuji様、
ご丁寧なお返事、誠にありがとうございます。
今勤務中ですので、帰宅後週末にかけて頑張ってみたいと思っています。

]]> yuji より https://yujiblog.org/cocoon-menu-mobile#comment-44 Thu, 14 Jan 2021 12:52:53 +0000 https://yujiblog.org/?p=11488#comment-44 山室功 への返信。

まず、Cocoon設定について、以下の記事の上から設定していただけたらと思います。
▶ブログ初心者でもできる『Cocoonカスタマイズ』の完全マニュアル【WordPress】

続いて、モバイルメニュ―ですが、Cocoon設定を再確認していただけたらと思います。

Cocoonヘッダーロゴデザイン

「Cocoon設定」の「モバイル」タブを選択します。

Cocoonヘッダーロゴデザイン

✔ モバイル設定
▶モバイルメニュー
・ヘッダーモバイルボタン
▶モバイルボタン
・サイトヘッダーロゴを表示する
・モバイルボタン時コンテンツ下のサイドバーを表示

以上の設定であることを確認してください。

左上に、メニューボタンが表示されるかと思います。

]]> 山室功 より https://yujiblog.org/cocoon-menu-mobile#comment-43 Thu, 14 Jan 2021 07:16:26 +0000 https://yujiblog.org/?p=11488#comment-43 色々と調べてみた結果、cocoonの基本を押さえてないかもしれない事に気が付きました。一度、まっさらからやり直してみようと思います。

]]>