サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
CSSカスタマイズ相談
8
投稿
3
ユーザー
4
Reactions
4,686
表示
トピックスターター 2019年12月5日 19:43
お世話になります。ほぼ連投になってしまい申し訳ございません。
少し前に新着記事の2列にする方法についてご質問させていただきました。
ご指導の通り、新着記事については、
.page .new-entry-cards {
display: flex;
flex-wrap: wrap;
}
.page .new-entry-card-link {
width: 50%;
}
のコードをCSSで入力したのですが、人気記事のclass属性がpopular-entry-cardsになっていたため、
上記のコードのnew-entry-cardsをpopular-entry-cardsに変更してみましたが、うまくいきませんでした。
（cardsをcardに試しに変えてもダメでした）
ご指導いただけたら幸いです。
https://nekoshirube.com/neko-shiku-kaikata/
----------------------------------------------
サイト名：ねこしるべ
サイトURL： https://nekoshirube.com
ホームURL： https://nekoshirube.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
Wordpressバージョン：5.3
PHPバージョン：7.2.17
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.108 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：1.9.9.5.3
カテゴリ数：7
タグ数：22
ユーザー数：2
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.0.8
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Auto Post Thumbnail：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
WEBフォントLazy Load：0
JavaScript（フッター）：1
----------------------------------------------
利用中のプラグイン：
AddQuicktag 2.5.3
Akismet Anti-Spam 4.1.3
BackWPup 3.7.0
Category Order and Taxonomy Terms Order 1.5.7
Classic Editor 1.5
Contact Form 7 5.1.6
EWWW Image Optimizer 5.1.3
Google XML Sitemaps 4.1.0
Imsanity 2.4.3
Jetpack by WordPress.com 7.9.1
PS Auto Sitemap 1.1.9
Rinker 1.5.8
Rinker Fanbox用プラグイン 1.2.0
Shortcodes Ultimate 5.6.1
ShowID for Post/Page/Category/Tag/Comment 2.5
WP Edit 4.0.4
WP Multibyte Patch 2.8.3
WP Social Bookmarking Light 2.0.7
----------------------------------------------
このトピックは5年前 2回からsawashin1128に変更されました
2019年12月5日 22:09
カスタマイズコードはどのように書かれていますか？
出来ればCSSカスタマイズ用のコードは子テーマのstyle.cssに書いていただけると確認しやすいので助かります。
ここにはないようなので。
https://nekoshirube.com/wp-content/themes/cocoon-child-master/style.css
2019年12月6日 02:01
カスタマイズを行ったようですけど、
デフォルトでも、そのCSSは適応されているようですよ。
https://gyazo.com/f232b37ce67e442bcb4b86b8bf3e38d9
エックスサーバーのキャッシュか高速化などで、一時的にサーバーのキャッシュが残ってたのかもしれないですね？
現状はどのように表示されていますか？？？
カスタマイズコードはどのように書かれていますか？
たぶんWPのカスタマイザーのCSSだと思います。
出来ればCSSカスタマイズ用のコードは子テーマのstyle.cssに書いていただけると確認しやすいので助かります。
確かに！ホンこれ。状態かもです ?
でもユーザーさん的には、CocoonAMPを有効化している場合も
カスタマイザーに書いても問題ないよう対応される状況ですし、WordPress的に子テーマのカスタマイザーだったような。って事で、それもありなのかもしれません？ ? ? ?
わいひら reacted
2019年12月6日 02:06
少し前に新着記事の2列にする方法についてご質問させていただきました。
冒頭質問にある新着記事とは、正確に言えば
固定ページの記事内で使われているショートコードの新着記事の話で
以下URLがその時たてていただいたトピックです。
わいひら reacted
トピックスターター 2019年12月6日 11:55
わいひらさん、かうたっくさんありがとうございます。
"出来ればCSSカスタマイズ用のコードは子テーマのstyle.cssに書いていただけると確認しやすいので助かります。"
自分が無知で、style.cssにコードを書こうとしたときにテーマ編集でワードプレスがおかしくなってしまうのではないかと思い、カスタマイズのCSSでも書けますよという文字からそちらに全部書くようにしてしまいました。
人気記事は昨晩悩みながらなんとか出ましたので、よかったです。
とりあえずstyle.cssにコードを書き直そうと思います！
2019年12月6日 12:36
自分が無知で、style.cssにコードを書こうとしたときにテーマ編集でワードプレスがおかしくなってしまうのではないかと思い、カスタマイズのCSSでも書けますよという文字からそちらに全部書くようにしてしまいました。
たぶん、コレが原因なんだと思います。慣れてない。ってか、以下のような説明があればきっとそう、感じるかと思います。
https://gyazo.com/c2b800deb25d8ea73ab4f8b23b43ed9f
引用しようとおもったんですが。WordPressのその案内が、消えちゃった ? ? ?
? ? ?
WordPressの案内は正しいとおもいますけど、初めて見れば
これ、やっちゃだめかもしれない…
って思うかもしれないですね。
でも、うまくいったようで良かったです！
沢山調べて大変だったと思いますが、そのおかげで実装できたようで何よりです ?
お疲れさまでした！
わいひら reacted
2019年12月6日 19:53
自分が無知で、style.cssにコードを書こうとしたときにテーマ編集でワードプレスがおかしくなってしまうのではないかと思い、カスタマイズのCSSでも書けますよという文字からそちらに全部書くようにしてしまいました。
PHPを編集するならテーマ編集は結構ディスクですが、CSS編集であれば、「テーマ編集からのstyle.css編集」も「カスタマイザーのCSS編集」もそこまでリスクは変わらないと思います。
どちらで書いても、問題はないのですが、以下の点において、僕は子テーマのstyle.cssでの編集を推奨しています。
- WordPress管理画面のテーマ編集の方が大画面で見やすい
- 子テーマのstyle.cssに書くと第3者が外部からファイルを見てアドバイスしやすい（インラインだと探したりする必要があったり見づらかったりする）
- style.cssはファイルに保存できるので、やろうと思えばクライアントの使い慣れたエディターで編集することも可能（カスタマイザーもコピペすればできないこともないけど）
- ファイルなのでバックアップしやすい
トピックスターター 2019年12月7日 01:59
かうたっくさん、わいひらさん
ありがとうございます。
まだまだ色々カスタマイズしたいことはたくさんありましたが、基礎が足りないことを痛感しました。
それでもclassの連動や、子テーマのstyle.cssのことを少し理解できました。
本当にありがとうございます！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。