サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2019年9月30日 16:15
メディアクエリを使って、フォントの大きさを横幅ごとに変えたいのですが、上手く適用されないので、ご教授願えればと思います。
☆現状☆
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1240px以下*/
@media screen and (max-width: 1240px){
/*必要ならばここにコードを書く*/
.article h5 {
color: #745c51;
line-height: 1.5;
margin: 0 0 0.5em 0;
font-weight: 600;
font-size: 36px;
text-decoration-line: underline;
}
}
/*1030px以下*/
@media screen and (max-width: 1030px){
/*必要ならばここにコードを書く*/
/*768px以下*/
@media screen and (max-width: 768px){
/*必要ならばここにコードを書く*/
.article h5 {
color: #745c51;
line-height: 1.5;
margin: 0 0 0.5em 0;
font-weight: 600;
font-size: 24px;
text-decoration-line: underline;
}
}
/*480px以下*/
@media screen and (max-width: 480px){
/*必要ならばここにコードを書く*/
}
上記のメディアクエリを設定して、下記のコードを書いたのですが、15インチのマックでもフォントのサイズが24pxで表示されてしまいます。
<h5><a href="http://comip.online/?page_id=66">【第１話】人生変える、もう一つの渋谷！</a></h5>
【該当ページ】
http://comip.online/
【問題点】
当方15インチのマックを使っているのですが、サイトを表示すると、テキストの大きさが24pxになってしまいます。どうすれば768px以上で、36pxにすることが出来ますでしょうか？よろしくお願いします。
2019年9月30日 18:11
申しわけないのですが、サポート対象外のものにもあるように、独自カスタマイズの不具合対応はサポートの対象外とさせていただいています。
自前で行ったカスタマイズがうまく動作しない場合は、出来れば自前で解決していただくか、以下のようなプロの方にご依頼ください
https://wp-cocoon.com/cocoon-custom/
CSSのちょっとした修正であれば、500円～対応されています。
2019年9月30日 23:18
対象外のところ。ですが、昨日は時間と戦ってたので、さっき確認してしまった＾＾；
普通に/*1240px以下*/など、幅の狭い時用のスタイルしか書いてないです。
メディアクエリ以外の場所に
.article h5 {
color: #745c51;
line-height: 1.5;
margin: 0 0 0.5em 0;
font-weight: 600;
font-size: 24px;
text-decoration-line: underline;
}
このコードを入れて、メディアクエリでfontサイズだけ変更すれば良いと思います。
他は
※【第２話】などのタイトルでも、上の条件で【第１話】と異なるリンクをつけられるようにしたいと思っております。
<h5><strong><span style="font-size: 36px;"><a href="http://comip.online/?page_id=66">【第１話】人生変える、もう一つの渋谷！</a></span></strong></h5>
現状、上のようなHTMLタグを使っているのですが、フォントサイズが36pxでリンク付きのテキストが優先され、/*768px以下*/でもフォントサイズが36pxでリンク付きのテキストになってしまいます。
どうすれば、/*768px以下*/で22pxのリンク付きテキストになりますか？<h5><strong><span style="font-size: 36px;"><a href="http://comip.online/?page_id=66">【第１話】人生変える、もう一つの渋谷！</a></span></strong></h5>
赤字のぶぶんを消してください。
そこはHTMLで指定してるので優先順位が猛烈に高くなります。CSSでそれ以上優先順位を高くする事も可能です。
でもAMPで表示した時に、その状態のCSSは無視されるので。
見出しの赤部分は削除してく感じで。
あと
font-size: 36px;
text-decoration-line: underline;
}
}/*1030px以下*/
@media screen and (max-width: 1030px){
/*必要ならばここにコードを書く*//*768px以下*/
@media screen and (max-width: 768px){
/*必要ならばここにコードを書く*/
.article h5 {
color: #745c51;
上記部分、編集時に閉じカッコ、以下赤字部分}を消してしまってます。
/*1030px以下*/
@media screen and (max-width: 1030px){
/*必要ならばここにコードを書く*/
}/*768px以下*/
不具合の元になりますよ❦
追記
https://gyazo.com/60e5ca86a23d3435801c5d73a65c888a
メディアクエリでテキストにリンクをつける方法を教えてください。7時間 前: leonal
ココを先にクリックしてしまって、サイトを確認した感じでした
This post was modified 5年前 by かうたっく
わいひら reacted
Topic starter
2019年10月1日 04:00
お手数お掛けしましたが、ついに上手く行きました。
.article h5 {
color: #745c51;
line-height: 1.5;
margin: 0 0 0.5em 0;
font-weight: 600;
font-size: 36px;
text-decoration-line: underline;
}
}
こちらをメディアクエリ以外のstyle.cssに貼り付けることで上手く行きました。
本当にありがとうございました。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。