サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018年9月27日 17:20
いつも大変お世話になっております。
ブログカード内の本文抜粋などは
「notice.php」を修正して無くしたのですが
そうすると、PCで見たときにブログカード内に余白が多く出来てしまい、タイトルの文字が小さく感じてしまいます。
そのため、cssでタイトル文字の大きさを
変更すると今度はスマホで見たときに
かなり大きくなってしまいます。
PCとスマホで見たときに、文字大きさを
それぞれ変えれるのが一番早いのですが、
notice.phpの修正で以下の対応は可能なのでしょうか？
PCから見たらタイトルのcssはAを読み、
スマホから見たらタイトルのcssはBを読み込むといった感じです。
分かりにくいかも知れませんが、よろしくお願いします。
2018年9月27日 18:24
ブログカードとtmp/notice.phpテンプレートは、全く関係ないので、ちょっとどういったカスタマイズなのかが全然想像がつかないです。
どういう状態かわからないので、出来ればURLを貼り付けていただいてよろしいでしょうか。
ブログカードの文字サイズを、変更するのであれば、CSSだけでできるかと思います。
Topic starter
2018年9月27日 18:51
すみません！
notice.phpではなく、内部リンクの
構成を変更できる「blogcard-in.php」でした。
タイトルの文字サイズの変更は
blogcard-titleのcssを変更すれば良いのですが
その部分を、PCで見たときのcssと
スマホで見たときのcssを別に指定したいということです。
2018年9月27日 20:27
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などを使うなどですかね
わいひら reacted
Topic starter
2018年9月27日 20:39
かうたっく様
なるほど、子テーマのその部分を使うのですね！
ありがとうございます！やってみます。
2018年9月28日 00:35
タイトルのみ表示するのであれば、テンプレートファイルをカスタマイズする必要なく、CSSでスニペット部分を非表示（display:none;）にしたほうが、後々の手間が省けるような気もします。
Topic starter
2018年9月28日 01:21
わいひら様
ご返信ありがとうございます。
スニペット部分はCSSで非表示にしていますが、
今回やりたい事としては、ブログカードのタイトル文字が
スマホとPCで共通のCSSを見ているので、スマホに合わせて文字の大きさを調整すると、PCで見た時に小さく感じてしまいます。
これを避けるために、スマホで見る時は今まで通りで
PCで見た時だけブログカード内のタイトルの文字の大きさを
変更したいという事となります。
かうたっく様にご指摘いただいた点を少し弄っているのですが
中々うまく行かずでして・・・・
分かりにくければ一旦諦めますが、添付のような形で現状それぞれ見えています。
2018年9月28日 01:35
スニペット部分は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;
}
}
文字サイズは、好みに合わせて変更してください。
※上記のコードは内部・外部双方のブログカードに適用されます。
Topic starter
2018年9月29日 01:24
わいひら様
有難うございました。
アドバイス頂いたものを参考に色々調整したところ、無事変更する事が出来ました！
あと一点、すみません。
同じブログカード内にあるタイトルの横に「関連記事」という言葉を入れたくて親テーマの「blogcard-in.php」を子テーマにコピーし、子テーマ側の「blogcard-in.php」を修正しても、反映されないのですが方法が間違ってますでしょうか？
親テーマの「blogcard-in.php」を修正してしまうと
テーマアップデートの度に修正する必要があるので、子テーマ側にも同様のファイルを置けば良いのかと思ってましたが、今回のケースだと親テーマ側を変更しないと反映されませんでしょうか？
2018年9月29日 17:33
CSSでいけますが、一度お試しください。
.blogcard-title:before {
content: "関連記事";
}
これだとstyle.cssで追記でOKです。
AMPにも。と言うことでしたら、amp.cssに追記すれば反映されると思われます。
反映されなければ、プラグイン・サーバーなどのキャッシュを削除。Cocoon設定のキャッシュ内、ブラウザのキャッシュを削除・それでもダメなら、ampキャッシュ削除を行ってください。
※どこで反映されるか試したことはありません❦
2020年4月4日 20:45
「ブログカード内の文字大きさをPCとスマホで別にしたい②」というタイトルつけてトピックを立てたfuku-chanさんへ
wpForoの仕様なのか、不具合なのか、それとも何かしらのWordPressの問題なのか、同じタイトルだとURLのスラッグが「ブログカード内の文字大きさをpcとスマホで別にし」と同じになるので、過去のトピックが開かれてしまうようです。
「②ブログカード内の文字大きさをPCとスマホで別にしたい」というタイトルにして、もう一度トピックを立てていただいてよろしいでしょうか。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。