サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2021年8月25日 23:36
お世話になっております。ご質問させていただきます。
おすすめカードについて。
iPhoneで見た時に、おすすめカードを上２枚と下２枚にして、正方形のようにしたいの目的です。
そこで、CSSや Cocoonの設定で試しましたが、添付した画像のように大きい画像が縦に４枚並んで、コンパクトさもなきゃ、上２枚、下２枚といった表示にもなりませんでした。
添付した画像のように、iPhoneでのおすすめカード縦に４枚に表示されるのを解消したいです。
オススメカードばあくまでも参考のブログとしては、ヒトデさんのブログみたいな表示になればと思っております。
※ちなみにPCで見た時の表示では、「上２枚と下２枚にして正方形」のような形ではありません。
----------------------------------------------
サイト名：とり転ラボ
サイトURL： https://toritenshow.com
ホームURL： https://toritenshow.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：5.8
PHPバージョン：7.4.13
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.3.5.1
カテゴリ数：4
タグ数：246
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.2
style.cssサイズ：19177バイト
functions.phpサイズ：424バイト
----------------------------------------------
Gutenberg：0
AMP：0
PWA：1
Font Awesome：5
Auto Post Thumbnail：1
Retina：1
ホームイメージ：/wp-content/uploads/e0d14e709b845b8a46ce0d412848cac7.jpg
----------------------------------------------
ブラウザキャッシュ有効化：1
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：1
WEBフォントLazy Load：1
----------------------------------------------
利用中のプラグイン：
Advanced Editor Tools (previously TinyMCE Advanced) 5.6.0
Broken Link Checker 1.11.15
Category Order and Taxonomy Terms Order 1.5.7.5
Contact Form 7 5.4.2
Edit Author Slug 1.8.3
EWWW Image Optimizer 6.2.3
Invisible reCaptcha 1.2.3
PuSHPress 0.1.10
Regenerate Thumbnails 3.1.5
SiteGuard WP Plugin 1.6.0
UpdraftPlus - Backup/Restore 1.16.60
WordPress Ping Optimizer 2.35.1.2.3
WP Fastest Cache 0.9.3
WP Multibyte Patch 2.9
XML Sitemaps 4.1.1
----------------------------------------------
2021年8月25日 23:47
HTML縮小、CSS縮小がされているため詳細は確認できませんが、恐らくご自身によるカスタマイズの影響ではないでしょうか。
おすすめカードは何もしない状態でも横2列で表示されてたような気が…？
わいひら reacted
2021年8月25日 23:54
おすすめカードのスマホでの表示はデフォルトで上2枚、下2枚です。
マニュアル
ヘッダー下に任意の画像リンクを追加できる「おすすめカード」機能の使い方 https://wp-cocoon.com/recommended-cards/
トピックスターター 2021年8月26日 15:30
この辺のCSSを無効にしたら上2枚下2枚というレイアウトになりました。
ご返信ありがとうございます。
初心者でありまして、探しましたが見つけることができませんでした。
何行目のＣＳＳでしょうか。
トピックスターター 2021年8月26日 15:31
おすすめカードのスマホでの表示はデフォルトで上2枚、下2枚です。
マニュアル
ヘッダー下に任意の画像リンクを追加できる「おすすめカード」機能の使い方 https://wp-cocoon.com/recommended-cards/
ありがとうございます。
2021年8月26日 17:32
ご返信ありがとうございます。
初心者でありまして、探しましたが見つけることができませんでした。
何行目のＣＳＳでしょうか。
まずは高速化の解除をお願いします。
高速化されているとブログの状態を詳しく見るのが困難になります。フォーラムへ相談する際は解決までの間、高速化の解除をお願いします。
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
わいひら reacted
2021年8月26日 18:53
margin-rightとかmargin-leftとかは直接は関係なかったっぽいです。
外観>カスタマイズ>追加CSSに書かれてるこのwidth: 100%;の部分ですね。
/*(スマホ)480px以下*/
@media screen and (max-width: 480px) {
.widget-entry-cards.card-large-image .a-wrap {
width: 100%;
}
.widget-entry-cards.card-large-image .a-wrap:nth-child(odd) {
margin-right: 0;
}
}
わいひら reacted
トピックスターター 2021年8月26日 19:44
ありがとございます。
そのCSSじたいがイマイチなんのためなのか、把握出来なかったので全部削除しました。
ですが次はPCで見たときと同様の形になりました。画像を添付しときます。
お手数ですが、デフォルトの上２枚下２枚にして、もう少しコンパクトなサイズにしたいのですが、どうCSSを変えたらよろしいでしょうか。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。