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

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

投稿記事の上に出るアイキャッチの高さを...
 
共有:
通知
すべてクリア

[解決済] 投稿記事の上に出るアイキャッチの高さを設定したいです。

9 投稿
2 ユーザー
5 Reactions
41 表示
(@nana-ka)
Active Member Registered
結合: 11時間前
投稿: 5
Topic starter  

昨日cocoonを使い始めたばかりの初心者です。

今まで記事内にアイキャッチ画像を表示したことがなく、アイキャッチ画像の画像サイズを設定しないでアップロードしていたため、投稿記事の上の部分にアイキャッチ画像を出すようにするとものすごく大きくなってしまいます。

特に縦長のものが大きくなってしまうため、縦横比はそのままで高さを400pxなどで設定する方法はありますでしょうか?

よろしくお願いいたします。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2912
 

●回答

アイキャッチは元画像がそのまま表示されます(メインカラム幅に応じ高さは調整)。
本来、アイキャッチは横長画像とし、どれも比率、大きさを揃え運用するのが望ましく。

Cocon設定での設定はありません。
このため、以下のCSSを追加し対応します。

/* アイキャッチの高さ400px、横方向中央寄せ */
.eye-catch {
  height: 400px;
  margin: 0 auto;
}

/* 画像比率を保持し拡縮 */
.eye-catch img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

   
わいひら reacted
(@nana-ka)
Active Member Registered
結合: 11時間前
投稿: 5
Topic starter  

ご回答ありがとうございます。

CSSで入れないとだめなのですね。

CSSを自分で書けなかったので助かります。

こちらそのままコピペして追加CSSのところに入れたのですが反映されないようです。

試しに極端に20pxなどにしましたが変わりませんでした。

他に何か設定でいじるところはありますでしょうか?


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2912
 

投稿者:: @nana-ka

こちらそのままコピペして追加CSSのところに入れたのですが反映されないようです。

フォーラムの注記にもありますが、URL提示がないので、何が原因なのか調べようがありません。
申し訳ありませんが提示がないので、これ以上はご自身で調べ対応願います、としか回答できません。


   
わいひら reacted
(@nana-ka)
Active Member Registered
結合: 11時間前
投稿: 5
Topic starter  

情報提供が足りず申し訳ございません。

下記のサイトになります(特に大きいアイキャッチ画像がこちらのページです)。

https://reha.blue/?p=339

 

よろしくお願いいたします。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2912
 

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

[Cocoon設定]→[高速化]→「CSSを縮小化する」をオフとしてください。

上記ページを見ましたが、回答したCSSがないようです。
先述のコードのheight:100pxすれば添付図のようになります。


Autoptimizeを使っていませんか?その中でCSSを縮小化しているかもしれません。
また、このプラグインは推奨できません。
 

   
わいひら reacted
(@nana-ka)
Active Member Registered
結合: 11時間前
投稿: 5
Topic starter  

ご丁寧に画像までつけていただきありがとうございます。

[Cocoon設定]→[高速化]→「CSSを縮小化する」の部分を確認してみたのですがチェックが入っていないのでオフになっているようです。

同じような効果のあるプラグインが入ってしまっていてそれが影響しているのかもしれません。

下記は高速化と関係ありそうなので無効化を試しましたが変わりませんでした。

WP-Optimize
a3 Lazy Load
EWWW Image Optimizer
Autoptimize

他に下記が有効化されているのですが、何か疑わしいものがありますでしょうか?

よろしくお願いいたします。

Advanced Editor Tools
Akismet Anti-spam: Spam Protection
Broken Link Checker
Google XML Sitemaps
Redirection
Search Regex
SEO SIMPLE PACK
Shortcoder
SiteGuard WP Plugin

添付画像のように入れてあります。

This post was modified 9時間前 by nana-ka

   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 3年前
投稿: 2912
 

●回答

コードをテキストファイルに貼り付けてみました。
入力CSSにミスがあります。

      /* アイキャッチの高さ400px、横方向中央寄せ */
.eye-catch {
 ?height: 100px;
  margin: 0 auto;
}

/* 画像比率を保持し拡縮 */
.eye-catch img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

/*480px以下*/
@media screen and (max-width: 480px){
.article h1{
  font-size: 18px;
  border-bottom: 3px dotted #000;
}

1.heightの前が半角スペースではありません。文字化けしています

https://wp-cocoon.com/community/postid/73179/
2.@mediaの「}」が足りません。


   
わいひら reacted
(@nana-ka)
Active Member Registered
結合: 11時間前
投稿: 5
Topic starter  

ありがとうございます。

テキストファイルに貼り付けていただいたものをコピペして?を消したら小さくなりました。

見えていなくても文字化けした?が入ってしまっていたということなのですね。

調べても使用できそうなCSSが載っていなかったので助かりました。

ありがとうございました。

This post was modified 9時間前 by nana-ka

   
わいひら reacted
共有:

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

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

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

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

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

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

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

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