サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2024年5月14日 07:34
最近、追加CSSを開発者ツールで見れるようになったばかりで不慣れです。
ご教授いただきたいので、よろしくお願いいたします。
スマホ表示のみタイトルの文字を小さくさせたいです。
文字を小さくするCSSは、以下のもので試しましたが、「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」という表示が出て公開ボタンも押せない状態です。
それと、文字の位置もスマホだけ移動させる方法と、タイトルの背景画像の表示位置もスマホだけ移動させる方法を知りたいです。
@media screen and (max-width: 480px) {
.c-postTitle
font-size: 8px;
}
}
サイト↓
おむすびプロジェクト | むすび (kmsb.jp)
最後なんですが、タイトルの背景画像の大きさは、1920×1280なんですが、上を少し切り取っても、パソコン表示の下が画像ギリギリまで表示されません。画像を画面いっぱいに表示させるには、どこを調整するばよいでしょうか?
よろしくお願いいたします。
This topic was modified 4か月前 3回 by aoinyan
2024年5月14日 19:27
最後なんですが、タイトルの背景画像の大きさは、1920×1280なんですが、上を少し切り取っても、パソコン表示の下が画像ギリギリまで表示されません。画像を画面いっぱいに表示させるには、どこを調整するばよいでしょうか?
冒頭の質問と内容が違うようです。
フォーラムの案内にありますように、できれば一つのトピックに一つの質問でお願い致します。
これに関しては恐れ入りますが、新しくトピックを立てて頂いてよろしいでしょうか。
1つのトピックにつき1つの質問を書き込んでください
これに関しても現在使用しているテーマ(SWELL)に関しての質問であれば、テーマのフォーラムに質問することをお勧めいたします。その方が確かかと思います。
This post was modified 4か月前 2回 by わいひら
2024年5月14日 20:12
該当のページですが、SWELLを使われており。
以前の投稿もですが、こちらのフォーラムはCocoonに関しての質問です。
あくまで善意で回答しているだけです。
SWELLについては、SWELL公式フォーラムに質問願います。
また、ご自身でカスタマイズできない場合、有償にて依頼願います。
aoinyan reacted
2024年5月16日 02:32
@aoinyan さん
●注意
カスタマイズする以前に、CSSの知識が足りないです。
CSSを理解した上でカスタマイズするか、既存のSWELLの設定で、済ませるべきだと、私は思います。
SWELLフォーラム見ましたが、誰も回答しないと思います。
質問する前に、CSSをチェックに掛け、エラーは取りましょう。
https://jigsaw.w3.org/css-validator/
●原因
以前のCSSですが、コメントを//とし間違えており、それで一部反映されておらず。
タイトル位置の変更で、c-postTitleを移動させている。
本来、親のl-topTitleArea__bodyを移動させるべき。
孫のc-postTitle__ttlの幅を変えても、親自体の幅は変わらないので、折り返され。
●ご参考
私は、SWELLを持ってはいません。
aoinyanさんページを、Chromeデベロッパーで調べた範囲でコードを書いてみました。
:root { --color_border--table: #999999; --color_border: #999999; } /* 見出し */ .post_content h2 { font-size: 1.4em; } /* タイトルエリアの要素中央→下配置 */ .l-topTitleArea { align-items: flex-end; min-height: 780px; } /* タイトル下から50px移動 */ .l-topTitleArea__body { bottom: 50px; } @media (width >=600px) { .c-pageTitle, .c-postTitle__ttl { font-size: 60px; } } @media (width < 600px) { .c-pageTitle, .c-postTitle__ttl { font-size: 30px; } }
2024年5月16日 02:46
もう少しスッキリさせるなら、以下のようにfont-sizeにclampを用い、フォントサイズを可変とする。
:root { --color_border--table: #999999; --color_border: #999999; } /* 見出し */ .post_content h2 { font-size: 1.4em; } /* タイトルエリアの要素中央→下配置 */ .l-topTitleArea { align-items: flex-end; min-height: 780px; } /* タイトル下から50px移動 */ .l-topTitleArea__body { bottom: 50px; } .c-pageTitle, .c-postTitle__ttl { font-size: clamp(30px,5vw,60px); }
Topic starter
2024年5月16日 06:40
ご教授いただき、ありがとうございます!!
すごく助かりました!!🙏
これでできなかったら、業者に頼もうかと思っていました。
おっしゃる通り、CSSの基本ができていないのと、CSSをチェックするものがあることも知りませんでした。ネットで検索したものを参考に追加していたのですが、基本から勉強し直そうと思います。
親と子についてわかっていないとダメだなと思いつつも、やはり表面的な処理しかできていませんでした。
載せていただいたCSSを追加し、微調整が終わりました。
CSSチェックもしてみましたが、見方もわからないので確認してみます。
●カテゴリーページ(むすびができること)だけ、他のページとタイトルの位置が少しずれるようだったので、「position: relative;」で微調整しました。
●タイトル位置に「right」を追加して、左にもう少し移動させました。
●タイトルエリアで、PCとタブレットでもウィンドウいっぱいに表示されるように微調整しました。
2024年5月16日 09:15
CSSにエラーがあります。
●カテゴリーページ(むすびができること)だけ、他のページとタイトルの位置が少しずれるようだったので、「position: relative;」で微調整しました。
●タイトル位置に「right」を追加して、左にもう少し移動させました。
SWELLは、l-topTitleArea__bodyにmax-width+paddingで左右位置を調整している。
この為、positionを使うべきではない、paddingで調整する。
メディアクエリは一纏めにする。
画面幅600px未満か否かで切り替わる為、600px未満のみだけ定義すればいい。
本件はSWELLなので、私は、これ以上回答しません。
:root { --color_border--table: #999999; --color_border: #999999; } /* 見出し */ .post_content h2 { font-size: 1.4em; } /* タイトルエリアの要素中央→下配置 */ .l-topTitleArea { align-items: flex-end; min-height: 810px; } /* タイトル下から50px移動 */ .l-topTitleArea__body { bottom: 50px; max-width: unset; } /* タイトル */ .c-pageTitle, .c-postTitle__ttl { font-size: 60px; } /* サブタイトル(カテゴリー) */ .c-pageTitle__subTitle { display: none; } @media (width < 600px) { .l-topTitleArea { min-height: 782px; } .l-topTitleArea__body { bottom: 30px; } .c-pageTitle, .c-postTitle__ttl { font-size: 30px; } }
Topic starter
2024年5月16日 09:30
すみません、再びチェックと、メディアクエリもひとまとめの仕方を教えていただき、本当にありがとうございます🙏
カテゴリーページもpositionを使わずに、paddingで調整してみます。
ありがとうございました🙏
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。