Cocoonフォーラム

2018.02.102023.01.25

書き込みの前に以下の3点をご確認ください。

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

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

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

相談内容：

不具合の発生手順：

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

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

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

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

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

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

共有:

通知

すべてクリア

[解決済] 【教えてください】ヴィジェット新着記事を横並びに表示したい

CSSカスタマイズ相談

最新の投稿 : リフィトリー 4年前

9 投稿

3 ユーザー

5 Reactions

5,318 表示

未解決

RSS

匿名

(@匿名)

New Member

結合: 4年前

投稿: 1

Topic starter 2020年12月2日 10:27

こんにちは

１）cocoonの「外観」→「ヴィジェット」→「[C]新着記事」→「固定ページタイトル上」

で設定して使用しています。

こちらを横並び４カラムにしたいのですが、どうしたらいいでしょうか？

他のサイトに載っていたCSSを入力したのですが、何も変わりませんでした。

レスポンシブに対応した形で作りたいです。

よろしくお願いいたします。

.widget-entry-cards.card-large-image .a-wrap {
width:33%;
height:auto;
display: inline-flex;
}

@media screen and (max-width: 768px) {
.widget-entry-cards.card-large-image .a-wrap {
width:260px;
display: inline-flex;
}
}

.widget-entry-cards.not-default figure img {
padding: .5em;
}

.widget-entry-cards.card-large-image .a-wrap {
font-size: 95%;
text-align: left;
padding:.5em;
}

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2020年12月2日 11:33

前略、匿名さん

ちょうど昨日、新着記事３記事横並びのコードを書いたので、それをアレンジすれば使えるかもしれません。

ウィジェットの設置場所は異なりますが・・

ヘッダーを押すとホーム画面にジャンプさせたい

セレクタの先頭の「#popular_entries-4」はウィジェット固有のIDなので、ご自身のサイトでデベロッパーツールでIDを調べる必要があります。

新着記事ウィジェットは1箇所だけしか使わない、といった場合は、セレクタの先頭のIDは要らないかもしれません。

より具体的なことは、サイトを見てみないと、わかりません。フォーラム冒頭の案内にありますとおり、お差し支えがなければ、対象ページのURLをご提示いただき、高速化設定を無効にしていただければと思います

わいひら reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2020年12月2日 11:40

前略、匿名さん

カスタマイズに関するご質問のトピックは、「雑談」ではなく、「カスタマイズ相談」のカテゴリーの方に立ててくださると良いと思います。

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2020年12月2日 12:08

匿名さん

人気記事ウィジェットの表示タイプを「大きなサムネイル」に設定してローカルのテストサイトで試してみました。

/*人気記事を4列横並びにする*/

#popular_entries-3 .popular-entry-cards {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

#popular_entries-3 .popular-entry-cards > a {/*３列にする*/
   width: 24%;
}

#popular_entries-3 .widget-entry-cards.card-large-image .a-wrap {
   max-width: none;/*最大幅400pxの指定を初期化する*/
}

#popular_entries-3 .popular-entry-cards::after {/*クリアフィックス用のアイテムを消す*/
   content: none;
}


@media screen and (max-width:768px) {/*画面幅が768px以下のとき2列にする*/

   #popular_entries-3 .popular-entry-cards > a {
      width: 48%;
   }

}

@media screen and (max-width:480px) {/*画面幅が480px以下のとき1列にする*/

   #popular_entries-3 .popular-entry-cards > a {
      width: 95%;
   }

}

「#popular_entries-3」はウィジェットの固有のIDなので、デベロッパーツールでIDを調べる必要があります。

わいひら reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2020年12月2日 12:50

匿名さん

人気記事ウィジェットじゃなくて、新着記事ウィジェットでしたね。

新着記事ウィジェットでも、表示数を４にして「大きなサムネイル」か「タイトルを重ねた大きなサムネイル」のどちらを選択すれば、以下のコードでイケそうな気がします。

/*新着記事を4列横並びにする*/

#new_entries-4 .new-entry-cards {
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
}

#new_entries-4 .new-entry-cards > a {/*4列にする*/
   width: 24%;
}

#new_entries-4 .widget-entry-cards.card-large-image .a-wrap {
   max-width: none;/*最大幅400pxの指定を初期化する*/
}

#new_entries-4 .new-entry-cards::after {/*クリアフィックス用のアイテムを消す*/
   content: none;
}


@media screen and (max-width:768px) {/*画面幅が768px以下のとき2列にする*/

   #new_entries-4 .new-entry-cards > a {
      width: 48%;
   }

}

@media screen and (max-width:480px) {/*画面幅が480px以下のとき1列にする*/

   #new_entries-4 .new-entry-cards > a {
      width: 95%;
   }

}