【Cocoon対応】 WordPressブログのレスポンシブデザイン入門

様々なデバイス IT関連

経緯

GoogleAnalytics で当ブログのアクセス解析をしたところ、下記のような結果になりました。

  • 90%近くがスマホからのアクセス
  • そのうち75%以上がiPhoneからのアクセス
  • 国別でのアクセスは99%以上が日本

日本はiPhoneの普及率が高い、検索する時はスマホが多いということが分かります。

これまでPC画面での見栄えばかり気にしていたので、モバイル側での見栄えがよろしくありませんでした。

僕

ずっと気になっていたんだけどね……。

やっと重い腰を持ち上げられたので、今回デザインの改修を行いました。

この記事で説明すること

下記の通りです。

  • テーマの種類に関して
  • デザインをカスタマイズする方法について
  • レスポンシブデザインにする方法

テーマの種類

そもそもテーマとは

WordPress自体を機能拡張したものや、デザインが最適化されたものを1つのまとまりにしたものを「テーマ」と呼びます。

概念に近いので、「そういうもの」くらいの認識で問題ありません。

ちなみに「テンプレート」とは異なります
テンプレートは、記事を投稿する際に雛形となるものを定義しているファイルです。

お問い合わせやプロフィールページのような固定ページや、画像ファイルなどの制御を担います。

これらのテンプレートをまとめたものが、テーマです。

WordPress公式のものから、個人開発のもの、有料無料と、テーマには幅広い選択肢があります。

僕

自分に合ったテーマを
探してみてくださいね!

親テーマと子テーマ

テーマをアップデートすると、カスタマイズしたデザインなどが消えてしまう恐れがあります。

ジョージ・眉間シワ男
ジョージ・眉間シワ男

せっかく修正したのに、
アップデートの度に修正するの?
面倒くさいな……。

そこで、「子テーマ」という親テーマを継承した物を使用します。

子テーマは、親テーマをベースとしたデザイン定義ファイル(CSS)を修正するためのテーマです。

これにデザインの修正を加えることで、大元の親テーマのアップデートが行われても修正が消えることを防げます。

デザインをカスタマイズする方法について

テーマエディターまでの移動の仕方

ダッシュボード → 外観 → テーマエディター の順に選択します。

テーマエディター画面

上のような画面になったらOKです。

このエディター上でデザイン修正を加えていきます!

注意点
子テーマを有効した状態にしておきましょう。
無い場合は、自分で作成することも可能です。

私はCocoonという無料のテーマを使用しています。
Cocoonには子テーマがあるので、それを使って進めていきますね。

編集できない時は

変更を保存するには事前にこのファイルを書き込み可能にする必要があります。

テーマエディターの下に「変更を保存するには事前にこのファイルを書き込み可能にする必要があります。」と表示されている場合、ファイルの更新ができません。

それは、ファイルのパーミッションが許可されていないからです。

WordPressをインストールしているサーバにアクセスして、該当ファイルのパーミッションを変更しましょう。

なぜ権限を変えるの?
自分のブログのデザインを勝手に変えられるなんて嫌ですよね。
権限を全て許可しておくと、外部からそのような操作も可能になってしまいます。
セキュリティ面、自分の気持ちのためにも権限の管理は重要です。

レスポンシブデザインにする方法

CSSメディアクエリ」という、Webページを開いた際の環境によって見栄えを切り替える仕様を利用します。

このメディアクエリを使用するのは簡単で、「media-screen」で画面幅を定義します。
これでスマホの画面、タブレットの画面、パソコンでの画面…のように環境ごとに表示させるデザインを切り替えることができます。

実際に私が書いているCSSの一部を抜粋します。
Cocoonの子テーマには、コメントでどこに何を書くべきか記載されています。

サンプルコード(CSS)

max-width: 100px 画面が最大100px以下までこのCSSを適用するという意味になります。
min-width: 100px とすれば、100px以上の場合このCSSを適用するということになります。

ざっくりまとめ

私が思っている以上に、スマートフォンが普及していると実感しました。

ざっくりやり方をまとめました。下記の通りです。

  • 子テーマを有効にする
  • テーマ配下のCSSファイルを編集する
  • CSSプロパティを書く際は、メディアクエリで画面ごとに分ける。

参考文献

WordPressテーマとは何か?テンプレートとの違いは?
紛らわしい専門用語ワードプレスの「テーマ」。「テーマって何?」「テンプレートじゃないの?」「その違いは何?」 このブログ記事ではWordPress初心者向けにテーマとテンプレートのそれぞれの用語の説明。その違いを解説します。
WordPressの子テーマを作る理由と子テーマを自作する方法
子テーマを作る一番の理由はテーマを直接カスタマイズしてしまうと、テーマのバージョンアップによって変更した内容が上書きされてしまうからです。「テーマはカスタマイズしたい」「でもバージョンアップもしたい」という2つの目的を果たすために子テーマが存在します。
レスポンシブの基本、メディアクエリの書き方 | それからデザイン スタッフブログ
以前のWebは「PCで見る」というのが第一でありそれ以外の選択肢はありませんでしたが、 最近ではスマートフォンやタブレットの登場により、ユーザーの環境も様変わり...
レスポンシブWebのためのCSS構成 | helog - WEB/システム/IT技術ブログ
最近話題の「レスポンシブWeb」。近年、スマートフォンの普及が加速して、Webの世界でもスマフォ最適化の必要性が叫ばれています。そんな中、PCサイトとは別でスマホサイトを立ち上げる話はよくありますが、それよりも一歩先を見据えた考え方がレスポンシ...
タイトルとURLをコピーしました