サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年3月8日 00:18
こんにちは。いつもありがたく使わせてもらっています。要望であり、お願いがあります。
現在、cocoon設定の「インデックス」からカードタイプからいろいろ選べるわけですが、スマホではデフォルトは2カラム、もしくは「縦型カード」か「タイルカード」の1カラムの仕様となってます。
個人的には２カラムでは少し窮屈、縦型カード・タイルカードでは大きい。そんな感じです。そこで、要望として、スマホでは「ブログカードくらいの大きさ（左側に小さいサムネイル＋右側にタイトル）で１カラム」を作っていただくわけにはいかないでしょうか？
カードサイズが大きいと、トップページが記事数によっては縦に多くスクロールさせなくてはなりません。ですが、ブログカードサイズならその量が小さくなります。サムネイルの画像サイズが小さくなれば表示速度も速くなる可能性があるように思います。また、ブログカードサイズくらいであれば既に作られている型のようなものを流量してすぐ作れるのではないだろうか？っと思ってしまいました。
スマホでのアクセスが多い昨今、スマホでの表示スタイルにひとつ検討していただけると幸いです。ご検討のほどよろしくお願いします。
2020年3月9日 12:12
「ブログカードくらいの大きさ（左側に小さいサムネイル＋右側にタイトル）で１カラム」でしたら、
カードタイプ「エントリーカード」がブログカードに近いと思いますが、これとは違うものがいいということでしょうか？
スマホではデフォルトは2カラム、もしくは「縦型カード」か「タイルカード」の1カラムの仕様となってます。
とのことですが、デフォルトで「エントリーカード」も選択できるはずです。
参考ページ
エントリーカードの設定方法（一覧ページのカードの種類） | Cocoon
どういったデザインにしたいのかが掴みにくいため、参考になる画像やURLがあると、イメージが伝わりやすいかと思います。
わいひら reacted
2020年3月9日 19:41
現在の仕様で添付画像のような表示も出来るのですが、こういったのを、どのように変更するということでしょうか。
※デフォルトの状態だとスニペット（説明文）が出ている場合は、画像の下に出るのを改善したいということでしょうか？
いずれにせよ、詳しい説明がないと、ちょっと何ともいえないかもしれません。
Topic starter
2020年3月9日 23:19
言葉も足りず、一部説明も間違えていました。大変申し訳ありませんでした。
改めまして。現在、PC画面では縦型２列を選択しているのでPCでは２列、スマホでも２列になってしまいます。スマホはデフォルト設定（上記のわいひらさんの画像のように）のような１列にしたいです。スマホに合わせてるとPCも１列になってしまいます。そこで、PCとスマホで表示を分ける、選べるようにしていただけないでしょうか？
個人的にはPCは縦２列、スマホは上記のわいひらさんの画像のような左側に小さいサムネイル＋右側に記事タイトルのような感じにしたいです。
2020年3月10日 10:36
要望のとこ申し訳ないですが、CSSを追加したらいいと思いますよ。
モバイルだけエントリーカードのデフォルトのCSSをあてる。みたいに。
親テーマのCSSを見るとそこにstyleがあるので、該当箇所だけコピペすれば良いと思います。
https://wp-cocoon.com/category/theme/
ここをチェックしましたが、そういや圧縮されてるので確認できず。でしたが。
2020年3月10日 20:02
個人的には「パソコンでは2列だけどスマホだとエントリーカードになる設定」を追加すると、「パソコンでは3列だけどスマホだとエントリーカードになる設定」、「パソコンではタイル2列だけどスマホだとエントリーカードになる設定」は？みたいなことになり、必要なもの全て追加すると、かなりややこしい設定画面になるので、そこでの難点から、今のところ機能追加は考えていません。
そういう場合は、CSSで対応するのが一番適しているかと思います。
実際のインデックスページのURLを提示していただければ、そういったCSSもこちら側で書けるかと思います。
2020年3月10日 20:10
手っ取り早くPHPでやる場合はこちら。
//パソコンでは「縦型2列」スマホでは「エントリーカード」に変更※100％レスポンシブではない
function get_entry_card_type(){
if (wp_is_mobile()) {
return 'entry_card';
} else {
return 'vertical_card_2';
}
}
ただしこの場合は、100％レスポンシブにはなりません。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。