サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2018年8月21日 17:39
モバイル設定で「トップボタン」を選び、slicknavを使わせて頂いています。左側にロゴを入れるべくbefore要素のbackground-imageで表示させています。
しかしここにリンクを貼りたいと思い・・・
background-imageではリンクを貼れないので、JavaScriptで対応しようと、コードを子テーマのjavascript.jsに書いてもウンともスンともで行き詰っています。
$(function(){
$('.slicknav_menu').prepend('<h1><a href="https://chouchoukimono.com/">TEST</a></h1>');
})
検索に頼ってなんとか作り上げている超素人なので、見当違いなことを言っていたらすみません。
要は右側にアコーディオンメニュー、左側にロゴ＋トップに戻るリンクを実装したいのです。
よろしくお願いします。
2018年8月21日 18:30
jQuery が効かない理由は、 WordPress では $ が使えないためです。
使えるようにするために、カプセル化が必要です。
また、その部分に、 h1 はお使いにならない方がいいと思います。
この 2 つを踏まえて、私であればこのように書きます。追加するファイルは、子テーマの javascript.js です。
https://gist.github.com/FirstLayout/c3329a93bbacaa79723aeaf81fd419dd
わいひら reacted
トピックスターター 2018年8月21日 19:11
ありがとうございます！きちんと表示されました、$がダメだったんですね・・・
これからさらに整えていけばうまくできそうです。とても助かりました。
2018年8月21日 20:28
あ…。ごめんなさい。コードに不要なものが入っていました。
コードを修正しました。
https://gist.github.com/FirstLayout/c3329a93bbacaa79723aeaf81fd419dd
わいひら reacted
トピックスターター 2018年8月21日 22:14
ありがとうございます！（どこが変わったのかわからないですが笑）
最後にひとつだけ教えて欲しいのですが、現状だと左のリンクと右のメニューバーアイコンで改行されてしまいます。
ひとつの行にまとめることはできますでしょうか？初歩的な質問で申し訳ありません。
2018年8月22日 00:18
僕の環境では、特に改行されているようには見えないです。
もしかした僕が違った意味の取り方をしているのかもしれませんけど。
トピックスターター 2018年8月22日 00:28
ありがとうございます、chromeデヴェロッパーツールのレスポンシブ表示では問題ないのですが、自前のiphoneだと上下に分かれるのです・・・
キャッシュクリアしているのですが、変わらずでして。文字のテキストリンクのフォントサイズを大きくするとそれだけ右のアイコンは下にさがったりする状況です・・・が、もう少し格闘してみます。
2018年8月22日 00:59
私は iPhone を持っていないので、手元で試せないです。
画像を見る限り、ナビアイコンをインライン要素にするといいような気がしないでもないです。
この CSS を追加すると、どうなるでしょうか。
.slicknav_btn {
display: inline-block;
}
わいひら reacted
トピックスターター 2018年8月22日 01:06
試してみましたが何も変わらずでした、遅くまでスミマセン。ありがとうございますmm
2018年8月22日 12:21
うーむ…。
では、これだとどうでしょうか。
@media screen and (max-width: 768px) {
.slicknav_menu {
align-items: center;
display: flex;
flex-wrap: wrap;
}
.slicknav_menu > .inherit {
flex: 1 0 auto;
}
.slicknav_nav {
flex: 1 0 100%;
}
}
わいひら reacted
トピックスターター 2018年8月22日 12:26
す、すごい！変わりました。
昨夜ひと晩じゅう悩んで諦めたのですが、本当にありがとうございます。
頂いたコードの中身見て勉強します！！ありがとうございます！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。