Cocoonフォーラム

2018.02.102023.01.25

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

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

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

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

相談内容：

不具合の発生手順：

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

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

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

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

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

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

共有:

通知

すべてクリア

[解決済] ブログカードについて

Cocoonテーマに関する質問

最新の投稿 : neko_t 4年前

13 投稿

2 ユーザー

16 Reactions

2,138 表示

RSS

neko_t

(@neko_t)

New Member Registered

結合: 4年前

投稿: 3

Topic starter 2021年3月8日 08:56

Wordpress、cssなど初心者のためお手数をおかけします。

silkというスキンで、ブログカードを横長に表示したく調べていたところ、下記の質問を見つけました。

私の場合、この質問と逆です。

https://wp-cocoon.com/community/cocoon-theme/cocoon-%E3%83%96%E3%83%AD%E3%82%B0%E3%82%AB%E3%83%BC%E3%83%89%E3%82%92%E7%B8%A6%E3%81%AB%E3%81%97%E3%81%9F%E3%81%84/

そこで、silkで定義しているブログカードについての記述を、横長に表示されるスキン（例としてLike Simplicity ）と同様にすれば期待通りになるのではと考えました。

ですが、Like Simplicityの方ではブログカードについては何も定義しておらず、ない知識で想像するとテーマの定義ファイルに従う様に書かれている様な気がしました（functions.php？）。

silkのcssからブログカードに関する記述を削除し、Like Simplicityと同じ様にfunctions.phpに記述を追加してみたのですが、ブログカードにならずただのリンクに枠がついたものになりました。

雑な質問で大変申し訳ないのですが、考えるべきところや見るべき参考リンクなどありましたら、ご教授いただけると助かります。

以上、よろしくお願いいたします。

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2021年3月8日 09:21

前略、neko_t さん

SILKの最新バージョンでは、横長にもできるようですが、これだと何か問題がありますでしょうか？

silkスキンでのブログカードについて

neko_t reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2021年3月8日 09:44

neko_t さん

試しにローカルのテストサイトでSILKで横長のブログカードにしてみたのですが、わりと細目で、スニペットが非表示になりました。

neko_t reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2021年3月8日 09:48

neko_t さん

私の書いたCSSのコードをSILKのデフォルトの縦長のものに適用すると以下のような感じになりました。

neko_t reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2021年3月8日 09:51

neko_t さん

ローカルのテスト環境のCocoonの親テーマのバージョンは 2.2.7.4 です。

CSSのコードをここにも貼り付けみます。

.blogcard-wrap {
  max-width: none;
  border-radius: 0;
}

.blogcard {
  padding: 1.6% 2.2% 2%;
  border: 1px solid #ccc;
}

.blogcard-thumbnail {
  float: left;
  width: 160px;
  margin-top: 3px;
}

.blogcard-content {
  padding: 0;
  margin-left: 170px;
  max-height: 140px;
  min-height: 100px;
}

.blogcard-title {
  font-size: 18px;
  margin-bottom: 0.4em;
}

.blogcard-footer {
  padding: 0.6% 0 0;
  font-size: 16px;
  opacity: 1;
}

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

  .blogcard-thumbnail {
    width: 120px;
  }  

  .blogcard-title {
    font-size: 0.9em;
    margin-bottom: 0;
  }

  .blogcard-snippet {
    font-size: 12px;
  }

  .blogcard-content {
    margin-left: 130px;
    max-height: 120px;
    min-height: 70px;
    font-size: 0.9em;
    line-height: 1.2;
  }

  .blogcard-footer {
    font-size: 14px;
  }

}

neko_t reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2021年3月8日 09:56

スマホだと以下のような感じです。

ちなみに、サムネイルをCocoon設定で右側に変更する機能がありますが、それには対応できないと思います。

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

neko_t reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2021年3月8日 10:13

ちょっと、スマホ表示がゴチャゴチャして見づらいので、修正してみました。

.blogcard-wrap {
  max-width: none;
  border-radius: 0;
}

.blogcard {
  padding: 1.6% 2.2% 2%;
  border: 1px solid #ccc;
}

.blogcard-thumbnail {
  float: left;
  width: 160px;
  margin-top: 3px;
}

.blogcard-content {
  padding: 0;
  margin-left: 170px;
  max-height: 140px;
  min-height: 100px;
}

.blogcard-title {
  font-size: 18px;
  margin-bottom: 0.4em;
}

.blogcard-footer {
  padding: 0.6% 0 0;
  font-size: 16px;
  opacity: 1;
}

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

  .blogcard-thumbnail {
    width: 120px;
  }  

  .blogcard-title {
    font-size: 0.9em;
    margin-bottom: .5em;
  }

  .blogcard-snippet {
    font-size: 12px;
  }

  .blogcard-content {
    margin-left: 130px;
    max-height: 120px;
    min-height: 70px;
    font-size: 0.9em;
    line-height: 1.5;
  }

  .blogcard-footer {
    font-size: 14px;
  }

}

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

  .blogcard {
    padding: 2.5%;
  }

  .blogcard-snippet {
    max-height: 6em;
  }

}

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

わいひら and neko_t reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2021年3月8日 10:27

SILKの横長のオプションのデザインが、最新のものなのかちょっと確かめていないのですが、もし、ご自身でCSSでカスタマイズされる際には、デザインのヒントになるかと思います。

neko_t reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2021年3月8日 11:13

neko_t さん

テスト環境のCocoonの親テーマのバージョンを：2.2.8.1にアップデートしたら、SILKの仕様が少し変わっているようです。

先ほどのコードに、

.blogcard-wrap {
  max-width: none;
}

を加える必要があるようです。

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

neko_t reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845

2021年3月8日 11:14

まとめると、以下のようになります。

.blogcard-wrap {
  max-width: none;
}

.blogcard {
  padding: 1.6% 2.2% 2%;
  border: 1px solid #ccc;
}

.blogcard-thumbnail {
  float: left;
  width: 160px;
  margin-top: 3px;
}

.blogcard-content {
  padding: 0;
  margin-left: 170px;
  max-height: 140px;
  min-height: 100px;
}

.blogcard-title {
  font-size: 18px;
  margin-bottom: 0.4em;
}

.blogcard-footer {
  padding: 0.6% 0 0;
  font-size: 16px;
  opacity: 1;
}

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

  .blogcard-thumbnail {
    width: 120px;
  }  

  .blogcard-title {
    font-size: 0.9em;
    margin-bottom: .5em;
  }

  .blogcard-snippet {
    font-size: 12px;
  }

  .blogcard-content {
    margin-left: 130px;
    max-height: 120px;
    min-height: 70px;
    font-size: 0.9em;
    line-height: 1.5;
  }

  .blogcard-footer {
    font-size: 14px;
  }

}

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

  .blogcard {
    padding: 2.5%;
  }

  .blogcard-snippet {
    max-height: 6em;
  }

}

わいひら and neko_t reacted

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 6年前

投稿: 6845