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

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

1.3.7.3 → 1.3.9.5更新...
 
共有:
通知
すべてクリア

[解決済] 1.3.7.3 → 1.3.9.5更新でカルーセルのデザインがおかしくなった。

25 投稿
4 ユーザー
5 Reactions
2,133 表示
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

WordPressの管理画面にて「1.3.7.3 → 1.3.9.5」と更新したところ、カルーセルのデザインがおかしくなりました。プラグイン停止、CSSを消しても治らなかったので1.3.7.3に戻しています。

デザインの崩れはすごく言い表しにくいのですが、ブラウザのwidthによって、カルーセルというか「div class="slick-list draggable"」というか、とにかくhightが変わります。例えば、

・ブラウザのwidthを大きくするとカルーセルのhightが小さくなり、記事タイトルが各aタグの下のafter要素?のような部分に被って見えなくなってしまう。

・逆に、ブラウザのwidthを小さくするとカルーセルのhightが大きくなり、記事タイトルの文字サイズが小さくなり、after要素?のような部分が無駄に余ってダサくなる。

といった感じです。同様の不具合は既に確認されていますでしょうか?よろしくお願いします。


   
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

追記:

形としては基本2カラム右サイドバーで、768px以下ワンカラムになる状態です。例で言うと、

・2カラムの状態でwidthを大きめ(iMacのスクリーンで半分以上くらい)にするとタイトルが見えなくなる。

・768以下とか、1カラムで小さくしていくと相対的&絶対的にカルーセルのheightが大きくなり、ダサくなる。

といった状況です。


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

できれば実際のページのURLを提示していただけると助かります。

また、おかしな表示状態のスクリーンショット画像をアップしていただけると助かります。

ダサくなるというのは、主観でしかないのでキャプチャしてもらってtanakatarouさんにとって、どういう状態がダサいのかを知る必要があります。


   
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

毎度お手数おかけします。

改めて更新して確認したところ、カルーセルで1度に表示される記事の数が変わるのと同時に、起きているようでした。

1度に6つ表示〜2つ表示の場合までスクショをとったので、添付します。


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

以前の状態だと、今後、枠線を表示させる機能を実装しようとしたときに、以下のような不揃いになるためボックスを高さを調整したからそのようになっています。
以前の状態はこちら。

変更後はこちら。

ただ、枠線を表示させないと、文字列の直下を基準としてしまうので、そのように感じてしまうのも確かにそうだと思います。
少し高さを調整したものを以下にアップしておきました(2行くらいを上限とした)。
https://github.com/yhira/cocoon/archive/master.zip
ここら辺は、もう少し微調整は必要かもしれません。

ちなみに、動作環境は何でしょうか。
以下の情報も貼り付けていただけると助かります。
https://wp-cocoon.com/theme-report/
僕の環境では、そこまでの表示にはならないので。


   
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

高さを調整したものを試したところ、1度に2つ表示時は少しよくなりましたが、その他は変わらず、6つ表示時にはむしろ1行目までしか見えなくなりました。

環境は以下です。とりあえず枠線表示まで待つことにしようかと思います。。。

----------------------------------------------

コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
Wordpressバージョン:4.9.8
PHPバージョン:7.2.6
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.1 Safari/605.1.15
サーバーソフト:Apache
サーバープロトコル:HTTP/1.1
言語:ja-jp
----------------------------------------------
テーマ名:Cocoon
バージョン:1.4.0.2
カテゴリ数:3
タグ数:27
ユーザー数:2
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
利用中のプラグイン:
All In One SEO Pack 2.9.1
Broken Link Checker 1.11.5
Check Copy Contents(CCC) 1.4.1
EWWW Image Optimizer 4.5.1
Google XML Sitemaps 4.0.9
Jetpack by WordPress.com 6.7
Newpost Catch 1.3.6
Page Builder by SiteOrigin 2.9.2
Revive Old Posts (Former Tweet Old Post) 8.1.3
Simple Image Sizes 3.2.0
UpdraftPlus - Backup/Restore 1.15.5
WP Multibyte Patch 2.8.1
----------------------------------------------


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

Macなんですね。
Macは持っていないものでどうしたものか…。

応急処置的に子テーマのstyle.cssに、以下のように記入すれば、画像と同様の枠線はでかと思います。

.carousel-entry-card-wrap{
box-shadow: 0 2px 2px 0 rgba(0,0,0,.16),0 0 0 1px rgba(0,0,0,.08);
border-radius: 4px;
}

box-shadowの代わりに、border: 1px solid #ddd;を記入すれば、陰ではなく、通常の背も表示できます。

.carousel-entry-card-wrap{
border: 1px solid #ddd;
border-radius: 4px;
}

この仕様は固まったわけではないので、もしかしたら元に戻すこともありえるかもしれません。


   
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

ありがとうございます。

とりあえず影をつけてcarousel-inの背景透明にしたりしたら少しマシになったんですが、まだタイトルが見えなくなりがちだったので、ブラウザの各widthごとにそれぞれfont-sizeをimportant指定してタイトルが見える状態にはできた、みたいな状態になりました。。。

ただコレはコレで、chromeブラウザのズーム機能とかで80%70%と小さくしていくと結局タイトルが隠れてしまったり、何かよくわからない不具合(添付画像のような)も出てきたりという状態でもあります。。。。

ちなみにズームアウトするのは、特にノートパソコン(mac)なんかで閲覧するとズーム100%ではサイトの全てがデカすぎる(スクロールも多くなるし個人的に読みにくい)からなんですが、コレの解決方法ってあるんでしょうか・・・?cocoonのサイトは全部そういう仕様なののかなと思ってるので放置してるんですが。。。

とりあえず枠線表示の仕様になるのを待とうかとも思いますが、なんとなくその時になっても状況が変わらなそうなので、枠線アリに仕様を固める場合は、今までのカルーセルも選択できる仕様を希望します・・・・。


   
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  
何かよくわからない不具合(添付画像のような)も出てきたりという状態でもあります。。。。

すみませんコレは普通にカードにホバーした時に添付した画像の右端のカードみたいに色変えたりっていうCSSのせいでした。


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

ちなみにズームアウトするのは、特にノートパソコン(mac)なんかで閲覧するとズーム100%ではサイトの全てがデカすぎる(スクロールも多くなるし個人的に読みにくい)からなんですが、コレの解決方法ってあるんでしょうか・・・?cocoonのサイトは全部そういう仕様なののかなと思ってるので放置してるんですが。。。

重ね重ねになり申しわけないのですが、「サイトのすべてがデカすぎる」という大ざっぱな説明だけでは正直わからないです。
実際Macの100%表示状態で撮影したスクリーンショット等がないと何とも言えないです(※見てもMac環境がないのでわからない可能性がありますのでご了承ください)。
もしくは、もう少し詳細に書いていただけないでしょうか。
あと出来れば、トピックの案内にはあるように実際のURLを提示していただきたいところです。


   
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

URLはすみません・・・・・。

ズームの件については、少なくともウチのMacbookProの15-inchの話なんですが、スクショ添付します。

cocoonと見られるサイトを見てみるとみんなこうなので、みんなどう思ってるんだろうな〜、と思った次第です。。。。


   
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

画像デカすぎました。。。再添付します。


   
(@jamkun)
Estimable Member Registered
結合: 7年前
投稿: 158
 

Mac本体の設定で

システム環境設定>ディスプレイ

から解像度を「変更」し、ディスプレイの解像度を標準より上げると、ズームアウトしなくても見やすいサイズになりませんか?

うちのMacBook Pro(2012)もデフォルトだと1440x900、解像度を上げてあげると1920x1200と現在PCで標準的なサイズ程度までは上げられましたよ。つまり、解像度の低いディスプレイでサイトを見ている状態、の本体設定になってはいないでしょうか。確認してみてください。

(ここを変更するとPC全体に影響します)


   
わいひら reacted
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

ありがとうございます。ウチのは2013ですがデフォルトで1440x900になってたので変更できました。

初めて知ったんですけどコレってmacユーザーならみんな知ってますかね?

ズームアウトにしても知らない人が読者にどのくらいいるのかな?いたらヤダな〜と思ってたのでついでに質問しちゃったんですけど、まあそんなこと言い出したらキリないですよね・・・・。


   
(@jamkun)
Estimable Member Registered
結合: 7年前
投稿: 158
 

変更できて何よりです。希望どおりの見やすさになりましたでしょうか?

デフォルトからの解像度変更についてはどうでしょうかね。Cocoonの話題とは離れてしまいます(テーマやCMS問わず全サイト共通のはずですので)が、Macの設定画面をあまり見ずにデフォルトで使い始めている方だと、意外と変更忘れがちかもしれませんね。ほかにもアイコンまで小さくなりますので、知っていても嫌ってデフォルトにしておく人だったり。

最近は学校でMacを指定される学生さんも一部にはいるようですので、言い出したらきりがありませんが、Mac使いに限らずWindowsでもズームアウト方法を知らず低解像度の格安ノートPCを使っていた、ということはあるかもしれません。

もしMacからの流入が多数なのであれば、見やすくする方法で紹介記事を書きつつ快適に閲覧してもらえるようになるかもしれませんね。ただ私だったらですが、よほどMac流入多数なら別ですが、低解像度(または逆に高解像度)の環境のことまで考えだしたらやることが多すぎるので、気にしませんかね。


   
わいひら reacted
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

ですよね〜・・・。余談ありがとうございます。


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

ズームアウトにしても知らない人が読者にどのくらいいるのかな?

デフォルトがどの解像度なのか、変更して1440x900なのか不明ですけど、アナリティクスで簡単に確認できると思いますよ。

例えば『ユーザー』の『オペレーションシステム』でMacが全体の何%で、解像度をみるとか。ブラウザのサイズとかもパッと分かるカモです。

人によって・書いてるページによって流入も違うと思いますが。

*******

無事、解決できて良かったですね❦


   
わいひら reacted
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

本当だ・・・・・便利ですね。。。。。正直まだ立ち上げたばかりなのでまともに分析できるほど流入とかなくて・・・・取らぬタヌキの皮算用するおバカの心配性なんですが。。。。。アナリティクスを友達にします。。。。


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

分析できるほど流入とかなくて

大丈夫ですよ!

始めたばかりで分析できるほど流入があって、さらに分野で興味があることであれば、色んな人が飛びつきますよ。

??

話がさらにそれたようですが、アナリティクスで便利なのは、はじめのうちは検索キーワードだったり。

検索ユーザーさんが何を求めているか。って事が具体的に分かった上で記事を書けたらベストかも知れません。

どのように書けば、相手に伝わりやすいか、とか。この情報で楽しんでもらえるか。とか…

なにより好きでいて、続けられるブログの運営が第一関門な気もします。長い目で見ると思う通りにやってみるのも良いかもですし。

Googleさんのご機嫌をイチイチ確認するのも面倒ですので、ユーザーに欲しい情報が届けば良い気もします。

  • アナリティクスは、ユーザーにとって良いコンテンツを作るための道具

って感じだと思うので、検索ユーザーさん。

場合によってSNSユーザーさんの超冷静な視点を大事にしたら良い気もしてます。って感じですかね。


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

なるほど、デフォルトの解像度的問題だったんですね。
Windowsもデフォルトは低解像度だったりすることもあります。僕もまずパソコンを購入したら、解像度を最大に上げる作業から始めます。
そこらへんは、機種ごとに表示を変更する事はできないのでこのままにしたいと思います(出来ないことはないけどコードが複雑になるのでコード保守的に問題が出てくる)。

あと、当トピックの主問題であるカルーセルアイテムの表示も、最新版で枠線に表示/非表示双方でどちらも問題ないように表示できるように修正できたのではないかと思います。おそらく。
※以前の表示しようにもどしながらも、枠線を表示したボックス表示にも問題ないようにした。


   
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

かうたっくさん

ありがとうございますw CocoonとCocoonユーザーのみなさんのおかげで楽しくサイトを作れてモチベになっています。

わいひらさん

解像度はテーマの流石にやるコトではないですね。主問題の対応ありがとうございます。大変助かります。修正後の動作異常あればまた。


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

かうたっくさん

ありがとうございますw 

以降略してますが。

自分が運営してきて思った事を書いたのですが、『誰やねんお前。』なんなら、どこの馬の骨やねんですよね。

それが前提での書き込みでもあるだろなぁっと思えば、なんだか申し訳ないスミマセンです。

 


   
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

??(゚o゚;;

トピック立てた人間が主題から逸れる話を広げまくるのもアレかと思い手短を意識してますが、なんというかとりあえず、かうたっくさんのサイトには立ち上げから今までずっとお世話になっております( ^ω^ ) ありがとうございます。


   
TM_BB reacted
(@tanakatarou)
Eminent Member
結合: 6年前
投稿: 42
トピックスターター  

わいひらさんへ追記

不具合あればまた??とかw なんか変な書き方になってしまったので追記しておきます。

1.4.1試してみましたが、とりあえず以前と同様に枠線ナシで使えました。


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

こんにちは❦

そうだったんですね。顔や表情を見てないので、何か悪い事したかと思いました。

文面だけなので私も気を付けますね。っといっても個人的に驚くほど誤字が多いんですが^^;

お疲れさまでした!


   
共有:

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

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

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

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

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

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

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

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