サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年4月18日 19:16
お世話になります。
不具合かどうかわかりませんが、ウィジェットのタグクラウドの表示が不自然のような気がしました。配置によって、ひとつのタグが横幅いっぱいに伸びています。
----------------------------------------------
サイト名：puu puu log
サイトURL： https://studiopuukko.xsrv.jp
ホームURL： https://studiopuukko.xsrv.jp
Wordpressバージョン：4.9.5
PHPバージョン：7.2.1
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:59.0) Gecko/20100101 Firefox/59.0
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：en-US,en;q=0.5
----------------------------------------------
テーマ名：Cocoon
バージョン：0.4.9
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.2
----------------------------------------------
利用中のプラグイン：
Akismet Anti-Spam 4.0.3
Boxers and Swipers 3.04
EWWW Image Optimizer 4.1.3
Jetpack by WordPress.com 6.0
WP Multibyte Patch 2.8.1
----------------------------------------------
2018年4月18日 23:57
こんにちは。以下はamp.cssです。今最新版をダウンロードして確認しました。
.tagcloud a {
background-color: #fff;
border: 1px solid #dddedf;
border-radius: 2px;
color: #555;
display: inline-block;
margin-bottom: 5px;
padding: 4px 8px;
text-decoration: none;
font-size: 12px;
margin-right: 3px;
flex: 1 0 auto;
display: flex;
justify-content: space-between
}
原因はflex: 1 0 auto;みたいですね。amp.cssの微調整してまして。あとついでにですが、display: inline-block; と display: flex; が上書きされてるようです。
amp.cssで子テーマ側のstyleで親テーマのstyleと同じコードで上書きがないかチェックしてたので見つけました。
2018年4月19日 00:50
一応は、そういった仕様にしました。
β版なのでいろいろ試そうと思って。
左右が揃って綺麗に見えるという利点もあるのですが、1つか2つが間延びして表示されるという難点もあります。
ここら辺は、おいおいと様子を見ながらまた戻すこともあるかもしれません。
2018年4月19日 20:49
こんにちは
最新バージョン：0.5.0のタグクラウドですが、タグの文字列が長い場合はみ出してしまうようです。例として
https://gyazo.com/d7beab01ffa8981318d2ec7686b8bd8f
PC上では気にならない人が多いと思いますが、スマホではみ出すような長い文字列の横揺れ対策があれば良い気もします。
個人的に横揺れ関連が結構気になり、横揺れをなくしたい人でなんか申し訳ないです。
2018年4月20日 01:10
Topic starter
2018年4月20日 12:27
長文テキストのタグ、PC表示ですが、横幅に収まっていました。
----------------------------------------------
テーマ名：Cocoon
バージョン：0.5.0
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.2
----------------------------------------------
2018年4月20日 13:27
word-break: break-all;は私も追記してたんですが、今回の
flex: 1 0 auto;
があると効かないんです。良く調べてないのでナゼかわかりませんが。
https://github.com/yhira/cocoon/commit/2be2ab801f0a98deaecdb4ee5b889f93ba2721e6
- なのでこのアップデートでは、はみ出した状態になりました。
タグ『テーマのテンプレート編集○○-php関連』の文字列を変更すれば良いんですが、テストにもなるので初期当時のまま置いてます＾＾；
この文字列なら、320pxのスマホで『サイドバーを開いた時』グワングワンと横揺れする感じです。もっと長いと320pxの場合は、はみだしそうです。
flex: initial;
すごく雑ですが.tagcloud aに上記を追記して初期値に戻してる状態では、はみ出しません。
2018年4月20日 23:31
こうするといかがでしょうか。
flex: 1 1 auto;
それにしても、FirefoxとChromeでここまで挙動に違いがあるとは思いませんでした。
かうたっく reacted
2018年4月21日 00:16
わいひらさんの flex: 1 1 auto; の方が断然スマート。
2018年4月21日 03:29
修正版を試すとChromePC：どの幅でもキレイに表示されてます。スマホ320pxのChrome・Safari・FireFox：amp・通常ページどれも.tagcloud aで横揺れ起こしません。
この件も解決です。ありがとうございます＾＾
わいひら reacted
Topic starter
2018年4月21日 09:29
アップしていただいた修正版で、Chrome（PC）でもきれいに収まっています。わいひらさんもおっしゃるとおり、今はβ版の段階ですので、いろいろと試されるのが良いかと思います。
かうたっくさん、Akiraさん、ありがとうございます。わたしは詳しいことはわからないのですが、お二方のコードを、（わかる範囲で）参考にさせていただいています。この場を借りてお礼申し上げます。
わいひら reacted
2018年4月21日 23:36
ご報告ありがとうございます。
Chromeでも問題なく表示されるようになって良かったです。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。