Window Width = px
*

▲

サイト作成の参考

１ プラグイン

WordPressには多くのプラグインがありますが、このサイトの閲覧者はWordPressの初心者ということを前提に、プラグインの数を絞りインストールしておきたいものを記述しています。WordPressに慣れてから必要に応じて追加していく方が無難です。

  • 連番
  • プラグイン名と概要
  • １

  • ＷＰ Editer

    「固定ページのコンテンツ編集」と「外観→テーマの編集」画面の文字サイズや画面の高さなどを使い易くカスタマイズが出来ます。有効化すると「テーマの編集」の文字が「Theme Editer」に変わります。

    標準では「php」と「css」ファイルしか表示されませんが、「Theme Editer」では、全ファイルが表示されます。但し、編集出来るのはテキストファイルのみです。なので、「jQuery」や「JavaScript」も編集出来ます。

    大きな利点は、WP V4.9以降でエラーが出て編集出来ない点をカバー出来ます。

  • ２

  • WP Multibyte Patch

    日本語でホームページを作成する為に必須です。日本語の文字種の多さから、日本語は１字を２バイトで表示します。ＷＰは元々英語が基本なので、２バイト文字の扱いに不具合が出る場合があるための対応です。

  • ３

  • PS Disable Auto Formatting

    WordPressには自動整形という機能があり、これが一寸厄介で、enter key（改行キ）でbrタグやｐタグが勝手に入ってしまう。その為、思わぬデザインの崩れや余分なスペースが出来てしまう。この機能を停止させるのが、このプラグインです。コンテンツを入れる画面は、編集し易くするため、改行は「個人的に必須」です。


２ レスポンシブ化

先頭

作成手順には、レスポンシブルウェッブへの対応が説明されていないので、以下にレスポンシブル化に必要な４つの機能について、このサイトの「旅行プラン」のページを例に対応を記述します。

１）表示領域（viewport）

viewport

機種の表示領域を取得して、どう表示するかを指定する。

header.phpの<head>と</head>タグの間に以下のhtmlに記述します。既に、4章 インデックステンプレートに入っています。

２）メディアクエリー（Media Query）

Media Query

機種の画面サイズに合わせてＣＳＳを適用させる仕組みです。

このサイトのブレークポイントは、４８０ｐｘ以下と４８１～７６８ｐｘで、ごく一般的な仕様です。尚、７６９ｐｘ以上は、スタイルシートの記述が適用されます。

３）フルードグリッド（Fluid grid）

旅行プランは、左にメニュー・右にコンテンツを表示するデザインで、従来は升目式のグリッドデザインで各々にｐｘで幅を指定していました。この幅の指定をパーセント（％）で可変指定する仕組みがフルードグリッドです。

４）フルードイメージ（Fluid image）

旅行プランのコンテンツには、左に画像と右にテキストを表示するデザインです。画像に対しても、ＣＳＳで％指定することで可変表示が可能となります。尚、ヘッダーに対しても％で指定します。この機能がフルードイメージです。

当サイトのレスポンシブル化の概略説明

２）～４）迄の機能はＣＳＳとして一体なので、主要の部分を以下に記述します。

  • 行番
  • 説明
  • 2-13

  • 画面幅が769px以上の時の基本デザインの表示です（style.css）。

     2-3 サイト内全画像のレスポンシブ化の設定。サーバーにアップした画像のサイズが画面表示に見合ったサイズの時は、これでＯＫですが、アップ画像が大きい場合は、画像個別に設定する必要があります。

     4 旅行プラン以外のページは、ページ編集で入力した内容を全体で表示する。

     6 メニューとコンテンツを包含したボックスです。設計の横幅を％指定します。

     7-9 メニューの幅を最大ＰＸ数と％で指定、メニュー幅の見合ったｐｘ数と％値との関連して決めます。

     10-11 コンテンツの幅を％指定、メニュー幅の％値と関連して決めます。

    ☆ ％の合計値を100%にすると、画面が768px以下の場合、右端が消えたり、デザインが崩れます。個人的な経験値ですが合計は96%前後が良いようです。

     12-13 コンテンツ内の画像のサイズを45%に、記事テキストは画像に回り込ます為、幅は無指定。

  • 16
  • 480px以下の小さい画面（スマホ）のメディアクエリー開始、終了は30行目。
  • 17-19
  • 幅が狭いのでグローバルメニューのフォントサイズ・内部余白・メニュー幅を小さく。
  • 20-22
  • サイドメニューを100%に表示と下にコンテンツが入るので下部に余白
  • 23-24
  • コンテンツも１００％に。
  • 25-28
  • コンテンツの中の画像も中央寄せで１００％表示に。
  • 29
  • コンテンツがサイドメニューの下に入るので、左の位置合わせ
  • 33
  • 481px～768px以下の画面のメディアクエリー開始、終了は42行目。
  • 34-36
  • コンテンツ部サイズはパソコン用デザインで83%ですが、このままだと画像の下にずれてデザインが崩れので、マイナス２％し少し表示領域を狭める。
  • 37-40
  • コンテンツ内の画像は幅広なので大きく表示し、テキストデータを画像の下に配置している。
  • 41
  • コンテンツ画像の下にテキストが廻り込むので、左位置の調整で１０ｐｘを確保。