サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2020年1月28日 10:44
Cocoonのコードを見ていて思った事を、テーマ作成者さんに
- ねぎらう
- 提案する
などの雑談。
経緯：
トピックの書き込みで提案・案内しているタイプの人間ですが
- 何かのCSSを見て、これテーマ作成者さんが苦戦したのかなぁ～
って思ったため、ねぎらいがあっても良いのではと思ったんで、自由に書き込むスペース。
あと、
タイトルを付けるまでもない事を、トピックが閉まらないから、いつでも書き込めれたら楽。って事で立ててみました。
トピックスターター 2020年1月28日 10:52
トピックが閉まらないのをいいことに立てたのもありますけど、
CSSを見て苦労されたんだと思う。って思ったのもあります。※どのスタイルだったか、忘れました 。質問の書き込みついでみ見たけどメモってません。ゴメンナサイ?
ずっとメモしていたことを、まず書きますね。
- CSSで同じセレクタの装飾でプロパティが被ってる件
他にもありますが、今度またコピペしますね。
ココから、メモのコピペ。雑でスミマセンが。
display: block;不要
.swatchimages {
display: block;
display: flex;
flex-wrap: wrap;
margin-top: 3px;
}
.swatchimages:hover .si-thumb {
display: block;
display: flex;
align-items: center;
justify-content: center;
}
display: inline-block;不要
.tagcloud a {
border: 1px solid #ddd;
border-radius: 2px;
color: #555;
display: inline-block;
padding: 3px 8px;
text-decoration: none;
font-size: 12px;
margin: 2px;
flex: 1 1 auto;
display: flex;
justify-content: space-between;
transition: all 0.7s;
}
background-colorのダブリ
.recommended.rcs-center-label-title .card-content .card-title {
color: #333;
background-color: #fffffc;
padding: 6px 1em;
opacity: 0.8;
background-color: rgba(255, 255, 255, 0.9);
width: 100%;
transition: all .5s;
}
padding: 2em 0.6em 0.2em;
とすれば、padding-top: 2em;不要
.eye-catch-caption {
color: #fff;
position: absolute;
bottom: 0;
padding: 0.2em 0.6em;
text-align: right;
width: 100%;
font-size: 0.9em;
background: linear-gradient(180deg, transparent, #555);
opacity: 0.9;
padding-top: 2em;
}
top: -13px;不要
.information-box::before,
.question-box::before,
.alert-box::before,
.information::before,
.question::before,
.alert::before,
.memo-box::before,
.comment-box::before,
.common-icon-box::before {
font-family: "FontAwesome";
font-size: 42px;
position: absolute;
top: -13px;
left: 13px;
padding-right: .15em;
line-height: 1em;
top: 50%;
margin-top: -.5em;
width: 44px;
text-align: center;
}
１つmargin: 0;不要
body {
/* フォントの種類 */
font-family: "游ゴシック体", "Yu Gothic", "Hiragino Kaku Gothic Pro", "Meiryo", sans-serif;
/* フォントのサイズ */
font-size: 18px;
/* フォントの色 */
color: #333;
/* カーニングの設定 */
/* 行間の設定 */
line-height: 1.8;
margin: 0;
overflow-wrap: break-word;
background-color: #f4f5f7;
text-size-adjust: 100%;
margin: 0;
/* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
background-attachment: fixed;
}
margin-bottom: 5px;不要
margin: 0 0 5px 0;
.entry-card-title, .related-entry-card-title {
font-size: 18px;
margin: 0;
line-height: 1.2;
margin-bottom: 5px;
font-weight: bold;
}
margin: 1em 0;不要
.column-wrap {
display: flex;
justify-content: space-between;
position: relative;
margin: 1em 0;
margin: 0;
}
確認した当時はチェックしたけど、今はチェックしてません＾＾；
2020年1月28日 20:14
ありがとうございます！
同じカッコ内に書かれている明らかな重複ですね ?
修正しておきました。
https://github.com/yhira/cocoon/commit/62f005dd145b3eb2a6f8637c8877f58595766af5#diff-da232d78aa810382f2dcdceae308ff8e
けっこCSSが減ったかも。
トピックスターター 2020年1月30日 09:16
ホント面倒なのに、ご対応ありがとうございます！
あとちょっとややこしいのですが、
div id="toc" 領域のCSS、line-height: 1.5;
.toc {
border: 1px solid #ccc;
font-size: .9em;
line-height: 1.5;
padding: 1em 1.6em;
margin-bottom: 1em;
display: table;
line-height: 2;
}
これも意味ないかも。
https://wp-cocoon.com/google-tag-manager-amp-id/
- 理由
Cocoon設定・本文タブの 本文余白 行の高さ：デフォルトで1.8
https://gyazo.com/bdc78fe29d8f47601c6726991fa57ed7
ユーザーさんが任意の数値を入れてたものほうが優先順位が高いからです。
.entry-content>*, .demo .entry-content p {
line-height: 1.8;
}
.toc { line-height: 1.5; }の優先順位を上げて、1.5にするか削除しても良いカモ。って思った感じです。
**************
あと同じdiv id="toc" 領域のul・olの padding-left: 1em;は、モバイル・タブレットビューでは効いてません。
.toc ul, .toc ol {
padding-left: 1em;
margin: 0;
}
@media screen and (max-width: 834px)メディアクエリ内の以下style
.article ul, .article ol {
padding-left: 26px;
}
- 理由
CSSの書き込み順で、上のCSSが下のCSS、メディアクエリscreen and (max-width: 834px)内の.article ul, .article olのpadding-left: 26px;を表示しているからです。
*******
同じく目次タブにある目次ナンバーの表示設定で、うぅ…！？ って思うこと
https://gyazo.com/62138fb8e610e09f198efb8b8209785a
デフォルトでは表示がキレイです。
https://gyazo.com/702274cc87299f7b4981126b770df44f
目次ナンバーの表示
を
- 表示しない
- 数字詳細（ex: 1.1.1）
にして、モバイルで見れば左側のスペースが、いきなり気になる感じで。
目次の階層ol・ｕl入れ子になれば、なるほど左のスペースが気になるので、みんなどうしてるのかな。って思うだけですが
- 表示しない
class属性：toc tnt-none
https://gyazo.com/61cb6dd7da8aa4a2e27419419e682a01
- 数字詳細（ex: 1.1.1
class属性：toc tnt-number-detail
https://gyazo.com/71f505ec2263f7c13b9e549f91f924c2
div.tnt-number-detail ol {
padding-left: 0;
}
試しに親テーマstyleの全クエリ欄に適用
/* toc no.none detail */
.tnt-none,
div.tnt-none ul,
.tnt-number-detail,
div.tnt-number-detail ol {
padding-left: 1em;
}
これで『目次ナンバーの表示』『数字（デフォルト）』に近くなって、見栄えが良くなると個人的に思います。
- また
『数字（デフォルト）』適用されている人には影響がない。 - あと
モバイル時に.article ul, .article ol { padding-left: 26px; }に上書きされない
優先順位だと思われます。個人的に。
もしわいひらさんがもし気になれば。って事と、自分は使ってない機能ですが、見栄えがちょっと気になったんで、報告だけしておきますね。
3連チャンでスミマセンが、同じ直すのであれば・・・。って事で分けませんでしたが、未対応部分があれば、またコピペしますね。
わいひら reacted
2020年1月30日 13:47
素人が横からすいません。
子テーマのstyle.cssへのcssの追加が1000行を超えてしまいそうな勢い（現在700行）なのですが、これってどれくらい良くないことなのでしょうか？
他テーマを３回くらい軽油してcocooonにたどり着き、引っ越ししやすいように便利だったものを加えていくうちにどんどん増えてしまってます。。。
追記：有料テーマは結構手を出しましたが、cocoonを知って「ここまでかゆいところに手がとどくテーマがったのか。しかも無料で」と驚きの毎日です。
トピックスターター 2020年1月30日 15:45
Misumiさんに
私なんてどこも商売してないですし、って意味でも、そうでなくっても ド素人ですよ。
子テーマのstyle.cssへのcssの追加が1000行を超えてしまいそうな勢い（現在700行）なのですが、これってどれくらい良くないことなのでしょうか？
個人的には良くないこと。とは思ってませんで❦
っていうのも、CSSで装飾するのは、ある意味サイトの個性をだせる。って意味でもあるかもしれない。っておもってるんですね。
パッと見て、ココ前にも来たことがあるサイトだ！って思ってくれれば良いかな。っておもうので
デメリットがありそうで良くないって思うだろうなぁ。って人用に書いてみれば。
ampでエラーが出てSearchConsoleから凄い問題あるよ。って風に案内が来て、焦る。ってのがデメリットかも知れないです。
ampを最大限に利用したい人は50MBだったか？？それを超えればエラーが出ます。
といっても
ただこのエラーの意味を知ってみれば焦らなくっても大丈夫で
単にスマホ検索結果にAMP表示：Googleさんなどのキャッシュを使って爆速でサイト表示できないよ。でも、PCビューのように普通にサイトを表示できるんだけどね。→さらにGoogleスマホ検索結果の機能を最大限使えてないけど、ホントに大丈夫？？？
ってGoogleのSearchConsoleが伝えてくれてる感じなんです。
結構雑な説明ですけど、乱暴に言えば
って事で。それはスマホ検索での検索結果の表示※⚡マークがついてる もの
https://gyazo.com/4102b099ad14134f6a722e3a6b5b3fdf
のはスマホviewからの検索・Googleさんとか検索エンジンさんが、爆速で表示させるシステムを上手に使えてない状態だよ。っておしえてくれてるだけ。ちゃだけです
PCでアクセスして表示される速度に近い感じで出してくれるのは間違いないんです。って説明しすぎて、よりわかんなくなったかも知れませんが、そんな感じなので、放置でも問題ない。→爆速が欲しいなら多少なりとも気を使っても良いのかもしれないです？？？
って個人的に思います
わいひら reacted
2020年1月30日 16:11
@kautakkuさん
とてもご丁寧にありがとうございました。
自分なりのサイトデザイン像があって、配色とかボックスとかにこだわりがあり、気づいたら子テーマのstyle.cssが700行くらいになってて「まずいのかな」と思ってしまったのです。
今のところサチコちゃんから悪いメッセージは届いていないので、大丈夫そうってことで納得しました。
トピックスターター 2020年1月30日 16:21
良かったです＾＾
ちなみに私。
サチコにダメじゃん。っていわれて、OK！了解 ?
ampとして高速表示しないって事、お知らせとして教えてくれてありがとう！
でも放置しておくね ?
って状態です。ちなみに2000行はないですけど
皆さん気にされているので、私もチェックしたんですが、ブログカード・商品リンクを置くとアウトになりやすいかもしれないです。多分…
私の場合、手を加えなくてもアウトなくらいの容量です。※CSSを全コピーして、文字数をチェックしたら何バイトか分かりやすいですよ。
※検索キーワード例：文字数カウント
2020年1月30日 17:12
って状態です。ちなみに2000行はないですけど
皆さん気にされているので、私もチェックしたんですが、ブログカード・商品リンクを置くとアウトになりやすいかもしれないです。多分…
2000行と聞いて勇気をいただきました＾＾
こういう情報って本当に貴重でとても助かります。
ブログカードは引っ越しでいつも失敗してて、できれば自作のがいいのですがCSSが重くなりでそれで気になって質問してみたのです。
Cocoonのブロクカードはとても使いやすいのでこのまま使うか、前からのを使うかで悩ましいところです。
文字数もカウントしてみますね♪
2020年1月30日 19:41
もしわいひらさんがもし気になれば。って事と、自分は使ってない機能ですが、見栄えがちょっと気になったんで、報告だけしておきますね。
ありがとうございます。
不要な部分は削除し、機能により表示に違和感が出る部分は、修正してみました。
トータルでちょっとサイズがマイナスになった。
https://github.com/yhira/cocoon/commit/c5bb361a1243e4548f4159b80c908da078c2e212#diff-da232d78aa810382f2dcdceae308ff8e
2020年1月30日 19:46
子テーマのstyle.cssへのcssの追加が1000行を超えてしまいそうな勢い（現在700行）なのですが、これってどれくらい良くないことなのでしょうか？
好みのCSSに変更して700行とかであっても全然問題ないと思います。
多少をCSSを書いたとしても、自分好みのサイトになったほうが利点は大きいと思いますし。
あえてCSSが多い場合の難点を書くとすれば、以下ぐらいでしょうか。
- AMP対応していた場合に、AMPのサイズ制限（50000バイト）を超える可能性が高くなる
- CSSが多ければ多いほどブラウザーの表示処理に時間がかかる
ただ、CSSが長いと表示処理に時間がかかるとは言っても、1000行くらいでは、誤差程度の時間差くらいしかないと思います。
2020年1月30日 20:09
@yhiraさん
お返事ありがとうございます。
そうなんですね。1000行で誤差程度というのは全然知らなくていつもビクビクしながらカスタマイズしておりました。
このアドバイスを受けて、しばらくカスタマイズ楽しんでみます＾＾
2020年1月30日 20:35
CSS描画時間を体感するとしたらこれかも。
以下は、CSSで描かれた絵画だけど、一般的な書き方で余計な改行を削除して4200行くらい（114KB）。
https://diana-adrianne.com/purecss-francine/
これだけ複雑なもの書くと、多少描画にタイムラグは発生するみたい。
一般的なCSSカスタマイズは、これよりも圧倒的に単純ですし、行数も少ないので、ここまで遅くはならないと思います。
2020年1月30日 21:03
@yhiraさん
事例をありがとうございます。多少遅い表示ですが、SEO的にはこれでも問題なさそうですね。
極端に表示が遅い場合以外はペナルティーはないみたいなので。
トピックスターター 2020年1月31日 08:09
もしわいひらさんがもし気になれば。って事と、自分は使ってない機能ですが、見栄えがちょっと気になったんで、報告だけしておきますね。
ありがとうございます。
不要な部分は削除し、機能により表示に違和感が出る部分は、修正してみました。
トータルでちょっとサイズがマイナスになった。
https://github.com/yhira/cocoon/commit/c5bb361a1243e4548f4159b80c908da078c2e212#diff-da232d78aa810382f2dcdceae308ff8e
この部分スマホビューのpadding-left、26pxを消すとpadding-leftが40pxになるんですね
スマホの入れ子状態にした場合が分かりやすいかも。
コンテンツが半分になるのが気になりませんか？？
右： 現最新版
真ん中：先行バージョン
左： カスタマイズ済み私の記事・見た目チェック用
真ん中の画像が、今回適用されたリストのstyleです。
おまけ、私の記事の
https://gyazo.com/13ed14c98b00ed970e67c28fc1867c00
.article ul, .article ol {padding-left: 26px;}これを削除した状態padding-left: 40px;イメージです。
2つの入れ子でも26px以上って個人的には微妙かも？？
あと
- 表示しない
class属性：toc tnt-nonehttps://gyazo.com/61cb6dd7da8aa4a2e27419419e682a01
- 数字詳細（ex: 1.1.1
class属性：toc tnt-number-detailhttps://gyazo.com/71f505ec2263f7c13b9e549f91f924c2
div.tnt-number-detail ol {
padding-left: 0;
} /*試しに親テーマstyleの全クエリ欄に適用*/
/* toc no.none detail */
.tnt-none,
div.tnt-none ul,
.tnt-number-detail,
div.tnt-number-detail ol {
padding-left: 1em;
}
これ。CSSがすごく増えたように思いますけど（実際増えてる＾＾；）、ただ
目次デフォルト toc に対しては何も触ってない状況で。
tnt-none tnt-number-detailの需要が分からないので、デフォルト以外の『表示しない」数字詳細に関しては、styleを増やした感じです＾＾；
ちなみに何が正解か。どれが好み。など、それぞれなので不明ってのが前提で、わいひらさんならどう思うかなぁって思います。
それと最終的には右へならう方向です❦
トピックスターター 2020年1月31日 08:11
目次は個人的にも完璧だ！って思います＾＾
2020年1月31日 19:18
僕の環境だとそうはなっていないんですけどね。
2020年1月31日 19:21
ただ、目次ナンバーの表示が「数字（デフォルト）」のとき余白が少ない不具合があったので2.0.7.3で修正しました。
トピックスターター 2020年1月31日 19:42
僕の環境だとそうはなっていないんですけどね。
目次でしたら、そのようにキレイな状態だと思います。
この部分スマホビューのpadding-left、26pxを消すとpadding-leftが40pxになるんですね
.article ul,
.article ol
この指定を変更されたようで、スマホビューの記事内リストが以前と違ってる感じだと思います。
https://wp-cocoon.com/layout/#toc7
この記事の見出しが参考リンクに良いカモです。※320px～あたりの横幅
わいひら reacted
トピックスターター 2020年1月31日 19:57
それから
https://github.com/yhira/cocoon/commit/fb5c49b696c0a1f565f1ce355f25efd75635dca4
更新されたってことでしたね。
また私もチェックしてみますね。
ご対応ありがとうございます ? ? ?
わいひら reacted
トピックスターター 2020年2月1日 08:29
2個上の書き込み/#post-27328記事内リストのスマホビューなどのスタイルが気になりますけど、それ以外は良い感じだと思います。個人的に
※2.0.7.3での確認。
わいひら reacted
2020年2月1日 14:46
なるほどそっちか ?
そっちの方は完全にノーマークでした^^;
取り急ぎ最新版で修正しておきました。
https://github.com/yhira/cocoon/commit/dde869326174db43e19e315c1bdc8b5a663f4b51#diff-da232d78aa810382f2dcdceae308ff8e
多分これで大丈夫ではないかなと。
かうたっく reacted
トピックスターター 2020年2月1日 15:36
今最新先行バージョンにアップロードして確認しました。
記事内リスト：以前の通りで影響ない❦
Cocoon設定・目次・目次ナンバーの表示 の以下3点をチェック
表示しない
数字（デフォルト）
数字詳細
良い感じだと個人的に思いました。見落としあればスミマセン
※チェック事項は目次のpadding-left・入れ子になったリストも、デフォルトと同じ状況でキレイでだった。という点。大丈夫だと思われます
書き込みが少ない時に。って思ってたけど
現状すごく多い気がします。
多忙・書き込みが多い中になりましたが、ご対応ありがとうございました！！
大変だ＾＾；
それからおつかれさまでした❦
※2.0.7.5での確認。
この投稿は5年前ずつかうたっくに変更されました
わいひら reacted
2020年2月1日 20:49
ご確認ありがとうございます！
CSSセレクタの優先度あたりが、かなりややこしかったので、うまく修正されていたようでよかったです^^
2020年2月1日 20:54
なにやら楽しそうなトピックを見つけました…！
子テーマのCSS追加の話が出てましたが、自分はもう3000行を越えてます。笑
こんなにカスタマイズが楽しいテーマは絶対に他にないと思ってます。もとがシンプルな上に、カスタマイズするときのことが色んな側面から考えられていて本当に感動します。
しかもCSS以外にも多数のオリジナルフックなど…
これからもずっとよろしくお願いします！
わいひら reacted
2020年2月1日 21:53
子テーマのCSS追加の話が出てましたが、自分はもう3000行を越えてます。笑
頼もしいです！
私は700行超えてチキってしまってました(汗
2020年2月1日 22:37
僕の作ったCOLORSスキンの行数を見たら、240行程度でした。
そう思うと、3000行はかなり多いですね。
こんなにカスタマイズが楽しいテーマは絶対に他にないと思ってます。
デフォルトでは、なるべく打ち消しにくいスタイルは使用しないようにして、一意となるようなクラス名をなるべくつけるようにしたり、カスタマイズのしやすさをかなり考えて作っているつもりだったので、そう言っていただけるのはほんと嬉しいです。
トピックスターター 2020年2月1日 23:35
3000行
ココのカスタマイズは凝ってみたんだよね。ってところがあったら、教えてくださぁい
どこに凝ったんだろ。ってちょっと気になります＾＾
2020年2月2日 17:47
本人じゃないけど僕は、このボタンのギミックが好き ?
トピックスターター 2020年2月2日 20:30
その画像のシェア数とかかわいい＾＾
ってか、こんな感じにこんなデザインとかかわいい。素敵・シンプルで良い。みたいなトピックが立つと
これからスキンを作る人とか、デザインの需要的にも参考になるかも＾＾
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。