ワードプレスの自作テンプレートをレスポンシブにするために。

投稿日:2017年3月20日 更新日:

ワードプレスには多数の無料テーマが存在し、SEO対策などの観点からもそれらを使うのが一般的になっています。ですが、人の作ったものなんか使いたくないし、自分で管理しやすいように好き勝手に作りたいという人も大勢いらっしゃることでしょう。

かくいう私も、自分で全部作ってやるのが好きな人なので、結果が出るまでの速度よりも自己満足による完成度の高さを重要視しています。もちろん読者が見づらいサイトを構築するという意味ではなく、見やすくて自分の好みに合ったサイトを作ったほうが愛着も湧くし更新していて楽しいから。というのが一番の理由なわけですけれど。

で、今現在「創作資料庫」と名付けたこの情報サイトを制作しているわけですが、コーティングに失敗しましたw 無計画に作っていたのが問題なのでしょうけれど、まさか0からやり直さなければいけないとは思いもしませんorz

なので、無計画にワードプレスでサイトを構築しようとしている人がいるならば、その人のためにも更新の内容やら方法を記載していこうかなと思います。

※ワードプレスのインストール手順などは自分で調べてください。

レスポンシブデザインとは何か?

レスポンシブデザインとは、ユーザーのデバイス(PC,タブレット,モバイル,非視覚的ブラウザ)に関係なく、同じURLで同じHTMLコードを配信しますが、画面サイズに応じて表示を変えるサイトのこと。

つまり、どんな環境で見ても快適に見ることが出来るサイトですよってことです。

どんな環境でも快適に閲覧することが出来るということは、読み手を選ばないということであり、情報サイトを運営するにあたっては必須だと言えるでしょう。

だが、私はそれを無計画に作っていたので、モバイル端末(スマホ)での表示を作っていこうとしたときに躓きましたorz 大半のCSSを書き直さないとモバイルに対応出来ないどころか、タブレットで閲覧したときの表示が酷いことになることに気づいたからです。

正直、情報サイトとしてコレは大問題なので早急に対策しないといけないなと思いました。

レスポンシブデザインにするために必要なこと

基本的に必要なことといえば @media screen and という記述をCSSに書き込み、それで閲覧環境によって対応するCSSを切り替えることで表示方法を変えるというものです。

今まで私は640pxを境界にしてスマホとPCえおわけていたのですが、今回のことからタブレット用の記述も付け加えようと考えたわけです。

そうするとなると、一番気にしないといけないのはどこで表示を切り替えるのか? というブレイクポイントを探さなければなりません。

そこで参考にしたのは、ワードプレスのテーマとして有名な「STINGER」です。

このテーマではブレイクポイントとして600pxと960pxを採用しており、600px以下はスマホなどのモバイル端末。600~960pxまではタブレット端末。960px以上はPC端末を対象に作られています。

なので私は以下のように記述しました。

/*** 共通定義 ***/

/* 共通定義ここまで */
/*** スマホ用 ※画面サイズが600pxまではここから読み込む ***/
@media screen and (max-width:600px){

/* スマホ定義終了 */
}
/*** タブレット用 ※画面サイズが600pxまではここから読み込む ***/
@media screen and (min-width:600px) and (max-width:960px){

/* タブレット定義終了 */
}
/*** PC用 ***/
@media screen and (min-width: 960px){

/* PC定義終了 */
}

これでモバイル端末、タブレット、PCの3種類のCSSが用意できますので、ワードプレスでテーマを自作しようとしている人は参考にしてみてはいかがでしょうか?

スポンサーリンク

-ワードプレス
-, , ,

Copyright© ビブリオテーク , 2017 All Rights Reserved.