2019年12月27日TwitterFacebookB!HatenaPocketLINELINERSSCopy私はWordPressテーマ『Luxeritas(ルクセリタス)』を使っています。使いはじめた頃からスマホで記事を表示させたときの記事タイトルと見出しの文字の大きさが気になっていました。PCなどの大きな画面で表示された記事タイトル、見出しの大きさは問題ないのですが、スマホなどの小さい画面で表示すると小さい(^^;私的にはもう少し大きくしてメリハリを付けてもっとわかりやすくしたいところです。スマホで表示したとき文字が小さくなるのかは私がまだまだ勉強不足なのでわかりませんが...スマホ表示用にCSSを追加して、PCなどの大きな画面用とスマホなどの小さな画面用の文字サイズを分けることにしました。こちらの設定は大きな画面用として使います。※見出しデザインのカスタマイズについてはこちらの記事を参考にしてください。『記事タイトル』のクラス名について説明を追記しました。...https://kirari-yums.net/2019/03/31/post-7442/スポンサーリンクメディアクエリを使ってスマホ用の文字サイズを設定ではスマホ用の文字サイズを設定します。※ここではスマホ(小さい画面)で表示する場合の時文字サイズを設定していきます。見出しデザインが設定されていればデザインはそのまま反映されます。メディアクエリとはメディアクエリとは、簡単にいえば画面の環境などに合わせてCSSを設定できるものです。「画面の横幅がこれ以上ならこのように表示する」とか「画面の横幅がこれ以下ならこのように表示させる」という設定ができるのです。?よくわからない(^^;結耶だよねwとりあえず今回でいえば大きい画面と小さい画面で表示を変えられるってことだよ!私の説明が下手なので分かりづらいかもしれませんが、とりあえずメディアクエリを使ってスマホ用の文字サイズを設定してみたいと思います。スマホ用の文字サイズの設定まずは記事タイトルの文字サイズを設定していきます。(max-width:540px)部分は画面サイズ(横幅)が540px以下の場合適用という意味です。付けてその中にCSSを記述していきます。※3行目「.entry-title」はLuxeritasで指定されている記事タイトルのクラス名です。※4行目「font-size」がスマホ用の文字サイズです。画面サイズが540px以下なら適用されるようにしたからそういうことだね。記事タイトルと同じようにh2とh3の見出しの文字サイズも設定します。/*文字サイズ*/}}これでスマホ用の記事タイトルと見出しの文字サイズの設定が完了です。文字サイズは結耶の好みなので、ご自分のサイトに合わせて変更してくださいね。注意!ここで紹介したコードはWordPressテーマ「Luxeritas(ルクセリタス)」の場合のものです。メディアクエリはLuxeritas以外のテーマやWordPress以外のWebサイトなどでも使えます。Luxeritas以外のテーマやWordPress以外のWebサイトで使用する場合は「クラス名」などを確認してください。お使いのブログサービスなどによっては適用されないこともあります。(max-width:540px)」でmax-widthを使用しています。(min-width:540px)とmin-widthにすると...画面の横幅が540px以上で適用と言う意味になります。RinkerAmazon楽天市場Yahooショッピング最後にきらりメディアクエリを使うとPC用とスマホ用にデザインが変えられる?結耶そういうことになるね。私は文字サイズを変えたかったから文字サイズしか指定してないけど...いろいろ設定すればデザインも変えられるよ。今回はLuxeritasの場合で説明しましたが、その他のテーマでも「スマホで記事を表示すると記事タイトルがデカい!」なんて声も聞きます。いう場合はメディアクエリを使ってスマホ用のCSSを設定してみてください。スポンサーリンク応援よろしくお願いします。結耶(ゆうや)2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!多発性硬化症(MS)という難病と闘っています。Luxeritas(ルクセリタス)のアップデートする方法テーマを変えてから半年。サブタイトル付き』を追加しました。「目次を非表示にする方法」を追記しました。...CSSを使って囲み枠を作ってみよう!今回は「CSSを使ってノックス(囲み枠)」を作ってみようと思います。コメントをキャンセルメールアドレスが公開されることはありません。メールアドレスは任意です。メールアドレスを入力すると返信があったことをお知らせする通知がメールで届きます。コメント名前メールアドレスウェブサイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。プロフィールこんにちは。2017年9月からブログとアフィリエイトをはじめました。多発性硬化症という難病と闘いながら、ブログやアフィリエイトの勉強をしています。初心者ですが、ブログ(WordPress)やアフィリエイトについて書いています。★応援お願いします★こちらもよろしくお願いします。...【WordPress】カテゴリーウィジェットのデザインをカスタマイズしてみた!WordPressのカテゴリーウィジェットってシンプルですよね。8メールで購読メールアドレスを記入して購読すれば、更新をメールで受信できます。yuu_ms715★フォローお願いします。ブログとTwitterを連携して更新情報をツイートしています。よかったらフォローお願いします。