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カスタマイズ依頼

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

固定ページに縦型カードを導入したい
 
共有:
通知
すべてクリア

固定ページに縦型カードを導入したい

25 投稿
3 ユーザー
8 Reactions
4,705 表示
 sam
(@sam)
New Member
結合: 4年前
投稿: 4
Topic starter  

初めまして。

タイトルの通りではございますが、固定ページに縦型カードを導入したいと思っています。

cocoon設定のインデックスから縦型カードを設定できることは存じていますが、固定ページをフロントページとしている場合は、縦型カードを使用することができません。トップページの新着記事に縦型カードを導入することがゴールなのですが、こちらどのようにすれば良いのでしょうか。

なお、親テーマに

/*****************************
 縦型カード *******************************/

.rect-vertical-card .related-list {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.rect-vertical-card .related-entry-card-wrap {
padding: 5px;
}
.rect-vertical-card .related-entry-card-thumb {
float: none;
width: 100%;
}
.rect-vertical-card .related-entry-card-thumb img {
width: 100%;
}
.rect-vertical-card .related-entry-card-content {
margin: 0;
}
.rect-vertical-card .related-entry-card-title {
font-size: 16px;
}

.rect-vertical-card-3 .related-entry-card-wrap {
width: 33%;
}

.rect-vertical-card-4 .related-entry-card-wrap {
width: 24.5%;
}

といったコードがあることは存じており、ここがキーになるのかとは思いますが、ここから子テーマでどのように編集すればいいかわからないところです・・・。

私だけでなく、固定ページをトップページとして使用しているブロガーも多いことかと思いましたので、この場でご相談させていただきました。

大変恐縮ですが、よろしくお願いします。


   
引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

固定ページのどの部分のことでしょうか。
フォーラムの案内にありますように、該当ページのURLをいただければと思います。

不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください


   
返信引用
 sam
(@sam)
New Member
結合: 4年前
投稿: 1
 

返信ありがとうございます。

固定ページのmain内です。URLは教えられません。

大変恐縮ですが、よろしくお願いします。


   
返信引用
 sam
(@sam)
New Member
結合: 4年前
投稿: 4
Topic starter  

固定ページをフロントページに設定しております。

そのようにすると、縦型カードを実装することができません。。

数時間前に同じ名前で別の方が投稿されていますが、どなたでしょうか…全く身に覚えがないのですが・・・


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 
投稿者:: @sam

数時間前に同じ名前で別の方が投稿されていますが、どなたでしょうか…全く身に覚えがないのですが・・・

これのことでしょうか。

投稿者:: @sam

返信ありがとうございます。

固定ページのmain内です。URLは教えられません。

大変恐縮ですが、よろしくお願いします。

ただ、いずれにしても、申し訳ないですが該当ページのURLがないと、ちょっと何とも言えないです。


   
返信引用
 sam
(@sam)
New Member
結合: 4年前
投稿: 4
Topic starter  

わいひらさん、ご返信ありがとうございます。

対象サイトは以下になります。

http://tabizukan-backpacker.com

よろしくお願い申し上げます。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@sam さん

横から失礼します。

固定ページに縦型カード2列を導入するのはちょっと難しかったので、通常のインデックスページのトップページで似たような表示にできないかな、と、試してみました。

 

一番上に新着記事の「縦型カード2列」を表示する、という前提ですが・・

 

Cocoon設定の「インデックス」タブで、フロントページタイプ(β版)のところを

「カテゴリごと(2カラム)」

にして、

カードタイプを

「縦型カード2列」

にしました。

 

通常ですと、この設定だと、新着記事の下に表示される、カテゴリのリストは、2列になってしまうので、以下のCSSのコードで、sam さんのサイトのように、1列に変更します。

#list-columns {
display: block;
}

#list-columns .list-column {
width: 100%;
display: block;
}

そうしましたら、以下の画像のような感じになりました。

もし、ご希望の表示と大きく異なっていたら、ごめんなさい。

 

また、どうしてもトップページは固定ページでなければならない、といったご事情があれば、それはそれで仕方ないです。

 

This post was modified 4年前 2回 by リフィトリー

   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

同じ要領で、「縦型カード3列」にしてみたら、新着記事が4つしか表示されません。 ? 

 

6つにするのは、どうしたらいいのやら・・ ? 

 


   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

なんだ、ちゃんと表示数も設定できるんですね。 ? 

 

This post was modified 4年前 by リフィトリー

   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

http://tabizukan-backpacker.com/
該当ページは新着記事ショートコードとかでエントリーカード表示されているんでしょうかね。
これだと、縦型は難しいです。
typeオプションを変更して、CSSを使えば、出来ないことはないかもしれません。
https://wp-cocoon.com/new_list/

ただ、それをやるぐらいなら、リフィトリーさん書かれているようなことを行う方が簡単かもしれません。


   
返信引用
 sam
(@sam)
New Member
結合: 4年前
投稿: 4
Topic starter  

みなさま

ご対応ありがとうございます。
誠に感謝申し上げます。

ご教示いただいた内容で下記のようにはなります。確かに縦型2列で新着記事が表示されますが、本来はカテゴリ別でそれぞれ1つずつの表示にしたいのところです。

例えば

Aカテゴリ Bカテゴリ

 カード  カード

 カード  カード

といった具合です。

元々はカテゴリ毎で新着記事を分けて表示していましたので、今回の質問はこのような場合どのような処理を行えばいいのかという点です。

どうぞよろしくお願いします。

 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@sam さん

縦型カードのスニペット(記事の説明文)が必要なのかと思っていましたが、スニペットのテキストが不要なら、わいひらさんのご案内のように、表示をCSSでカスタマイズできるような気がしないでもないです。

 

例えば、固定ページでのやり方に戻ってしまいますが、カラムブロックの2カラムで、それぞれのカテゴリを左右別に設定して、CSSで縦型カードっぽいデザインに変更するとか・・(でも、サムネイルの画像のサイズをPHPで最適化しないとぼやけてしまうかも・・)(large_thumbを使えばいいのか・・)

 

Cocoonの標準の機能にはない表示だろうと思われるので、ひと手間ふた手間かけないとできなさそうです。

 

標準の機能のどれかを組み合わせてできるデザインのうち、最も希望に近いデザインを選択する方が簡単と言えば簡単のような気がします。

 

タブ表示はスクロールしなくてカテゴリを切り替えられるので、個人的には便利な機能だなと思ったりします。

 

あまりお役にたたない書き込みかもですが・・

 

This post was modified 4年前 3回 by リフィトリー

   
わいひら reacted
返信引用
 sam
(@sam)
Active Member
結合: 5年前
投稿: 12
 

@leafytree

リフィとりーさん

ご丁寧なご返信ありがとうございます。

完成図としてはスニペットのある縦型カードがカテゴリ毎で二つ並ぶ(2カラムの状態)を想定しています。固定ページをフロントページ としてlarge_thumbを使うののでは、スニペットが出てこないので何れにしてもなんらかのカスタマイズが必要になるかと思います・・・。欲を言えばショートコードで縦型カードが選べられるように実装がされればいいのですが、、

恥ずかしながらタブ機能は知らなかったです。こちらは大いに参考させていただきます。

 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@sam さん

いま出先なので、詳しくみれないのですが、スニペットは、ショートコードでは表示できないんですよね。

 

需要は、ある程度はありそうな気もするのですが......

 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@sam さん

昨日調べていたら、スニペットをショートコードで表示できるようにと、PHPファイルをカスタマイズする記事を書いている方がおられましたので。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 
投稿者:: @sam

large_thumbを使うののでは、スニペットが出てこないので何れにしてもなんらかのカスタマイズが必要になるかと思います・・・。

snippetオプションは試してみられたのでしょうか。
https://wp-cocoon.com/new_list/
試してみた上で、表示されなかったのであれば不具合かもしれません。

トップページと新着記事ショートコードは、全く別機能なので同じ見た目にならないのはしょうがないかもしれません。
とはいえCSSである程度デザインを似せることはできるかと思います。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 
投稿者:: @sam

完成図としてはスニペットのある縦型カードがカテゴリ毎で二つ並ぶ(2カラムの状態)を想定しています。

というかこれは、フロントページタイプを「カテゴリごと」にして、「カテゴリーエントリーカード数」を2に変更するのではダメなのでしょうか。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

投稿者:: @yhira

snippetオプションは試してみられたのでしょうか。
https://wp-cocoon.com/new_list/
試してみた上で、表示されなかったのであれば不具合かもしれません。

これは、失礼しました。

ちゃんと、あったのですね。 ? 

出てまいりました。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

その際「カードタイプ」設定も「縦型カード2例」にする必要があるかと思います。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

フロントページタイプ(β版)→カテゴリーごと

カードタイプ→縦型カード2列

 

の設定で以下の画像のようになりました。

 

スニペットの行数によって、各記事のコンテナの高さが変わるるみたいです。

 

やっぱり、フロントページタイプのデフォルトのデザインの方が整っているようにも感じます。

 


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@sam さん

というようなことで、思い切りズッコケながらですが、何かしらの参考になりますでしょうか?

 

あとは、ご自身で試されることと思いますので・・


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

@yhira さん

至らぬ点をお助けいただき、ありがとうございます。


   
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

2カラムショートコードで、左右のエントリーカードの高さ揃える方法がないかとやってみました。

 

以下のコードで高さは揃うような気もします。(最初からスニペットのスペースの高さを指定しておく)

 

投稿日を挿入するショートコードオプションは無かった?ような・・(また、間違えてるかもしれません)

.widget-entry-card-snippet {
height: 6em;
}

.widget-entry-cards.card-large-image .a-wrap {
max-width: none;
}

この辺でやめときます。

 

This post was modified 4年前 2回 by リフィトリー

   
わいひら reacted
返信引用
リフィトリー
(@leafytree)
Illustrious Member Moderator
結合: 6年前
投稿: 6845
 

記事タイトルが2行、3行という場合も想定しておかないとダメですね。 ? 

 

上記の案はボツっぽいです。 ? 

This post was modified 4年前 2回 by リフィトリー

   
返信引用
 sam
(@sam)
Active Member
結合: 5年前
投稿: 12
 

みなさま

ご教示ありがとうございます。

とりあえず教えていただいた方法で実践させていただきます。

変にカスタマイズしなくても、設定画面から色々できるんですね・・・完全に勉強不足でお伺いしてしまい申し訳ございませんでした…!

 


   
返信引用
共有:

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

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

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

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

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

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

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

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