サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
CSSカスタマイズ相談
10
投稿
4
ユーザー
10
Reactions
1,023
表示
トピックスターター 2023年10月8日 13:33
初めまして。本日から参加いたしました。
宜しくお願いいたします。
上記サイトのトップページに、swiperスレイダーを設置いたしましたが、うまくいきません。
アピールエリアに設置して、メニュー以下に大きくスライダーを表記したいのですが、
アピールエリアに設置する方法をご存知でしたら、教えていただきたいのです。
ご教授いただけますと助かります。
2023年10月8日 14:50
●変更前
現在、固定ページの本文中に、swiper用に以下を追加していると思います。
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-img">
<img decoding="async" src="https://shiketosou.jp/wp-content/uploads/2023/10/1a.png" alt="お客様の大切な建物を">
</div>
<div class="slide-text">お客様の大切な建物を</div>
</div>
<div class="swiper-slide">
<div class="slide-img">
<img decoding="async" src="https://shiketosou.jp/wp-content/uploads/2023/10/1d.png" alt="心を込めて">
</div>
<div class="slide-text">心を込めて</div>
</div>
<div class="swiper-slide">
<div class="slide-img">
<img decoding="async" src="https://shiketosou.jp/wp-content/uploads/2023/10/1c.png" alt="塗装いたします">
</div>
<div class="slide-text">塗装いたします</div>
</div>
<div class="swiper-slide">
<div class="slide-img">
<img decoding="async" src="https://shiketosou.jp/wp-content/uploads/2023/10/1b.png" alt="四家塗装店">
</div>
<div class="slide-text">四家塗装店</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
●変更後
入力したHTMLを、以下に入力します。
アピールエリアのメッセージは、HTML入力が可能です。
[Coccon設定]→[アピールエリア]→メッセージ
●ご参考
わいひら and luckygosaiko reacted
2023年10月8日 16:38
●補足
アピールエリアでなくとも、ウィジェットを用いる方法もあります。
[外観]→[ウィジェット]→[コンテンツ上部]→カスタムHTMLに上記コードを入力し配置。
CSSでの調整は必要となります。その点、ご理解願います。
div#content-top-in {
width: 100%;
}
わいひら and luckygosaiko reacted
2023年10月8日 16:54
アピールエリアに設置して、メニュー以下に大きくスライダーを表記したい
全面には広がらないようです。
どのような完成図を思い浮かべていらっしゃいますか？
画面幅いっぱいに表示されたいことは分かったのですが、なぜアピールエリアなのでしょうか？Swiper を設置するだけならアピールエリアは合っていません。
もしかしたら、添付した動画のようにアピールエリアの背景画像を Swiper でスライドさせたいのかな？と思いました。これであれば PHP ファイルを作成するのが手っ取り早い解決方法です。
トピックスターター 2023年10月8日 17:06
@akira ご連絡ありがとうございます。メニューバー以下に画像を大きく表示したかったのですが、私の知識不足でどうしたらいいのか分からなかったのです。メニューバーの下なので、アピールエリアと単純に考えてしまいました。
テーマファイルエディターのtmp-userのheaderあたりに、phpを記述すればいいのかな？とは思いましたが、私にはphpを作成する知識がありません。
ご教授ありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。