ENTRY TITLE

ブログのスマホ対応すませました!

  • LINEで送る
  • このエントリーをはてなブックマークに追加

ようやくスマホ対応画面の調整ができました。
簡単に解説まとめてみたいと思います。

①スマホ用にCSSを組む。

スマホ用にスタイルを適用するのはWordPressだからって特別なやり方があるわけではありません。
保存する階層だけ普段の設置仕方とは違うかもですね。
デスクトップ用の基本のスタイルシートをおいてる階層と同じ所にスマホ用のスタイルシートを置きます。

practicetheme

ネーミングセンスはご容赦下さい。

②CSSメディアクエリーを使って、画面サイズに合わせてどのスタイルを適用するかを仕分ける。

これはもうレスポンシブWebデザインといえば大変お世話なるやつですね。
HTMLのheadの中に

view-source_www_start30blog_com

こんな感じで書きます。
今回はスマホとデスクトップ用しか作ってませんが、場合によってタブレット用だったり、そもそもデバイスごとに作ったりするみたいです。

で、今回はWordPressでの導入のため上記の用にそのまま書くわけにはいきません。

header_php_—_Brackets

WordPressのheader.phpの中に書く場合はこんなかんじですね。
基本のスタイルは

header_php_—_brackets01

とゆうふうに書きますが、今回のスマホ用のスタイルは

img02

このように書いて適用します。
簡単にゆうとどのディレクトリからどのファイルを取得してくるかって指示みたいですね。
WordPressでのHTML内では全編こんな感じで書くようです。
詳しくは、またの機会にまとめたいと思います。

はい、以上でスマホ対応が完了です。
今回は基本的に幅を合わせてスマホで見た時に視認性がいいようにしただけですが、ゆくゆくはタッチ操作で出現するメニューバーとかも作りたいですね。

  • LINEで送る
  • このエントリーをはてなブックマークに追加

RELATED POST関連する記事を表示しています

POPULAR POST人気の記事を表示しています