サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2024年10月20日 13:40
----------------------------------------------
テーマ名：Cocoon
バージョン：2.7.8.1
カテゴリー数：19
タグ数：150
ユーザー数：1
----------------------------------------------
●設定
[Cocoon設定]→[スキン]→Fuwariシリーズ
[Cocoon設定]→[投稿]→ページ送りナビ設定→枠線表示「ページ送りナビ枠線を表示する」オン
●現象
もともとページ送りボタンは枠線で囲まれていますが、オンにするとさらに枠線が追加されてしまいます（図参照）。
図では分かりやすいように、線幅を1px→3pxに変更しています。
わいひら reacted
トピックスターター 2024年10月20日 15:35
●原因
先述の通り。
●対策
ページ送りナビに元々枠線があるため、枠線をオンにした状態でも余分な枠線が表示されないようにする。
以下の箇所にコードを追加する。
.body .pager-post-navi a.prev-next-home,
.body .pager-post-navi a.prev-post,
.body .pager-post-navi a.next-post {
border: 0;
}
わいひら reacted
トピックスターター 2024年10月20日 15:52
類似で枠線に伴う不具合があります。
ページ送りナビ設定
- 表示タイプ「デフォルト」のとき、標準上下にボタン配置。
- 表示タイプ「サムネイル正方形」のとき、標準横並びにボタン配置。このとき、1ページ、最後のページにホームボタンが追加される。
スキン「Fuwari」は両方とも横並びにボタンを配置している。
画面幅に応じ、ボタン同士の区切線を追加する必要がある。
画面幅480px以下のとき
2個目のボタンの上に区切り線を追加。
.body .pager-post-navi a:nth-child(2) {
画面幅481px以上のとき
左右のボタン同士の区切り線を追加。
https://github.com/xserver-inc/cocoon/blob/91d7d27c6b3590b03f72b19c8901bd81f96ccc6a/skins/skin-fuwari-ebicha/style.css#L384
/* 次へボタンしかないとき */
.body .pager-post-navi:not(:has(.prev-post)) a.next-post {
border-left: 1px solid #d7a69c;
}
.body .pager-post-navi a.prev-post {
border-right: 1px solid #d7a69c;
}
区切り線の付け方を変更したため、以下を削除。
疑似要素でbeforeは存在しないので、以下を削除。
わいひら reacted
2024年10月20日 22:13
ご連絡いただきありがとうございます。
このケースの場合はシンプルにスキン制御で対応するので良いのではないかと思い、スキン制御で対応させていただきました。
トピックスターター 2024年10月20日 22:51
スキン制御は単に「ページ送りナビの枠線を表示する」をオフにしただけ、対策不十分です。
スキン「Fuwari」は両方とも横並びにボタンを配置している。
画面幅に応じ、ボタン同士の区切線を追加する必要がある。
先にも書いてありますが、スキン「Fuwari」は表示タイプに関係なく、枠線が付きます。
そのため、画面幅480px以下のとき、表示変化に合わせ、先述のコードが必要となってきます。
- ページ送りナビ設定の表示タイプ「サムネイル正方形」の場合、「前へ」「次へ」ボタンの上下に区切り線がなくない（図1）。
- ページ送りナビ設定の表示タイプ「デフォルト」の場合、最終ページの「次へ」ボタンの上に区切り線ができる（図2）。
わいひら reacted
2024年10月21日 18:43
トピックスターター 2024年10月21日 19:49
表示タイプ「デフォルト」で最終ページのとき、ボタンが「次へ」ボタンつになる。
next-postのとき線を追加するため、図示のように余分な線が表示される。
赤線のコードは不要です。
わいひら reacted
2024年10月21日 20:08
失礼しました。不要なCSSセレクターを削除しました。
https://github.com/xserver-inc/cocoon/commit/db058170ca49fdc58bf573167b2720ec2463e3e7
トピックスターター 2024年10月21日 20:20
---------------------------------------------
テーマ名：Cocoon
バージョン：2.7.8.1
カテゴリー数：19
タグ数：150
ユーザー数：1
----------------------------------------------
修正されていることを確認しました。
本件をクローズとします。
わいひら reacted
2024年10月21日 20:27
ご確認いただきありがとうございます。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。