サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年5月11日 00:02
お世話になっております。
不具合・カスタマイズ対象ページのURL： https://tafuhanasmile.com/
相談内容：ショートコード⇒[popular_list days=all rank=1 count=10 cats=all horizontal=1 arrow=1 type=large_thumb_on]で作成して横表示ランキングが作れています（１位から10位の横に右矢印で進めます）が、10位から１位に戻れるような横スクロールをつけたいです。（例：10位の記事から戻って３位の記事を確認できるようにしたい）
不具合の発生手順：ショートコードに[popular_list days=all rank=1 count=10 cats=all horizontal=1 arrow=1 type=large_thumb_on]をつけたのみです。
解決のために試したこと：ネット検索しましたが、よく分からず、わいひらさんが投稿していた
https://wp-cocoon.com/scrollable-table/
を確認しました。
テーブル表記のスクロールでなく、ショートコードで横スクロールをつけられる方法はありませんか。
This topic was modified 2年前 6回 by tafuhana
2023年5月11日 01:27
●原因
現状、Cocoonの作りで、nextボタンのみで、prevボタンがありません。
●仮対策
書かれているようにスクロールバーを表示させてみました。
以下のCSSを追加します。
/* nextボタンを非表示 */
.is-list-horizontal .swiper-button-next {
display: none;
}
/* カード横並びの時、スクロールバーを表示させる */
.popular-entry-cards.swiper-horizontal {
overflow-x: scroll;
}
●本対策
わいひらさん
prevボタンの追加検討を願います。
<div class="swiper-button-prev"></div>
swiperのパラメータに以下が無く。
prevEl: '.is-list-horizontal .swiper-button-prev',
また、swiper-button-prevに対応したCSSもありません。
以下ですが.swiper-button-nextをコピーし、矢印と、ボタン位置を変更しただけです。
.swiper-button-nextと共通化できる部分もあるので、見直し願います。
.is-list-horizontal .swiper-button-prev {
left: 22px;
}
.is-list-horizontal .swiper-button-prev {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
margin: auto;
}
.is-list-horizontal .swiper-button-prev {
display: grid;
place-content: center;
width: 50px;
height: 50px;
cursor: pointer;
transition: var(--transition);
}
.is-list-horizontal .swiper-button-prev:hover {
left: 17px;
width: 60px;
height: 60px;
}
.is-list-horizontal .swiper-button-prev::before {
background-color: rgba(0, 0, 0, 0.3);
}
.is-list-horizontal .swiper-button-prev::before {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
content: "";
border-radius: 50%;
box-shadow: var(--box-shadow);
}
.is-list-horizontal .swiper-button-prev::after {
border-color: #ffffff;
margin-left: 0.4rem;
transform: rotate(45deg);
width: 12px;
height: 12px;
content: "";
border: solid rgba(255, 255, 255, 0.7);
border-width: 0 0 2px 2px;
}
2023年5月11日 01:38
「戻る」の件は、経緯としては以下かもしれないです。
（他のことをしながらで、ぱっと見しかしていませんので、間違いだったらすみません）
https://wp-cocoon.com/community/postid/66211/
とりあえず、本件がありましたから、わいひらさんがご確認くださると思います。
Topic starter
2023年5月11日 14:21
@chu-ya さん ご返信ありがとうございます！！！！！！！！！！！！！！！！！！！！！
chu-yaさんが記載していただいたCSSを追加したら表示されました！！！！！！感謝です！！！！
ありがとうございます！！！！！
スクロールバーがなくても現状、左へのスワイプは可能です。
PCの場合、カードを右クリックしたまま、左右にスライドできます。
スマホンの場合も同様で、カード上で左右にスワイプできます。
について、スクロールバーがなくてもPCの場合、カードを右クリックしたまま左右にスライド、スマホンの場合も同様で、カード上で左右にスワイプできました！！！！！！！！！！！！！！！
とても勉強になりました！どうもありがとうございました！
また、
prevボタンの追加検討
についても、わいひらさんに伝えていただきありがとうございます！！
両端に矢印がつく方法もあればいいと思っていたので助かります！！ありがとうございます。
●質問
PCのほうはショートコードの下に横スクロール追加できたのですが、スマホだと横スクロールは表示されないでしょうか？スマホで確認したのですが、スマホにも対応されている状態なのかよくわからなくて…すみません。
This post was modified 2年前 4回 by tafuhana
Topic starter
2023年5月11日 14:25
2023年5月11日 15:15
PCのほうはショートコードの下に横スクロール追加できたのですが、スマホだと横スクロールは表示されないでしょうか？スマホで確認したのですが、スマホにも対応されている状態なのかよくわからなくて…すみません
スクロールできるか否か分かり難い為、スクロールバー表示をしていると思います。
先にも書きましたが、CSSを追加しなくても左右スクロールはできます。
調べるとiOS13以降で、スクロールバー表示が無くなったようです。
CSSで指定してみましたが表示されませんでした。
図はiPhoneXr、iOS16.4.1(a)、Safariでの表示です。
●ご参考
https://libesta.jp/2023/02/21/always-show-scrollbars-on-iphone/
2023年5月14日 20:29
返信はないようですが、見た目的には変わらないので、とりあえずHTML出力だけしておきました。
chu-yaさんのコードをそのまま使用させていただきました。
HTML出力だけしてCSSで非表示にだけしてあります。
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
2023年5月14日 20:30
横並び表示の戻るボタンを出すには子テーマのスタイルCSSに以下のように書くと出るようになります。
.is-list-horizontal .swiper-button-prev{
display: flex;
}
とりあえずこのトピック開けておいて、要望が多いようであれば機能化も検討したいと思います。
This post was modified 2年前 by わいひら
2023年5月14日 21:30
@yhira さん
あくまでも暫定ですよね？
.swiper-button-next、.swiper-button-prevでボタン径、背景色など同じプロパテイがあり、共通化して書け。
少し煩雑なので、正式にするなら見直し願いたく。
2023年5月15日 19:34
こちらとまとめて変更しておきました。
https://wp-cocoon.com/community/postid/70516/
This post was modified 2年前 2回 by わいひら
2023年5月16日 00:20
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.9.2
カテゴリー数：19
タグ数：148
ユーザー数：1
----------------------------------------------
本件確認しました。
わいひら reacted
2023年5月16日 18:02
ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。