「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

スマホ表示のみタイトルの文字を小さくさ...
 
共有:
通知
すべてクリア

[解決済] スマホ表示のみタイトルの文字を小さくさせたいのと、位置を変更したい。

10 投稿
3 ユーザー
10 Reactions
165 表示
(@aoinyan)
Trusted Member Registered
結合: 10か月前
投稿: 31
Topic starter  

最近、追加CSSを開発者ツールで見れるようになったばかりで不慣れです。
ご教授いただきたいので、よろしくお願いいたします。

スマホ表示のみタイトルの文字を小さくさせたいです。
文字を小さくするCSSは、以下のもので試しましたが、「何かうまくいかなかったようです。時間を置いてもう一度お試しください。」という表示が出て公開ボタンも押せない状態です。

それと、文字の位置もスマホだけ移動させる方法と、タイトルの背景画像の表示位置もスマホだけ移動させる方法を知りたいです。

@media screen and (max-width: 480px) {
.c-postTitle
   font-size: 8px;
}
}

サイト↓
おむすびプロジェクト | むすび (kmsb.jp)

 

 

最後なんですが、タイトルの背景画像の大きさは、1920×1280なんですが、上を少し切り取っても、パソコン表示の下が画像ギリギリまで表示されません。画像を画面いっぱいに表示させるには、どこを調整するばよいでしょうか?

よろしくお願いいたします。

This topic was modified 1か月前 3回 by aoinyan

   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16655
 

投稿者:: @aoinyan

@media screen and (max-width: 480px) {
.c-postTitle
   font-size: 8px;
}
}

見た感じ以下の赤文字の括弧がないのではないでしょうか。

@media screen and (max-width: 480px) {
  .c-postTitle  {
    font-size: 8px;
  }
}

※現在リンク先のテーマがCocoon以外のものになっておりますので、詳しいことは分かりかねます。

This post was modified 1か月前 by わいひら

   
aoinyan reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16655
 

投稿者:: @aoinyan

最後なんですが、タイトルの背景画像の大きさは、1920×1280なんですが、上を少し切り取っても、パソコン表示の下が画像ギリギリまで表示されません。画像を画面いっぱいに表示させるには、どこを調整するばよいでしょうか?

冒頭の質問と内容が違うようです。
フォーラムの案内にありますように、できれば一つのトピックに一つの質問でお願い致します。
これに関しては恐れ入りますが、新しくトピックを立てて頂いてよろしいでしょうか。

1つのトピックにつき1つの質問を書き込んでください

これに関しても現在使用しているテーマ(SWELL)に関しての質問であれば、テーマのフォーラムに質問することをお勧めいたします。その方が確かかと思います。

This post was modified 1か月前 2回 by わいひら

   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2400
 

該当のページですが、SWELLを使われており。

以前の投稿もですが、こちらのフォーラムはCocoonに関しての質問です。

あくまで善意で回答しているだけです。
SWELLについては、SWELL公式フォーラムに質問願います。
また、ご自身でカスタマイズできない場合、有償にて依頼願います。


   
aoinyan reacted
(@aoinyan)
Trusted Member Registered
結合: 10か月前
投稿: 31
Topic starter  

@yhira   

ご教授ありがとうございます。
{ をつけ忘れているだけでした。修正してみます。
他のトピックはSWELLのフォーラムに質問してみます。

@chu-ya
ここのフォーラムの方が詳しく教えてくれるので、ついつい使用してしまいます。
すみません、SWELLで質問してみます。

お二方、ありがとうございました。

This post was modified 1か月前 by aoinyan

   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2400
 

@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;
  }
}

   
わいひら and aoinyan reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2400
 

もう少しスッキリさせるなら、以下のように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);
}

   
わいひら and aoinyan reacted
(@aoinyan)
Trusted Member Registered
結合: 10か月前
投稿: 31
Topic starter  

ご教授いただき、ありがとうございます!!
すごく助かりました!!🙏
これでできなかったら、業者に頼もうかと思っていました。

おっしゃる通り、CSSの基本ができていないのと、CSSをチェックするものがあることも知りませんでした。ネットで検索したものを参考に追加していたのですが、基本から勉強し直そうと思います。
親と子についてわかっていないとダメだなと思いつつも、やはり表面的な処理しかできていませんでした。

載せていただいたCSSを追加し、微調整が終わりました。
CSSチェックもしてみましたが、見方もわからないので確認してみます。

●カテゴリーページ(むすびができること)だけ、他のページとタイトルの位置が少しずれるようだったので、「position: relative;」で微調整しました。

●タイトル位置に「right」を追加して、左にもう少し移動させました。

●タイトルエリアで、PCとタブレットでもウィンドウいっぱいに表示されるように微調整しました。


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2400
 

CSSにエラーがあります。

投稿者:: @aoinyan

●カテゴリーページ(むすびができること)だけ、他のページとタイトルの位置が少しずれるようだったので、「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;
  }
}

   
わいひら and aoinyan reacted
(@aoinyan)
Trusted Member Registered
結合: 10か月前
投稿: 31
Topic starter  

すみません、再びチェックと、メディアクエリもひとまとめの仕方を教えていただき、本当にありがとうございます🙏

カテゴリーページもpositionを使わずに、paddingで調整してみます。

ありがとうございました🙏


   
わいひら reacted
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました