Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

記事の横並び表示方法
 
共有:
通知
すべてクリア

[解決済] 記事の横並び表示方法

8 投稿
2 ユーザー
4 Reactions
3,628 表示
(@FishingKOCHI)
Active Member
結合: 5年前
投稿: 7
Topic starter  

cocoon愛用さしていただいています。

今回、トップページや情報ページにある新着記事や人気記事を横並び表示したく自力でカスタマイズしていましたがうまくいきませんでしたのでご教授願います。

自力で試してみたのは、過去記事にありました人気記事を横並び表示外部記事にありましたカスタムCSSを書く方法は試しましたがうまくできません・・・

理想は横3列・縦2列の計6記事を新着記事と人気記事部分に表示できればいいなと思っています。

表示方法はlarge_thumb_onを予定しています。

フォーラムの使用方法が分からず、トピックが重複しているかもしれません・・・

申し訳ございません。

以下のサイトですのでよろしくお願いいたします。

https://fishingkochi.com/


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

該当サイトのどのページでしょうか???

表示方法はlarge_thumb_on

その設定を行ってから、書き込みお願いします。


   
わいひら reacted
(@FishingKOCHI)
Active Member
結合: 5年前
投稿: 7
Topic starter  

@kautakkuさんご返答ありがとうございます。

各当ページは

https://fishingkochi.com/

https://fishingkochi.com/blog/

この2ページになります。

現在、表示方式をlarge_thumb_onに変更しました。

ご教授よろしくお願いいたします。

 


   
(@FishingKOCHI)
Active Member
結合: 5年前
投稿: 7
Topic starter  

@kautakku

返信を押すの忘れてました。

申し訳ございません。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

Cocoon設定高速化を『一時的に』切ってお待ちいただけますか。

解決してトピックが閉じたら有効化していただけたらと思います。

 

@kautakku

返信を押すの忘れてました。

申し訳ございません。

なんのことでしょう???

全く問題ないですよ。たぶん^^


   
わいひら reacted
(@FishingKOCHI)
Active Member
結合: 5年前
投稿: 7
Topic starter  

@kautakku

  • HTMLを縮小化
  • CSSを縮小化
  • JavaScriptを縮小化 以上のチェック外し完了いたしました。

   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 
@media screen and (min-width: 400px) {
	.page-id-18 .widget-entry-cards.card-large-image .a-wrap,
	.home .widget-entry-cards.card-large-image .a-wrap {
		width: 32%;
		display: inline-block;
	}
}

.page-id-18は固定ページのIDです。該当固定ページのURLにあるID数字を入れると良いと思われます。

 

それからmin-width: 400pxは横幅400px以上で適用させてます。1000pxに変更すればスマホ・タブレットあたりは適用されない感じです。

お好みでどうぞ。

 

PCビューのレスポンシブを利用したりしてご確認後、けっかだけ書き込みください。


   
わいひら reacted
(@FishingKOCHI)
Active Member
結合: 5年前
投稿: 7
Topic starter  

@kautakku さん

大変ありがとうございました。

思い通りの配置にすることができました。

PC,モバイル共に想像以上にきれいに仕上げることができました。

本当に感謝します。

ありがとうございました。

 


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました