サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年11月18日 12:17
いつもお世話になっています。
現在、cocoonのヘッダーを新しくしようと思っており、トピックのタイトルがややこしいですが、カスタマイズのご相談をさせていただきます。
▼こちらが現在のサイトです。
https://wakuwaku-keigo.com/shimane/
現在ヘッダーを表示するとその上にロゴが重なりますが、ヘッダーの上にグローバルメニューを表示させたいです。
さらに、トップページは大きな画像を設置して、インパクトをもたせたいと思っています。
▼参考イメージは以下
https://fumaikou.jp/
上記サイトは、全てのページにグローバルメニューが上記に固定されます。
そしてトップページのみ、大きな画像が設置されるのでそのイメージです。
また、大きな画像にはリンクを貼りたいです。
ちなみに、大きな画像の下には、cocoonの機能でカルーセルを入れることができるようにもしたいです。
トップの画像のみの表示のさせ方の方法は3つかと思います。
①アピールエリアのボタンを非表示にしてクリックできるようにする
②ヘッダーをトップページのみ表示させるしてグローバルメニューの下にする
③metasliderなどプラグインを利用する
どの方法が良いかはわかりませんが、ご意見いただければ幸いです。
ややこしくて申し訳ございませんが、よろしくお願いします。
2018年11月18日 19:56
とりあえず、一度に全部書いてしまうとややこしいので1つずつ。
現在ヘッダーを表示するとその上にロゴが重なりますが、ヘッダーの上にグローバルメニューを表示させたいです。
これは、Cocoon設定の「ヘッダー」タブにある「ヘッダーレイアウト」を「トップメニュー（右寄せ）」もしくは「トップメニュー小（右寄せ）」とかではダメなのでしょうか。
Topic starter
2018年11月18日 21:39
これは、Cocoon設定の「ヘッダー」タブにある「ヘッダーレイアウト」を「トップメニュー（右寄せ）」もしくは「トップメニュー小（右寄せ）」とかではダメなのでしょうか。
右寄せにすると、添付画像のように影が入ってしまうことと、通知ボタンとの間に隙間が空いてしまい、綺麗に表示されません。
2018年11月18日 23:05
おそらく、隙間が開いてしまうのは子テーマのstyle.cssに添付画像のようにマージンがスタイリングされているからだと思われます。
実際、デフォルトの.naviを見てもそのようなマージンは割り当てられていません。
影も自前でカスタマイズした部分ではないかと思われます。
つまり、自前でカスタマイズした部分をしっくりとくるように修正すれば、「トップメニュー小（右寄せ）」でも使えるのではないかと思います。
2018年11月18日 23:10
というか、 Hygiene同梱スキンを利用されているのですね。
とりあえず、下の余白を無くすには以下のコードを子テーマのstyle.cssに追記すればいけるかと思います。
.navi {
margin-bottom: 0;
}
メニューを上部に表示したときの影については、またちょっと見てみます。
2018年11月18日 23:13
影についても、双方合わせて以下のスタイルシートでいけるかと思います。
.navi {
margin-bottom: 0;
box-shadow: none;
}
Topic starter
2018年11月18日 23:45
返信ありがとうございました。
自分なりに微調整を加えると、希望していた形にグローバルメニューを上にすることができました！
次は、大きな画像の設置ですが、いかがするべきでしょうか？
2018年11月18日 23:58
その前にちょっと確認です。
大きな画像は、スライドとかは必要なくて、1つだけ大きな画像リンクを表示出来れば良いのですよね？
Topic starter
2018年11月19日 10:00
連絡遅くなり、申し訳ございません。
後々スライドショーは考えるかもしれませんが、現状は1つだけ大きな画像リンクの表示を考えています！
デザイナーさんから「二次加工禁止」と言われているため、アピールエリアで表示するにしてもボタンが表示するとアウトになります。
2018年11月19日 23:25
それだったらまず、Cocoon設定の「アピールエリア」アピールエリアを表示状態にして画像を設定します。
加えて、「ボタンリンク先」にリンクを貼りたいページのURLを入力します。
その後、親テーマのtmp/appeal.phpを子テーマの同じ場所にコピペ。
そのコピペしたappeal.phpを以下のように書き換えればいけるのではないかと思います。
https://gist.github.com/yhira/740612681b0aebc4a250de037a27c17e
あとは、子テーマのstyle.cssに以下のように書けば良いのかなと。
.appeal-wrap{
display: block;
}
実際に試していないので、正常に動作するかは分からないです。
また実際に行ってみて違っていたり、おかしな部分があったら書き込んでください。
keigo reacted
Topic starter
2018年11月20日 12:49
ご返信ありがとうございました。
アピールエリアを使うと上下が切れてしまいましたが、他の方法を組み合わせることでイメージ通りのものに近づけられる見込みがたちました！
お忙しい中、色々と教えてくださりありがとうございました。
わいひら reacted
2018年11月20日 18:01
たぶん状況によってですが、全部を出す方法はmainビフォー.php的なのがtmpuser的なフォルダに入ってたと思います。
表示順がどうだったか。。忘れましたがパンくずリストを表示していてもその上に表示された気もします。
HTMLとしては
投稿ページで画像にリンクを付ける設定を行い、そのHTMLをtmpuser的なフォルダ内にあるmainビフォーのPHPに書くと、多分問題なかった気がします。
なんなら画像をリンクにするaタグにclass属性を付けて指定すれば今後そのファイルに色々書いてもイケる気もします。
ただそこにあるCSSの指定は、コンテンツ+サイドバーの幅だったか、全体だったか忘れましたが、
トップページのみ表示する分岐タグを使ってHTMLを分岐してCSSで調整すればイケるかも知れないと思います。
コチラで試せば超絶に良いはなしですが、申し訳ないです。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。