サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Cocoonテーマに関する質問
11
投稿
2
ユーザー
10
Likes
3,141
表示
Topic starter
15/12/2021 5:34 am
何度かご質問させていただいています。
以前質問をした際に解決済み、とした後回答を下さった方にお礼のコメントがかけず大変な失礼となりました。
申し訳ございませんでした。
本題ですが、
固定ページに最新記事一覧を表示させたく、
ショートコードで以下のように入れているのですが
[new_list count=3]
このような表示になります。
希望は以下のような縦型3列、アイキャッチ画像とタイトルとスニペットも表示させたいです。
Cocoon設定＞インデックスより、縦型カード3列、スニペットの表示もチェックしているのですが
ショートコードで入れている為反映されないのでしょうか。
初心者で知識がなく、初歩的かもしれぬこのような質問をすみません。
CSSでの設定になるでしょうか。
どなたかご教示いただけないでしょうか。
よろしくお願いいたします。
**************************************:
WordPressバージョン：5.8.2
PHPバージョン：7.3.31
Cocoon バージョン：2.3.6
15/12/2021 6:53 am
前略、kikicocomamaさん
トップページにシンプルな縦型カード３列のレイアウトでしたら、固定ページではなく、通常のブログのインデックスページを使うと反映されるかと思います。（Cocoon設定の「インデックス」タブの設定は固定ページには適用されません）
WordPresssの表示設定では、「ホームページの表示」を「最新の投稿」に設定します。
シンプルな縦型３列ではなく、固定ページにいろいろなレイアウトを組み合わせる場合は、CSSでの独自のカスタマイズが必要になってくるかと思います。
わいひら reacted
15/12/2021 7:07 am
kikicocomamaさん
今回の内容とは異なりますが、以下のようなトピックもあります。
[解決済] 固定ページの新着記事一覧についてCSSが反映されない
https://wp-cocoon.com/community/postid/41919/
わいひら reacted
15/12/2021 7:18 am
kikicocomamaさん
ショートコードは基本的に縦１列に並ぶので、横並びにするには、type=large_thumbを使って、flexboxあたりで、横にならべるCSSのコード書くと良いかもしれません。
わいひら reacted
Topic starter
15/12/2021 4:58 pm
@leafytree 様、
メッセージありがとうございます。
トップページにはカテゴリをいくつか設け、カテゴリごとに最新記事を3つほど表示させ、
各カテゴリごとに固定ページを作ろうかと思っております、、
その固定ページに飛んだ時にそれそれのカテゴリの記事を一覧で表示させたく、
その場合に、デフォルトの表示ですと見た目が寂しく、、
固定ページに縦型3列、スニペットも入れて表示させたいなと思っておるのですが、、
検索して見つけた以下をそのまま入れてみたのですがうまく反映されませんでした。
====================================
/* 新着記事表示 */
.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}
.new-entry-cards.large-thumb a {
width: 33.333%;
}
/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}
/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}
===================================
なぜでしょうか。。
15/12/2021 6:00 pm
Cocoonには、「フロントページタイプ」という優れた機能があるのですが、マニュアルページが簡素？ためか、話題にのぼることが少ないように思います。
この「フロントページタイプ」を利用すると、CSSの知識も要らず、サイト型のトップページが簡単に作れるようになっています。
Cocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」にする方法
https://wp-cocoon.com/front-page-type/
Cocoon 2.1.6公開。フロントページに「タブ切替」や「カテゴリーごと表示」機能追加
これを試してみる、というのも有りなんじゃないかと思います。
固定ページを使って、ショートコードで横並びにするには、私でも、やはりテストサイトで、試しながら、コードを書いていく必要があります。
今は、出先なので、そこまでできませんが・・
わいひら reacted
15/12/2021 10:15 pm
kikicocomamaさん
今朝、隙間の時間に書き込んだので、よく見ていなかったのですが、あらためて、kikicocomamaさんのサイトを拝見しますと、サイドバーの無い１カラムなんですね。
カラム幅は1256pxあるようですので、画像を横並びで３列にならべるとすると、１つの画像の幅が400px前後必要になるかと思います。
仮にショートコードで、「type=large_thumb」を指定するとしても、読み込まれるサムネイル画像のサイズは、320px × 180pxですので、実際の表示サイズが幅400pxだと拡大表示になってしまい、ピンボケの画像になってしまいます。
サイドバーが無い、１カラムの場合ですと、横並び４列じゃないと画像が拡大されてしまうので、オススメできないです。
４列でしたら、過去に似たようなトピックがあります。
【教えてください】ヴィジェット新着記事を横並びに表示したい
4→2→1列
https://wp-cocoon.com/community/postid/42205/
サイドバー有りの、２カラムであれば、３列でもいいかもしれません。
読み込まれるサムネイル画像のサイズまで含めて１カラム横３列で、きれいに表示させたい、といった場合は、プロの出番かと思います。
有償で引き受けてくださる方を探してみるのもひとつの方法かと思います。
Cocoonカスタマイズを依頼するならば是非こちらに【Cocoon対応されている方々】
https://wp-cocoon.com/cocoon-custom/
わいひら reacted
15/12/2021 10:25 pm
kikicocomamaさん
さきほど４列の過去のトピックのリンク先に３列（スマホで2列）というのもありました。
新着記事ではなく人気記事ですが、CSSの記述のやり方の参考になるかと思います。
[解決済] ヘッダーを押すとホーム画面にジャンプさせたい
3→2列
https://wp-cocoon.com/community/postid/42155/
ただ、読み込まれるサムネイル画像のサイズより、実際のサムネイル画像の表示サイズが大きくなると拡大表示となり、ピンボケの表示になりますのでオススメいたしません。（実際の表示で画像の横幅が320px以内でしたらボケないかと思います。）
わいひら reacted
15/12/2021 10:37 pm
kikicocomamaさん
ショートコードでスニペットを表示するには、スニペットオプションを指定すればよいかと思います。
新着記事ショートコードの案内ページは以下になります。
新着記事一覧を表示するショートコードの利用方法
https://wp-cocoon.com/new_list/
わいひら reacted
16/12/2021 12:01 am
kikicocomamaさん
合っているかどうかは、わかりませんが適当に書いてみると・・
/*新着記事を3列横並びにする（スマホでは２列）*/
.new-entry-cards {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.new-entry-cards > a {/*３列にする*/
width: 31.5%;
}
.new-entry-cards::after {/*最下列を左寄せ表示に*/
content:"";
display:block;
width: 31.5%;
}
.widget-entry-cards.card-large-image .a-wrap {
max-width: none;/*最大幅400pxの指定を初期化する*/
}
@media screen and (max-width:480px) {/*画面幅が480px以下のとき2列にする*/
.new-entry-cards > a {
width: 48%;
}
.new-entry-cards::after {
content:"";
display:block;
width: 48%;
}
}
わいひら reacted
Topic starter
16/12/2021 4:56 am
@leafytree 様、
色々とありがとうございます。
本当に勉強になります。
色々といじっているとたどり着きました・・・・。
ショートコードに以下を入れて
[new_list count=3 type=large_thumb snippet=1 children=1]
CSSに以下の記述
====================================
/* 新着記事表示 */
.new-entry-cards.large-thumb {
display: flex;
flex-wrap: wrap;
}
.new-entry-cards.large-thumb a {
width: 33.333%;
}
/768px以下/
@media screen and (max-width: 768px){
.new-entry-cards.large-thumb a {
width: 50%;
}
}
/480px以下/
@media screen and (max-width: 480px){
.new-entry-cards.large-thumb a {
width: 100%;
}
}
===================================
とても親切に教えてくださりありがとうございました。
１カラム時の列の数によって画像が拡大され解像度が落ちる、、等
私では全く考えが及ばなかった部分ですので、本当に勉強になりました。
またお世話になることがあるかと思いますが、よろしくお願いいたします。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。