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

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カスタマイズ依頼

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

ブログカード内の文字大きさをPCとスマ...
 
共有:
通知
すべてクリア

[解決済] ブログカード内の文字大きさをPCとスマホで別にしたい

13 投稿
3 ユーザー
2 Likes
5,128 表示
(@ユウ)
Active Member
結合: 6年前
投稿: 14
Topic starter  

いつも大変お世話になっております。

 

ブログカード内の本文抜粋などは

「notice.php」を修正して無くしたのですが

そうすると、PCで見たときにブログカード内に余白が多く出来てしまい、タイトルの文字が小さく感じてしまいます。

 

そのため、cssでタイトル文字の大きさを

変更すると今度はスマホで見たときに

かなり大きくなってしまいます。

 

PCとスマホで見たときに、文字大きさを

それぞれ変えれるのが一番早いのですが、

notice.phpの修正で以下の対応は可能なのでしょうか?

 

PCから見たらタイトルのcssはAを読み、

スマホから見たらタイトルのcssはBを読み込むといった感じです。

 

分かりにくいかも知れませんが、よろしくお願いします。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16484
 

ブログカードとtmp/notice.phpテンプレートは、全く関係ないので、ちょっとどういったカスタマイズなのかが全然想像がつかないです。

どういう状態かわからないので、出来ればURLを貼り付けていただいてよろしいでしょうか。

ブログカードの文字サイズを、変更するのであれば、CSSだけでできるかと思います。


   
(@ユウ)
Active Member
結合: 6年前
投稿: 14
Topic starter  

すみません!

notice.phpではなく、内部リンクの

構成を変更できる「blogcard-in.php」でした。

タイトルの文字サイズの変更は

blogcard-titleのcssを変更すれば良いのですが

その部分を、PCで見たときのcssと

スマホで見たときのcssを別に指定したいということです。

 

 


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

PCから見たらタイトルのcssはAを読み、

スマホから見たらタイトルのcssはBを読み込むといった感じです。

CSSで修正したいという意味でしょうか?

その場合、メディアクエリを使えば行けるので、子テーマCSSにある以下の中にスタイルを入れれば良いと思います。

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
  /*必要ならばここにコードを書く*/
}

/*1030px以下*/
@media screen and (max-width: 1030px){
  /*必要ならばここにコードを書く*/
}

/*768px以下*/
@media screen and (max-width: 768px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}

または

@media screen and (min-width: 1031px){
  /*この下にstyle*/
.hoge{hoge: hogehoge;}
}

1031pxよりおおきなサイズで反映

PHPの場合、wp is mobileなどを使うなどですかね

https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/wp_is_mobile


   
わいひら reacted
(@ユウ)
Active Member
結合: 6年前
投稿: 14
Topic starter  

かうたっく様

なるほど、子テーマのその部分を使うのですね!

ありがとうございます!やってみます。

 

 

 

 

 


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16484
 

タイトルのみ表示するのであれば、テンプレートファイルをカスタマイズする必要なく、CSSでスニペット部分を非表示(display:none;)にしたほうが、後々の手間が省けるような気もします。


   
(@ユウ)
Active Member
結合: 6年前
投稿: 14
Topic starter  

わいひら様

ご返信ありがとうございます。

スニペット部分はCSSで非表示にしていますが、

今回やりたい事としては、ブログカードのタイトル文字が

スマホとPCで共通のCSSを見ているので、スマホに合わせて文字の大きさを調整すると、PCで見た時に小さく感じてしまいます。

これを避けるために、スマホで見る時は今まで通りで

PCで見た時だけブログカード内のタイトルの文字の大きさを

変更したいという事となります。

 

かうたっく様にご指摘いただいた点を少し弄っているのですが

中々うまく行かずでして・・・・

分かりにくければ一旦諦めますが、添付のような形で現状それぞれ見えています。


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16484
 

スニペット部分はCSSで非表示にしていますが、

そしたら、blogcard-in.phpのカスタマイズは必要ないのではないでしょうか。

やはり、実物、もしくは「キャプチャ&注釈」があると分かりやすいです。

以下のコードを子テーマのstyle.cssに貼り付けると多分いけるかと思います。

/*PC*/
.blogcard-title {
    font-size: 30px;
}
/*一応余計なものも削除*/
.blogcard-snipet,
.blogcard-footer{
  display: none;
}

/*768px以下*/
@media screen and (max-width: 768px){
  .blogcard-title {
    font-size: 20px;
  }
} 

文字サイズは、好みに合わせて変更してください。

※上記のコードは内部・外部双方のブログカードに適用されます。


   
(@ユウ)
Active Member
結合: 6年前
投稿: 14
Topic starter  

わいひら様

有難うございました。

アドバイス頂いたものを参考に色々調整したところ、無事変更する事が出来ました!

 

あと一点、すみません。

同じブログカード内にあるタイトルの横に「関連記事」という言葉を入れたくて親テーマの「blogcard-in.php」を子テーマにコピーし、子テーマ側の「blogcard-in.php」を修正しても、反映されないのですが方法が間違ってますでしょうか?

親テーマの「blogcard-in.php」を修正してしまうと

テーマアップデートの度に修正する必要があるので、子テーマ側にも同様のファイルを置けば良いのかと思ってましたが、今回のケースだと親テーマ側を変更しないと反映されませんでしょうか?


   
かうたっく
(@kautakku)
Famed Member Moderator
結合: 6年前
投稿: 4764
 

CSSでいけますが、一度お試しください。

.blogcard-title:before {
	content: "関連記事";
}

これだとstyle.cssで追記でOKです。

AMPにも。と言うことでしたら、amp.cssに追記すれば反映されると思われます。

反映されなければ、プラグイン・サーバーなどのキャッシュを削除。Cocoon設定のキャッシュ内、ブラウザのキャッシュを削除・それでもダメなら、ampキャッシュ削除を行ってください。

※どこで反映されるか試したことはありません❦


   
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16484
 

それもCSSのみで実装可能です。

詳しくはこちら。
【Cocoon】ブログカードに「続きを読む」を入れてクリック率上げよう大作戦!


   
(@ユウ)
Active Member
結合: 6年前
投稿: 14
Topic starter  

わいひら様

おおお、有難うございます!

これでやりたい事が出来そうです!

 

助かりました!


   
わいひら reacted
わいひら
(@yhira)
Illustrious Member Admin
結合: 6年前
投稿: 16484
 

「ブログカード内の文字大きさをPCとスマホで別にしたい②」というタイトルつけてトピックを立てたfuku-chanさんへ

wpForoの仕様なのか、不具合なのか、それとも何かしらのWordPressの問題なのか、同じタイトルだとURLのスラッグが「ブログカード内の文字大きさをpcとスマホで別にし」と同じになるので、過去のトピックが開かれてしまうようです。

「②ブログカード内の文字大きさをPCとスマホで別にしたい」というタイトルにして、もう一度トピックを立てていただいてよろしいでしょうか。


   
共有:

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

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

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

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

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

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

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

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