wordpress blog header image

メディアクエリを使って記事タイトルをレスポンシブに対応させた

はじめに

現在、WordPressで使用しているテーマ(Twenty Fifteen) はレスポンシブに対応したテーマだが、テキストは対応していない。Twenty Fifteenのタイトル文字はフォントサイズが大きく、スマートフォンでは非常に見辛いので、タイトル文字を メディアクエリ を用いてレスポンシブに対応させることにした。

今回は、記事タイトルをレスポンシブに対応させる流れをまとめる。

style.css を編集する

現在設定しているテーマのstyle.cssを編集する(子テーマの使用を推奨)。

画面サイズに応じた処理は下記のように書くようだ。

この書き方は「メディアクエリ」と呼ばれる。
この場合、「最大幅が50文字分より大きかったら」という条件下で適用される。
メディアクエリについては下記のページが参考になった。

レスポンシブ ウェブデザインの基礎
https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=ja

そして、今回 style.css に追加したコードがこちら。

指定した画面幅は適当である。親テーマの style.css にあった 「38.75em, 46,25em, 55em」の抜けてる部分を補うようなイメージで「20em, 30em」を条件に追加した。とりあえずはこの設定で大丈夫そう。

おわりに

記事タイトルをレスポンシブに対応させたことで、モバイル端末からアクセスした場合でも適切なフォントサイズで記事タイトルを表示できる。
自分のiPhoneSEでアクセスしたところ問題なく表示された。
コンテンツ部のテキストもレスポンシブに対応させるかどうかは今後検討する。

シェアしていただけると嬉しいです

スポンサーリンク