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

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

ヘッダー下のカルーセルの表示がおかしい...
 
共有:
通知
すべてクリア

[解決済] ヘッダー下のカルーセルの表示がおかしい件について

14 投稿
3 ユーザー
5 Reactions
3,458 表示
(@stinger)
Eminent Member Registered
結合: 7年前
投稿: 20
Topic starter  

いつもお世話になっております。

先ほど最新バージョンにアップデートしたところ、標記の件の通り、ヘッダー下のカルーセルの表示が崩れてしまいました。

cssできれいに表示するように調整してましたが、今後もアップデートすると崩れるようになるのでしょうか?

 

----------------------------------------------
サイト名:懸賞情報 present-HEAVEN*
サイトURL: https://sevenheaven.jp/kensyo
ホームURL: https://sevenheaven.jp/kensyo
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
使用スキンURL:
Wordpressバージョン:4.8.7
PHPバージョン:5.6.21
ブラウザ:Mozilla/5.0 (Windows NT 10.0; WOW64; rv:61.0) Gecko/20100101 Firefox/61.0
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.7,en;q=0.3
----------------------------------------------
テーマ名:Cocoon
バージョン:1.5.0
カテゴリ数:9
タグ数:5
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.4
----------------------------------------------
利用中のプラグイン:
AddQuicktag 2.5.2
Categories Images 2.5.3
Custom Field Template 2.3.7
Featured Image from URL 2.0.3
Flickr - Pick a Picture 1.2.6
Google XML Sitemaps 4.0.9
Multisite Shared Sidebar 1.2
Network Latest Posts 3.7.1
Newpost Catch 1.3.6
Optimize Database after Deleting Revisions 4.7.2
Page Builder by SiteOrigin 2.6.7
Pixabay Images 2.14
Really Simple SSL 2.5.25
Recent Posts Widget Extended 0.9.9.7
Shortcodes Ultimate 5.0.4
Simple Tags 2.4.6
SiteOrigin Widgets Bundle 1.11.8
Smart Slider 3 3.2.14
WebSub/PubSubHubbub 3.0.0
What's New Generator 2.0.2
WooSidebars 1.4.3
WordPress Popular Posts 4.2.0
WP Canvas - Shortcodes 1.85
Wp Posts Carousel 1.3.6
----------------------------------------------

 


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

cssできれいに表示するように調整してましたが、今後もアップデートすると崩れるようになるのでしょうか?

バージョンアップ前・あとでも表示は崩れませんし、崩れてませんでしたよ。

子テーマのCSSを一時的にバックアップをとり、追記したstyleが無い状態でキチンと表示されませんか?

されない場合は、プラグインのstyleが影響している可能性もあります。

 

一番気にされているであろう箇所は以下のカスタマイズだと思います。

/**カルーセル記事タイトル文字**/
.carousel-entry-card-title{
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 5px 10px; 
    max-height: 4pc;
    height: 4pc;
    line-height: 1.3;
    font-size: 14px;
    color: #fff;   
    text-align: left;
    background: rgba(0,0,0,.5);
    overflow: hidden;
}

不要な項目があるので削除しても良いと思います。例として以下など

.carousel-entry-card-title{
    padding: 5px 10px;
    line-height: 1.3;
    font-size: 14px;
    color: #fff;
    background: rgba(0,0,0,.5);
    max-height: 4em;
}

   
わいひら reacted
(@stinger)
Eminent Member Registered
結合: 7年前
投稿: 20
Topic starter  

かうたっく様、いつもお世話になっております。

以下の添付ファイルのようにアップデート前はきれいに表示されておりました。

親テーマはいじっておりませんので、子テーマのCSSが原因なのはわかっておりますが、今回修正して以前のように直したとしても、今後もアップデートが入ると変わってしまうのか心配でしたので、こちらのフォーラムに記入しました。


   
(@stinger)
Eminent Member Registered
結合: 7年前
投稿: 20
Topic starter  

ちなみに、アップデート後は以下の添付ファイルのように変わりました。


   
(@stinger)
Eminent Member Registered
結合: 7年前
投稿: 20
Topic starter  

cssを削除した際は、いかの添付ファイルのように画像とタイトルの間がおかしいことになります。


   
(@stinger)
Eminent Member Registered
結合: 7年前
投稿: 20
Topic starter  

そして、かうたっく様の提案されたCSSは以下の添付ファイルのようになっております。

 

前提条件として、アイキャッチ画像はサイズは一定ではないため画像の高さは変わります。

それを隠すためタイトルを画像に重ねて、ごまかしておりました。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

前提条件として、アイキャッチ画像はサイズは一定ではないため画像の高さは変わります。

アイキャッチの高さは、私もバラバラなのですが、そのようになりませんよ。

https://gyazo.com/7db304d1cf447822b077002f45d3ebd0

なので

  • 子テーマのCSSカスタマイズを停止
  • プラグインの装飾が原因でないかをチェックしても良いかと思ったんですね。

※高速化にチェックが入っているので、全部のstyleを初期化する作業が簡単に行えません。

カルーセルなので、要素をみるにしてもチャカチャカ動くので、ちゃんと見せてくれない状態だったり。

取り急ぎ。上記の2点をご確認いただけますか。

あと何かあれば高速化のチェックを外して頂けたらと思います。

 

それから、良いお年を^^

(一足早いかもしれませんが!?)あけましておめでとうございます!今年もよろしくお願いします❦

 


   
わいひら reacted
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

あっ、たぶんです(確認してません)がサムネイルの生成をすればちゃんと表示されるかもしれません。

テーマで指定されているサムネイルサイズが作られてないからかもです。

Regenerate Thumbnails(プラグイン)で生成できますので、それを使ってみてください。

一応。念のために画像ファイルのバックアップをマルっとしてると安心っちゃ安心かもです。

他2点は当初書いたとおりです。


   
わいひら reacted
(@stinger)
Eminent Member Registered
結合: 7年前
投稿: 20
Topic starter  

かうたっく様、新年あけましておめでとうございます。

解決方法の提案ありがとうございます。インフルにかかっておりましてダウンしていて、返信が遅れまして申し訳ありませんでした。

早速ですが、本題に戻ります。

アイキャッチの高さは、私もバラバラなのですが、そのようになりませんよ。

アイキャッチは皆さんきちんと揃えているとばかり思っていましたので前提条件として書かなかったのですが、私のサイトは、サイトの軽量化のためにアイキャッチ含めてgoogleフォトなどの外部画像を利用しております。

ですので、高さがまちまちになります。

もちろん自サーバーに画像は、背景画像など数枚しか保存されてません。

アイキャッチ画像の高さがまちまちになるのは、納得の上でcocoonのテーマを利用しております。

ただ今後も、子テーマでcssを調整しても、アップデートすると崩れるようになるのかを把握したかったのです。


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

ただ今後も、子テーマでcssを調整しても、アップデートすると崩れるようになるのかを把握したかったのです。

子テーマで調整しても、テーマの更新で該当箇所の変更があれば、調整が必要になる可能性は『ない』と言えないと思いますよ。

それぞれ個人のカスタマイズを把握してもらえない。把握はできないと思うので。

実際今まで、アップデートで微妙にズレたりなどの調整はたくさんありましたので。(だいぶん落ち着いてきてるので減ってますが、修正が不要とは言えないと思います)

インフルエンザでダウン後ですので、お大事になさってくださいね。


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

ただ今後も、子テーマでcssを調整しても、アップデートすると崩れるようになるのかを把握したかったのです。

今のところ変更する予定はありませんが、かうたっくさんが書かれているように、今後変更する可能性がないとは言えません。
仮に不具合が発見された場合、修正する必要とかもあるので。

ダウンロードの際に同意いただいているCocoonの利用規約の免責事項にも以下のように書いてあります。

作者の考えに基づき仕様が変わる可能性もあります。

最新のWEB状況や、不具合等の関係上、仕様が変える必要が出てくる可能性もあるので、変更しないとは保証できません。

 

あと、画像の高さがそろわないのは、外部サイトの画像を利用している以上、どうしようもありません。

私のサイトは、サイトの軽量化のためにアイキャッチ含めてgoogleフォトなどの外部画像を利用しております。

また、サイト軽量化(高速化?)のためにGoogle Photoの画像を利用しているのであれば、逆効果の可能性はあると思います。
サーバーのディスクサイズを減らしたいからという理由であれば、少しわかりますが、いまどき普通に画像が置けないサーバーディスクサイズだとしたら、逆にちょっと考え物のような気もします。


   
(@stinger)
Eminent Member Registered
結合: 7年前
投稿: 20
Topic starter  

かうたっく様 いつもお世話になっております。

実際今まで、アップデートで微妙にズレたりなどの調整はたくさんありましたので。(だいぶん落ち着いてきてるので減ってますが、修正が不要とは言えないと思います)

そうなんですね。ありがとうございます。

とはいえ、私にとっては、結構悩んだCSSだったので、これだけデザインが崩れると不具合ではないのかなぁ?と思ったのです。

また何かありましたら、よろしくお願いします。


   
(@stinger)
Eminent Member Registered
結合: 7年前
投稿: 20
Topic starter  

わいひら様 いつもお世話になっております。

そして、ご回答ありがとうございました。

最新のWEB状況や、不具合等の関係上、仕様が変える必要が出てくる可能性もあるので、変更しないとは保証できません。

確かにその通りですね。

かなりカルーセルの記事タイトルのデザインが崩れましたので、疑問に思っておりました。

 

アイキャッチ画像の高さに関しては、

アイキャッチ画像の高さがまちまちになるのは、納得の上でcocoonのテーマを利用しております。

と以前のコメントにも書いてあるように納得しております。

 

また、サイト軽量化(高速化?)のためにGoogle Photoの画像を利用しているのであれば、逆効果の可能性はあると思います。

確かにGoogle Photoの画像が遅延して、webページが開くのが遅くなることがたまにあるのは事実でした。

いつも丁寧な説明色々ありがとうございます。

今後もまた何かありましたらよろしくお願いします。

インフルエンザ流行っておりますので、どうぞ体調に気を付けてcocoonのテーマ開発頑張ってください。


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

Google Photoを利用する難点としては以下のようなものがあります。

  1. 2回目訪問時に高速化される画像のブラウザーキャッシュ設定を出来ない(Google Photoのキャッシュの現状については調べてません)
  2. 画像を最適化してリサイズ出来ないので、大きなサイズの画像を余分に読み込む必要がある可能性
  3. Googleのサーバー状況によっては読み込みが遅くなる可能性

一応サーバー負荷を多少は減らせるという利点もあるのですが、そこらへんは考えておく必要はあるかもしれません。

一応、インフルエンザの予防接種を受けましたが、気をつけたいと思います。
stingerさんもお体を大事にしてください。


   
共有:

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

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

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

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

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

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

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

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