現在「SILK」スキンを適用中です。

カードタイプを横型で2列にする方法を教えてください。 | Cocoonテーマに関する質問 | Cocoon フォーラム

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

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

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

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

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

wpForoの解決済みリンク

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

wpForoのいいねリンク

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

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

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

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

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

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク
カードタイプを横型で2列にする方法を教...
 
共有:
通知
すべてクリア

[解決済] カードタイプを横型で2列にする方法を教えてください。  


M.J.
 M.J.
(@M.J.)
ゲスト
結合: 2週間前
投稿: 7
Topic starter  

こんにちは

Cocoon設定→インデックスタブのカードタイプの設定について

「縦型カード2列」の設定ですとPC表示の場合、私的にサムネイルが大きく、1画面に表示できる記事数も少ないかなと思っております。

なので「エントリーカード(デフォルト)」のような横型の形のまま、幅を半分弱にして2列で表示したいのですがどのように設定すればよろしいでしょうか?

※スマホ向けには「縦型カード2列」の見た目のままが希望です。


未解決
リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

前略、M.J.さん

試しに、雑な書き方で、CSSのコードを書いてみましたが、なんだか、メインカラム内が散かっているようで見づらく、スッキリしません。

Cocoonのデフォルト縦型2列のままの方が良いと感じます。

#list article {
display: flex;
}

.ect-vertical-card .entry-card-wrap .entry-card-thumb {
width: 35%;
margin-right: 4%;
}

.ect-vertical-card .entry-card-wrap .entry-card-content {
flex: 1;
}

.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
vertical-align: top;
}

.cat-label {
position: static;
}

@media screen and (max-width: 740px) {

#list article {
display: block;
}

.ect-vertical-card .entry-card-wrap .entry-card-thumb {
width: 100%;
margin-right: 0;
}

.ect-vertical-card .entry-card-wrap .entry-card-content {
flex: 0 1 auto;
}

.ect-vertical-card .entry-card-wrap .entry-card-thumb img {
vertical-align: baseline;
}

.cat-label {
position: absolute;
}
}

サムネイル画像の縮小率が大きいため?かInternet Explorer 11では、サムネイル画像もキレイに表示されないみたいですし・・

 

テストサイトなどでご自身でも試してみられると良いかと思います。

 

私は、あまり、オススメする気がしません。

 


わいひら 件のいいね!
リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

M.J. さん

私が最近いいなと思ったのは、M.J.さんとは真逆の、スマホでエントリーカードが横長(サムネイル画像が左でタイトルが右)になるレイアウトです。

 

以下の過去のトピックは、新着記事をショートコードで表示するものですが、実際やってみると、いい感じかも?と思ったりしました。

 

https://wp-cocoon.com/community/postid/42494/

 

ただ、新着記事ウィジェットや新着記事のショートコードだと、生成されるサムネイル画像が320px幅なので、少し大きなサイズで表示されると、ちょぴりピンボケになってしまいます。

 

 


わいひら 件のいいね!
M.J.
 M.J.
(@M.J.)
ゲスト
結合: 2週間前
投稿: 7
Topic starter  

リフィトリーさんありがとうございます。

cssを学び始めたばかりで記述内容を完全に理解はできませんでしたが、文字サイズとか簡単部分のCSSを追記編集して自分好みにする事ができました。ありがとうございます。

 

せっかくですのでPC表示はこのまま横長2列で、おすすめ頂いたスマホ表示を横長1列にするのもやってみようと試みているのですが、

@media screen and (max-width: 740px)
以下を削除してスマホ表示でも横長カードにするまではわかりました。

しかしこれだと2列表示のままです。このままスマホ表示だけ1列表示にする方法はございますか?

 


リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

M.J. さん

ちょっと、やってみないと、わからないのですが、スマホでも、横長(左がサムネイル画像で右がタイトル)という場合は、縦型2列をベースにカスタマイズするのではなく、最初から横長(左がサムネイル画像で右がタイトル)のデフォルトのインデックスページのレイアウトをカスタマイズした方が良いのかもしれません。

 

こればかりは、やってみないと、何とも・・


M.J.
 M.J.
(@M.J.)
ゲスト
結合: 2週間前
投稿: 7
Topic starter  

リフィトリーさん

だんだんわかってきました。

一応このまま

@media screen and (max-width: 740px) {

.ect-vertical-card .entry-card-wrap {
width: 100%;
}
}

を追記したらPC横長2列 スマホ横長1列にできました。

しかしこれだとそもそものCocoon側の縦長2列設定を無理やり横長にしつつスマホの時だけさらに1列にしているので、込み入った事をしてるわけですね。

もう少し試してみます。

 


リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

M.J. さん

しかしこれだとそもそものCocoon側の縦長2列設定を無理やり横長にしつつスマホの時だけさらに1列にしているので、込み入った事をしてるわけですね。

そうなんです。

縦型じゃなくて、デフォルトのエントリーカードからカスタマイズした方が、良いのかもしれません。


リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

M.J. さん

試しにデフォルトのエントリーカードでやってみましたが、雑な書き方なため、間違っているかもしれませんし、合っていても、細かい修正が必要かと思います。

 

セレクタが長くなっているのは、もしかしたら、別の箇所のエントリーカードに影響しちゃうかもしれないので、長くなってしまっています。

 

とても、雑で、適当なコードですが、ヒントぐらいにはなるかもしれません。

/*横型2列*/
#list.list.ect-entry-card.front-page-type-index {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-wrap.a-wrap.border-element.cf {
width: 48%;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
width: 35%;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-content {
margin-left: 0;
}

#list.list.ect-entry-card.front-page-type-index .cat-label {
position: static;
}

#list.list.ect-entry-card.front-page-type-index .card-thumb img {
vertical-align: top;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
margin-right: 4%;
}

@media screen and (max-width: 740px) {

#list.list.ect-entry-card.front-page-type-index {
display: block;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-wrap.a-wrap.border-element.cf {
width: auto;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
width: 38%;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-content {
margin-left: 40%;
}

#list.list.ect-entry-card.front-page-type-index .cat-label {
position: absolute;
}

#list.list.ect-entry-card.front-page-type-index .card-thumb img {
vertical-align: baseline;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
margin-right: 3%;
}
}

 


リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

M.J. さん

上記コードのイメージは以下のような感じです。

 

 
 
まあ、カテゴリーラベルの位置は、何とも判断がつかないので、適当です。

わいひら 件のいいね!
M.J.
 M.J.
(@M.J.)
ゲスト
結合: 2週間前
投稿: 7
Topic starter  

リフィトリーさん

 

#listのなんかをdisplay:flex ;にするくらいしかわからなかったので助かりました。

殆ど一般的なCSSの質問になってしまいましたが、長々とありがとうございました。

これを元に勉強します。他の方の参考にもなれば幸いです。


リフィトリー 件のいいね!
リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

PC表示でスニペットが下に回りこんでしまうのを防ぐには、

#list article {
display: flex;
}

とするといいのかもしれません。

ただ、740px以下では、

display: block;

に戻さないといけないかもです。

 


リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

ああ、

 flex: 1;

を指定しなくてはいけない箇所もありました。

 

とりあえず、以下に全体のコードを貼っておきます。

/*横型2列*/
#list.list.ect-entry-card.front-page-type-index {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-wrap.a-wrap.border-element.cf {
width: 48%;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
width: 35%;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-content {
margin-left: 0;
flex: 1;
}

#list.list.ect-entry-card.front-page-type-index .cat-label {
position: static;
}

#list.list.ect-entry-card.front-page-type-index .card-thumb img {
vertical-align: top;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
margin-right: 4%;
}

#list article {
display: flex;
}

@media screen and (max-width: 740px) {

#list.list.ect-entry-card.front-page-type-index {
display: block;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-wrap.a-wrap.border-element.cf {
width: auto;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
width: 38%;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-content {
margin-left: 40%;
flex: 0 1 auto;
}

#list.list.ect-entry-card.front-page-type-index .cat-label {
position: absolute;
}

#list.list.ect-entry-card.front-page-type-index .card-thumb img {
vertical-align: baseline;
}

#list.list.ect-entry-card.front-page-type-index .entry-card-thumb {
margin-right: 3%;
}
#list article {
display: block;
}

}

 


リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

一応コードは書いてみたものの、やはり、カテゴリーラベルをどのようにするかや、サムネイル画像の生成サイズなどの問題もあり、ヒント程度にはなるかもしれませんが、オススメするカスタマイズではないような気がします。

 

やはり、テーマ作者様は、いろいろは条件を上手くデザインに落とし込んで工夫して作られているのだと思います。


M.J.
 M.J.
(@M.J.)
ゲスト
結合: 2週間前
投稿: 7
Topic starter  

リフィトリーさん

 

毎度ありがとうございます。

現状スニペットは非表示なので大丈夫でした。今後、参考にさせて頂きます。

flexの追記もありがとうございます。

(開発ツールでこれ消しても変わらず、どうなるかよくわからなかりませんでしたが・・・)

 

ところで私はPC表示の時だけ

@media screen and (min-width: 741px) {}

で2列表示にさせて、スマホ表示部分は一切追記せずに

エントリーカード(デフォルト)』でCocoon設定仕様の横型1列にしてみたのですが、これに問題はないでしょうか?

M.J.
 M.J.
(@M.J.)
ゲスト
結合: 2週間前
投稿: 7
Topic starter  

誤字は”よくわかりませんでした”ですね

最後もコード化されてしまってすみません。後から編集できないんですね。。


リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

M.J. さん

ところで私はPC表示の時だけ

@media screen and (min-width: 741px) {}

で2列表示にさせて、スマホ表示部分は一切追記せずに

『エントリーカード(デフォルト)』でCocoon設定仕様の横型1列にしてみたのですが、これに問題はないでしょうか?

繰り返しになってしまいますが、Cocoonのデフォルトの表示から、かなり変えた状態となりますので、どのような不都合が起こるかわかりません。

 

ですので、このカスタマイズは、私はオススメいたしません。

 

問題があるかどうかは、ご自身でご判断いただくしかありません。

 

また、フォーラムにカスタマイズのご相談を書きこまれる場合は、フォーラムの冒頭にもありますとおり、実際のURLをご提示いただければと思いす。

 

回答側で、同様のテスト環境を都度用意するのは、負担が大きすぎるためです。

 


リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

M.J. さん

ヒントとなりそうなことは、かなり書き込ませていただきましたので、あとは、ご自身で工夫なさってみてください。


リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

M.J. さん

もうひとつだけ書くとすれば、カスタマイズで改変したところは、必要な時以外は、「Cocoonのデフォルトに戻す」ということかと思います。(つまり、まず、デフォルトの状態を詳しく調べないといけない訳です)

 

変えたままの状態では、他に影響を及ぼす可能性が増えてしまいます。

 

なので、カスタマイズの影響を必要最小限にとどめる方向に努める方が良いのではないかと思います。


わいひら 件のいいね!
リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

M.J. さん

今、一番最初のご質問を読み返してみると・・

Cocoon設定→インデックスタブのカードタイプの設定について

「縦型カード2列」の設定ですとPC表示の場合、私的にサムネイルが大きく、1画面に表示できる記事数も少ないかなと思っております。

なので「エントリーカード(デフォルト)」のような横型の形のまま、幅を半分弱にして2列で表示したいのですがどのように設定すればよろしいでしょうか?

スマホ向けには「縦型カード2列」の見た目のままが希望です。

「縦型カード3列」が、最も合致しているような気もします。

 

 


わいひら 件のいいね!
M.J.
 M.J.
(@M.J.)
ゲスト
結合: 2週間前
投稿: 7
Topic starter  

リフィトリーさん

沢山投稿して頂き、ありがとうございます。

あとはそれをヒントに自分で時間かけて調整していきたいと思います。

 

URL提示できず負担かけてしまって申し訳ないです。次回はトピックたてる時はURL・環境等も併記します。

 

 

 

 


わいひらリフィトリー 件のいいね!
リフィトリー
(@leafytree)
Famed Member
結合: 2年前
投稿: 3517
 

M.J.さん

ちょっと、コードが雑で、お粗末さまでした。


共有:
スポンサーリンク
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:2年5ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2021/6/30まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:2年3ヶ月

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DBは7日以内なら無料自動復旧可能
×ファイルは有料かつ手動での復旧
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

サービス運営期間:17年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:4年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越し依頼が可能(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

サービス運営期間:5年

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