サイト内検索
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
2023年10月22日 15:24
コクーンの他に、SWELLのサイトも管理しています。
ここのフォーラムの方が活発なので、申し訳ないですが、お尋ねさせていただきました。
1番上のタイトルとフルワイドのタイトルの高さをそろえる追加CSSを知りたいです。
スマホでも同様にそろえたいです。
文字の高さもできればそろえたいのですが、どなたか教えていただけませんか?
追加CSSは、以下のものを貼り付けましたが、PCではそろっても、スマホでは1mmくらいずれています。
@media (min-width: 600px){
.l-topTitleArea {
min-height: 20.2em;
}
}
2023年10月22日 18:28
このフォーラムはCocoonテーマのフォーラムなのでSWELLテーマのことは分からないかもしれません。
ただCSSの問題であればデベロッパーツールを使えば状態は見れるので何かしらわかるのかもしれません。
1番上のタイトルとフルワイドのタイトルの高さをそろえる追加CSSを知りたいです。
スマホでも同様にそろえたいです。
文字の高さもできればそろえたいのですが、どなたか教えていただけませんか?追加CSSは、以下のものを貼り付けましたが、PCではそろっても、スマホでは1mmくらいずれています。
ただ「ずれている」というのは主観であって、上記のような簡単な説明では第三者がちょっと見ただけではどこがどうずれているのか分かりません。
できればパソコン画面とスマホ画面のスクリーンショットを撮影して、どこがどうずれているのか第三者にもわかるように注釈を入れてアップしていただければ幸いです。
aoinyan reacted
Topic starter
2023年10月22日 19:52
わいひらさん、ご返信ありがとうございます🙏
パソコンでは、以下のCSSで、タイトルとフルワイドのタイトルを同じ高さにできましたが、
スマホでは、数ミリ高さが違うので、それを修正したいのと、
パソコンでもスマホでも、字の高さも違うので、修正したいです。
ご教示よろしくお願いいたします🙏
@media (min-width: 600px){
.l-topTitleArea {
min-height: 20.2em;
}
}
This post was modified 11か月前 4回 by aoinyan
Topic starter
2023年10月24日 08:55
SWELLのフォーラムで、以下のCSSで調整をアドバイスしていただきましたが、
余白で高さを変更はできると思いました。
けれど、スマホで見ると、タイトルの背景画像の高さはやはり変更されず、スマホを横にした時には、
なおさら、タイトルの背景画像の高さが変わってしまうので、
タイトルは、1つだけにした方がよいと思い始めています😅
.post_content h2 { font-size: 1.2em; line-height: 1.4; margin: 4em 0 2em; position: relative; z-index: 1; } .c-postTitle__ttl { font-size: 5vw; line-height: 1.4; width: 100%; }
2023年10月24日 13:56
カスタマイズの単位がemであるのに対して、スクリーンショットの単位がmmということはパソコンとスマホそれぞれに物差しを当てて計っているということでしょうか?
2023年10月24日 19:21
それだったら以下のように単位をmmで設定してはどうでしょうか。
.l-topTitleArea { min-height: 24mm; }
一応、CSSで要素の高さを固定の物理単位(例えば、ミリメートル)で設定すると、その高さは理論上、異なるデバイス間で一致するように意図されています。しかし、実際の表示は、スクリーンの解像度、ピクセル密度(PPI)、そして他のディスプレイ設定や特性に依存するため、物理的な寸法が実際のデバイス間で異なることがあります。
例えば、スマートフォンとデスクトップモニターは異なる解像度とピクセル密度を持っています。DPI(dots per inch)やPPI(pixels per inch)が高いデバイスでは、物理的なサイズが小さくなる傾向があります。これは、同じピクセル数がより狭いエリアに「詰め込まれる」ためです。
さらに、多くの現代のブラウザやデバイスでは、ユーザーの視認性を向上させるために自動的にスケーリングすることがあります。これは、特に高解像度のデバイスでウェブコンテンツを読みやすくするために行われます。
したがって、理論的には24mmの高さを設定すれば異なるデバイスで同じ物理的高さになるはずですが、実際の表示はデバイスの特性やユーザー設定に大きく左右され、実際に物理的な寸法で測定した場合に同じにならないことが多いです。
今回の現象もこれと同様のことが起きているのではないかと思います。
Topic starter
2023年10月24日 21:33
わいひらさん、詳しくご教示ありがとうございます!!🙏✨
PCで設定したものが、スマホでは結構比率が違う感じになるのも、いろいろな要因があるのですね。
(コクーンのマニュアルもほとんど読ませていただき、細かいところを沢山学べました。
ありがとうございます🙏 あとは、コード、CSSあたりを少しずつ覚えていきたいと思っています。
まずは、簡単な追加CSSの仕組みから・・・)
ご教示いただいたものをさっそく、追加CSSに入れてみたのですが、パソコンでは25mm、スマホでは14mmの長さで、元のやつより高さが小さくなりました。(添付したもの)
試しに50mmで設定しましたが、なぜか高さが変更されません😅反映するのに時間がかかるのでしょうか・・・
教えていただいたものとは違う追加CSSで元々貼っていたものは、以下の通りです。
@media (min-width: 600px){
.l-topTitleArea {
min-height: 23em;
}
スマホの高さが上手くいかないのも、いろいろな要因が重なっているようなので、
パソコンの高さを基準に、色々高さを変えてみて、スマホでの高さの妥協点を決めたほうがよいかもなと思っています。
Topic starter
2023年10月25日 08:01
ご教示ありがとうございます!!🙏✨
スマホの高さを12emにしたところ、タイトル背景画像の高さが2.6mmに調整することができました!
emは、親要素に設定した数値に対して倍率のサイズ値なんですね。学べました。
タイトルの文字も影響して少し大きくなりましたので、少し数値を小さくしました。
お二方のご教示のおかげで、やっとパソコンとスマホの妥協点を定めることができました!
誠にありがとうございました!✨🙏✨
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。