Cocoonフォーラム

2018-02-102023-01-25

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

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

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

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

相談内容：

不具合の発生手順：

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

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

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

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

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

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

共有:

通知

すべてクリア

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

Cocoonテーマに関する質問

最新の投稿 : ろこ 3年前

6 投稿

3 ユーザー

6 Likes

2,518 表示

解決済

RSS

カロジェロ

(@カロジェロ)

New Member

結合: 3年前

投稿: 2

Topic starter 2021-01-31 22:13

silkスキンでのブログカードの編集についてお伺いします。

他のスキンではリンク先のサムネイルと記事タイトル等が横並びになっており、「Cocoon設定」→「ブログカード」からサムネイルの位置（右側、左側）を編集できるのですが、 silkスキンを使うと、サムネイルとタイトルなどが縦に並んでしまい、サムネイルの表示位置（右側、左側）が調整できません。silkスキンのまま、横並びにする方法があれば教えていただけると助かります。

よろしくお願いします。

引用

リフィトリー

(@leafytree)

Illustrious Member Moderator

結合: 5年前

投稿: 6845

2021-02-01 00:19

前略、カロジェロさん

他にも、方法はあるのかもしれませんが、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;
  }

}