サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年12月17日 04:36
いつも大変お世話になっております。
複数の商品やサービスを紹介する記事で、公式サイト（外部サイト）と詳細ページ（サイト内部の別記事）へ誘導するボタンリンクを並列表示したいと思っております。
※モバイル時は縦2列表示
ようはcocoonのランキング機能のようなボタンの並びにしたいのですが、順位が付くランキングではなく、それぞれ「この場合はこれがおすすめ！」といった形なので、アイコンやレーティングが付いているランキング機能は使いづらいのです。
そこで『タグ』の『2カラム（1:1）』も試してみたのですが、一番大きいボタンでもボタン同士の余白が広くなり思うような表示になりません。
ランキングのようなボタンリンクの配置で、アイコンなどランキングの要素だけを排除することは可能でしょうか？
またこれは要望になるのですが、ランキングのアイコンON/OFFを切り替えられたり、あるいはランキングとは別に上記のような順位のない商品紹介機能の実装もご検討いただけますと幸いです。
何卒よろしくお願い致します。
2018年12月17日 19:56
2カラムレイアウトを利用して、その中にボタンを配置すればよいのではないかと思います。
https://wp-cocoon.com/column-layout/
余白等に関しては、CSSで多少調整する必要はあるかもしれません。
Topic starter
2018年12月17日 20:35
また失敗してしまいました…申し訳ありません。
記述としてはシンプルに2カラムレイアウト（1:1）の中にボタン大を入れた形になりあmす。
よろしくお願い致します。
2018年12月17日 20:43
ソースコードがうまく貼り付けられない場合は、以下などのツールを使ってください。
ソースコードが貼り付けられない場合はこちら（notepad.pw）。
案内にもあるように、できれば、そのレイアウトがあるページのURLを貼り付けていただけると助かります。
2018年12月17日 20:45
あと、余白をどのように修正したいかも一応書いていただけると、修正意図が明確になるので助かります。
Topic starter
2018年12月17日 21:47
わいひら様
早速のご返信ありがとうございます。
記事はまだ構成途中でして、完成URLがないため公開できません…申し訳ございません。
記事作成中に試してみたソースコードは下記になります。
https://notepad.pw/share/p6bf21svo
添付のような形で記載すると、さきほどの画像のように余白が大きく空いてしまいます。
これをcocoonデフォルト機能のランキングのボタンのように、PC閲覧時の横並びでも、モバイル閲覧時の縦並びでも余白を詰めたいというのが希望になります。
※希望を画像にもしてみましたのでよろしければご確認いただけますと幸いです
よろしくお願い致します。
2018年12月18日 20:53
方法としては以下の二通りあると思います。
- 2カラムレイアウトの余白を調整する
- ランキング機能を利用して、ボタン以外を非表示にする
どっちの方法が良いですか？
Topic starter
2018年12月18日 23:47
わいひら様
お世話になっております。
ランキング機能と両立して使えるのであれば、ランキングのフォーマットのほうが収まりは良いかと思っております。
ただボタンの色を手軽に調節（選択）したい気もするので…汎用性のあるほうだとどちらになるでしょうか？
私としましてはどちらのパターンでも大丈夫です。
よろしくお願い致します。
2018年12月19日 20:48
ただ余白を詰めるのであれば、こんな感じでいけるかと思います。
.rank-btn a {
margin: 0;
}
注意しなければいけないのは、2カラムを挿入した時に、ラッパーはclassにrank-btnクラスを追加することです。
https://notepad.pw/code/rj3cp5bi4
2018年12月19日 20:49
こんな感じで追加。
Topic starter
2018年12月20日 09:33
わいひら様
コードの解説ありがとうございます！
さっそく実装したところデフォルトよりも幅が縮まってかなり見やすくなったのですが、添付画像のようにランキング機能よりはまだ幅があるようで、特にモバイル時の隙間が若干気になるかな？というくらいの幅間でした（この感じ方は個人差もあると思うのですが…）
ランキング機能には外枠が付いているのでその分内側に詰まっているのかなとも思うのですが。
CSSでmargin指定をするだけではこれ以上の幅詰めは難しいものなのでしょうか？
できればランキングと全く同じ幅に合わせたいと思いまして、簡単に実現できそうでしたらご教示いただけますと幸いです。
※現状でも大きな問題ではありませんので、手間がかかりそうであれば他を優先ください
Topic starter
2018年12月20日 09:34
比較の画像を添付し忘れましたのでこちらで添付いたします
2018年12月20日 23:08
モバイル対応を忘れていました。
こんな感じで子テーマのstyle.cssに書けばいけるかと思います。
.rank-btn a {
margin: 0;
}
@media screen and (max-width: 768px){
.column-wrap.rank-btn > div{
padding: 4px 0;
}
}
shthsh reacted
Topic starter
2018年12月26日 03:44
わいひら様
モバイル対応のコードありがとうございます。
追記したところ無事理想の表示になりました！ありがとうございました。
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。
タイトルとURLをコピーしました