サイト内検索
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月12日 19:56
●内容
バージョン：2.5.9.2
swiperのnextボタンの矢印がborderで作られており。
以前、他の部分をborder→fontawesomeに統一しており。
統一した方が望ましいのでは？と思い。
●余談
一番簡単に、単にchevron-circle-rightを用いてもよいのでは？とも思い。(hoverの時、scale:1.1にし)
●変更点
以下に変更。
.is-list-horizontal .swiper-button-next {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
box-shadow: var(--box-shadow);
-webkit-box-shadow: var(--box-shadow);
transition: var(--transition);
-webkit-transition: var(--transition);
height: 50px;
width: 50px;
}
以下に変更。
.is-list-horizontal .swiper-button-next::after {
content: '\f105';
font-family: FontAwesome;
font-size: 24px;
color: rgb(255 255 255 / 70%);
}
.font-awesome-5 .is-list-horizontal .swiper-button-next::after {
font-family: 'Font Awesome 5 Free';
}
2023年5月13日 19:16
特に以前の仕様で何か問題がありましたでしょうか？
Cocoonは現在、Font Awesome 4と5に対応しており、Font Awesomeが出てくるたびに双方の対応をして確認する必要があり手間が増えるので、特に問題がないのであればデフォルトの使用ででも良いのかなと思ってそのままにしておりました（上記コードは対応されているけど作成時の話として）。
統一した方がということはカスタマイズでアイコンを変更したいからということでしょうか？
ちなみにそのカスタマイズをしたらどういった見た目になりますか。
もしすでにカスタマイズされている場合はスクリーンショットいただければと思います。机上でコードを書いてスクリーンショットがないということであれば改めてこちらで確認してみます。
2023年5月14日 19:55
実装して試してみました。
こちらがアイコンフォント版。
2023年5月14日 19:55
こちらがswiperデフォルト版。
個人的に見た目としてはswiperデフォルト版の方が、目印が大きくて見つけやすくて好みです。慣れというのもあるのかもしれませんが。
もちろん仕様の統一というのもわかるのですが、これだけ変わると外環と仕様統一で悩みますね…。
現状は仕様統一目的とのことで実害はないので、今一度ちょっと考えさせてください。
This post was modified 2年前 by わいひら
Topic starter
2023年5月14日 20:14
Ver.2.5.9.2のCSSですが、集約する事ができ。
わざわざ、.is-list-horizontal .swiper-button-next::beforeで、別定義する必要はなく。
.is-list-horizontal .swiper-button-nextに集約でき。
以下を削除。
以下を変更。
.is-list-horizontal .swiper-button-next {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
height: 50px;
width: 50px;
-webkit-transition: var(--transition);
transition: var(--transition);
box-shadow: var(--box-shadow);
-webkit-box-shadow: var(--box-shadow);
}
2023年5月14日 20:52
Ver.2.5.9.2のCSSですが、集約する事ができ。
その変更で正常動作していますか？
僕の環境だと見た目も動作もうまくいかなくて。
スクリーンショットちょっと見せていただいてよろしいでしょうか。
※現在GitHubのファイルはCSSセレクターだけをまとめたので少し変更されています。
ちょっともう1回やってみます。
2023年5月14日 20:58
あ、なんかちょっと手違いがあったのか見た目的には似たようなものになりました。
ただしマウスカーソルホバー時の動作がちょっと変わってしまいました。
今回変更したものがこちら。
2023年5月14日 20:58
以前の状態がこちら。
ホバーの調整が必要かもしれません。
ちょっとやってみます。
Topic starter
2023年5月14日 21:20
わいひらさんのCSS、.swiper-button-next:hoverの部分削除してませんか？
hoverの時、矢印はそのままで、ボタンのみ50→60pxに拡大させ。
この為、上記コードを削除すると、中心がずれ、全体が移動してしまい。
もう少し纏めてみました。
お手数ですが、2.5.9.2の以下の部分を置き換えてみて下さい。
.is-list-horizontal .swiper-button-next {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
left: calc(100% - 62px);
top: 0;
bottom: 0;
margin: auto;
position: absolute;
height: 50px;
width: 50px;
z-index: 1;
transition: var(--transition);
-webkit-transition: var(--transition);
box-shadow: var(--box-shadow);
-webkit-box-shadow: var(--box-shadow);
}
.is-list-horizontal .swiper-button-next:hover {
left: calc(100% - 66px);
height: 60px;
width: 60px;
}
わいひら reacted
2023年5月15日 19:25
ありがとうございます。
:hoverは削除しておらず、添付画像のコードをそのまま貼っていました。
next, prevともに変更しまとめておきました。
https://github.com/xserver-inc/cocoon/commit/ed729722de804e6b5cfa376a32aac9f53e9d8489
This post was modified 2年前 by わいひら
Topic starter
2023年5月16日 00:19
----------------------------------------------
テーマ名：Cocoon
バージョン：2.5.9.2
カテゴリー数：19
タグ数：148
ユーザー数：1
----------------------------------------------
確認しました。
一旦本件はクローズとします。
参考としてFontawesomeの場合を以下に記しておきます。
何かのおりにご検討願います。
.is-list-horizontal .swiper-button-next,
.is-list-horizontal .swiper-button-prev {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
top: 0;
bottom: 0;
margin: auto;
position: absolute;
height: 50px;
width: 50px;
z-index: 1;
transition: var(--transition);
-webkit-transition: var(--transition);
box-shadow: var(--box-shadow);
-webkit-box-shadow: var(--box-shadow);
}
.is-list-horizontal .swiper-button-next {
left: calc(100% - 62px);
}
.is-list-horizontal .swiper-button-prev {
left: 22px;
display: none;
}
.is-list-horizontal .swiper-button-prev:hover,
.is-list-horizontal .swiper-button-next:hover {
left: calc(100% - 66px);
width: 60px;
height: 60px;
}
.is-list-horizontal .swiper-button-prev:hover {
left: 17px;
}
.is-list-horizontal .swiper-button-next::after,
.is-list-horizontal .swiper-button-prev::after {
content: '\f105';
font-family: FontAwesome;
font-size: 24px;
color: rgb(255 255 255 / 70%);
}
.is-list-horizontal .swiper-button-prev::after {
content: '\f104';
}
.font-awesome-5 .is-list-horizontal .swiper-button-next::after,
.font-awesome-5 .is-list-horizontal .swiper-button-prev::after {
font-family: 'Font Awesome 5 Free';
}
わいひら reacted
2023年5月16日 18:01
ありがとうございます！
Font Awesomeに変更する場合はこちらのコードを使わせていただきます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。