いよいよ、 手間ばかりが増えてきます。 目次の量に我ながら若干引くわ〜。
その他のデバイス対応
コンテンツ幅と文字サイズから適切なベタ組みが可能となったので、 前回までの 「コンテンツ幅 800px」 の前提条件を緩和し、 他の画面サイズにも適応していきます。
responsinator.com
Cocoon のアドミンメニューからも利用できる responsinator.com によると、 これらの画面サイズが挙げられています。
- iPhone eXpensive portrait · width: 375px
- iPhone eXpensive landscape · width: 734px
- Android (Pixel 2) portrait · width: 412px
- Android (Pixel 2) landscape · width: 684px
- iPhone 6-8 portrait · width: 375px
- iPhone 6-8 landscape · width: 667px
- iPhone 6-8 Plump portrait · width: 414px
- iPhone 6-8 Plump landscape · width: 736px
- iPad portrait · width: 768px
- iPad landscape · width: 1024px
今回はこの中から iPhone 縦持ちの 375px と、 iPad の 縦向き 768px ・横向き 1024px に適応してみます。
前提条件
今回はこの様な前提条件とします。
- PC・iPad・スマホに大別する。
- フォントサイズは、PC・iPad を 18px、スマホを 16px とする。
- iPad 縦向きの 768px 以上をベタ組みする。
- 767px 以下は、
- 「text-align: justify;」を付加しない。
- padding の計算を行わない。
- カラムの表示方法を変更する。
- 但し、iPhone 縦持ちの 375px はベタ組みを行う。
- 767px 以下は、
scss 準備編
_breakpoints.scss (メディアクエリの分岐)
//768px 以上
@media screen and (min-width: 768px){
@import "min-width-768";
}
//767px 以下
@media screen and (max-width: 767px){
@import "max-width-767";
}
//480px 以下
@media screen and (max-width: 480px){
@import "max-width-480";
}
//iPad landscape · width: 1024px
@media screen and (width: 1024px){
@import "width-1024";
}
//iPad portrait · width: 768px
@media screen and (width: 768px){
@import "width-768";
}
//iPhone eXpensive portrait · width: 375px
@media screen and (width: 375px){
@import "width-375";
}
前回と同様にメディアクエリを追加します。
それぞれの役割は後述します。
「_breakpoints.scss」 と同階層に
- min-width-768.scss
- max-width-767.scss
- max-width-480.scss
- width-1024.scss
- width-768.scss
- width-375.scss
を作成します。
全体的なツリー構造はこちらからご確認ください。
scss 実作業編
thx_betagumi.scss (共通部分の記述)
前回までは一種類のメディアクエリ (min-width: 1025px) での作業でしたので、 scss を全て 「min-width-1025.scss」 に記述しましたが、 今回は6種類のメディアクエリを扱うので、 共通部分の記述先として 「thx_betagumi.scss」 を作成します。
作成場所は 「style.scss」 と同じ階層にします。
初期設定
// ベタ組用変数
$thx_main_column_contents_width: 800px;
$thx_site_font_size: 18px;
$thx_site_font_condense: 1;
$thx_site_font_width: $thx_site_font_size * $thx_site_font_condense;
// thx_beta_border
$thx_beta_border_style: solid;
$thx_beta_border_width: 0px;
$thx_beta_border_color: fade-out($key_sub_color, 1);
// thx_beta_column
$thx_beta_column_count: 1;
$thx_beta_column_margin: $thx_site_font_width * 1;
// 基本フォントファミリー
$thx_font_family:
// "UD 新ゴ コンデンス 90 L",
'Hiragino Sans',
'Hiragino Kaku Gothic ProN',
Meiryo,
sans-serif;
.page-body {
font-size: $thx_site_font_size;
}
毎度おなじみ、 パラメータの変数化です。
今回は効果がありませんが、 "UD 新ゴ コンデンス 90 L" などの字幅の狭いフォントにも対応できる様、 「$thx_site_font_condense」 及び、 「$thx_site_font_width」 を用いて各種計算を行います。
また、 今回から 「$thx_beta_column_count」 も追加しています。
こちらは後述する 「padding 計算の関数化」 で使用します。
「.page-body」 は Cocoon が <body> に付加するクラスです。 これにフォントサイズを適用します。
@mixin
//mixin 設定
@mixin thx-beta-body {
font-family: $thx_font_family;
}
@mixin thx-beta-p {
border-style: $thx_beta_border_style;
border-width: $thx_beta_border_width;
border-color: $thx_beta_border_color;
text-align: justify;
}
@mixin thx-default-text-align {
text-align: start;
}
@mixin thx-column-margin($column_margin: $thx_beta_column_margin) {
margin-left: $column_margin;
margin-right: $column_margin;
@if ($column_margin / 1px) != 0 {
&:first-child {
margin-left: $column_margin * 0;
}
&:last-child {
margin-right: $column_margin * 0;
}
}
}
各メディアクエリ先での記述をできるだけ簡略化できる様に、 共通項目を mixin 設定します。
「@mixin thx-beta-body」 は <body> でフォント指定を行います。
「@mixin thx-beta-p」 は <p> の各種設定。
「@mixin thx-default-text-align」 は 「text-align: justify;」 を解除する際に呼び出します。
「@mixin thx-column-margin」 は引数を元にマージン設定を行います。 「@if」 はマージンが0以外の場合にのみ作用し、 無駄な css の生成を妨げます。
padding 計算の関数化
@function thx-beta-padding (
$width: $thx_main_column_contents_width,
$font_width: $thx_site_font_width,
$border_width: $thx_beta_border_width,
$column_count: $thx_beta_column_count,
$column_margin: $thx_beta_column_margin
) {
@return (
(
$width
-
(
$column_margin * ((2 * $column_count) - 2)
)
-
(
$border_width * (2 * $column_count)
)
)
/ $column_count
% $font_width
/ 2
);
}
一番メンドくさくて、 一番重要な padding 計算部分を関数化します。
引数の4番目、 「$column_count: $thx_beta_column_count」 の値を 「1」 にする事により、 単一段落 (カラムブロックではない、 普通の段落) にも使用できます。
min-width-768.scss (PC・iPad)
画面サイズが 768px 以上、 つまり iPad と PC 用のメディアクエリとなります。 このメディアクエリ内では 「コンテンツ幅 800px」・「フォントサイズ 18px」 の条件でベタ組みを行います。
基本サイズの変数化
/*******************/
/* 768px 以上のベタ組 */
/* iPad 縦持ち */
/*******************/
// ベタ組用変数
//$thx_main_column_contents_width: 800px;
//$thx_site_font_size: 18px;
//$thx_site_font_condense: 1;
//$thx_site_font_width: $thx_site_font_size * $thx_site_font_condense;
// thx_beta_border
//$thx_beta_border_style: solid;
//$thx_beta_border_width: 0px;
//$thx_beta_border_color: fade-out($key_sub_color, 1);
// thx_beta_column
//$thx_beta_column_count: 1;
//$thx_beta_column_margin: $thx_site_font_size * 1;
//.page-body {
// font-size: $thx_site_font_size;
//}
「thx_betagumi.scss」 で設定した変数 (ページ内リンク) をそのまま使用するため、 すべてコメントアウトしてあります。
include と padding の計算
body {
@include thx-beta-body;
}
$thx_beta_padding: thx-beta-padding(
$thx_main_column_contents_width,
$thx_site_font_width,
$thx_beta_border_width,
$thx_beta_column_count,
$thx_beta_column_margin
);
p {
@include thx-beta-p;
padding-left: $thx_beta_padding;
padding-right: $thx_beta_padding;
}
「thx_betagumi.scss」 で mixin したスタイル指定 (ページ内リンク) を include します。
また、 「thx_betagumi.scss」 にて設定した変数 (ページ内リンク) を用いて、 padding 量の計算を行います。
カラムブロック内段落の padding 設定
/* カラムブロック内 padding 設定 */
@for $i from 2 through 6 {
.has-#{$i}-columns{
.wp-block-column{
p {
$thx_beta_padding: thx-beta-padding(
$thx_main_column_contents_width,
$thx_site_font_width,
$thx_beta_border_width,
$i,
$thx_beta_column_margin
);
padding-left: $thx_beta_padding;
padding-right: $thx_beta_padding;
}
}
}
}
「thx_betagumi.scss」 にて作成した関数 (ページ内リンク) を用いてカラム内段落の padding 設定を行います。
カラム間マージンの設定
/* カラムブロック間マージン設定 */
.wp-block-columns.has-2-columns,
.wp-block-columns.has-3-columns,
.wp-block-columns.has-4-columns,
.wp-block-columns.has-5-columns,
.wp-block-columns.has-6-columns {
.wp-block-column {
@include thx-column-margin($thx_beta_column_margin);
}
}
「thx_betagumi.scss」 で mixin した 「thx-column-margin」 (ページ内リンク) にフォントサイズを元にしたマージンサイズを与えてカラム間マージンの設定をします。
max-width-767.scss (スマホ縦横共通)
画面サイズが 767px 以下、 スマホ全般のメディアクエリとなります。 このメディアクエリ内ではスマホの縦持ち・横持ちの両方に共通する設定を行います。
主な設定内容としては、
- フォントサイズは 16px とする。
- ベタ組みは行わない。
- 「text-align: justify;」を適用しない。
- padding の計算を行わない。
- カラム間マージンは1文字分にする。
- 但し、表示幅が狭いので、多カラムの表示レイアウトを変更する。
とします。
基本サイズの変数化
/*******************/
/* 767px 以下のベタ組 */
/* iPad 縦持ち未満 */
/*******************/
// ベタ組用変数
//$thx_main_column_contents_width: 800px;
$thx_site_font_size: 16px;
//$thx_site_font_condense: 1;
$thx_site_font_width: $thx_site_font_size * $thx_site_font_condense;
// thx_beta_border
//$thx_beta_border_style: solid;
//$thx_beta_border_width: 0px;
//$thx_beta_border_color: fade-out($key_sub_color, 1);
// thx_beta_column
//$thx_beta_column_count: 1;
$thx_beta_column_margin: $thx_site_font_width * 1;
.page-body {
font-size: $thx_site_font_size;
}
フォントサイズに関わる箇所のみ上書き変更を行います。
カラム間マージンの設定
表示レイアウトの変更を行うため、 分別して処理を行います。
WordPress のカラムブロックは、
.wp-block-columns {
display: flex;
flex-wrap: wrap;
}
のスタイル指定でラップ表示をし、
@media (min-width: 782px)
.wp-block-columns {
flex-wrap: nowrap;
}
のメディアクエリにより、 782px 以上でラップを解除したカラム表示を行っています。 (スマホファースト?)
今回はそれを踏まえた上で、 デフォルトのスタイル指定を打ち消していく作業となります。
2・3カラム
/* 2・3カラムはカラム表示 */
.wp-block-columns.has-2-columns,
.wp-block-columns.has-3-columns {
flex-wrap: nowrap;
.wp-block-column {
@include thx-column-margin($thx_beta_column_margin);
}
}
2・3カラムはカラム表示のままにします。
「flex-wrap: nowrap;」 にてラップを解除しカラム表示を指定します。
続いて、 「@include thx-column-margin($thx_beta_column_margin);」 にて1文字分のカラム間マージンを設定します。
4・6カラム
/* 4・6カラムは疑似2カラム表示 */
.wp-block-columns.has-4-columns,
.wp-block-columns.has-6-columns {
.wp-block-column {
flex-basis: 50%;
margin-left: 0px;
margin-right: 0px;
&:nth-child(odd) {
padding-right: $thx_site_font_width;
}
&:nth-child(even) {
padding-left: $thx_site_font_width;
}
}
}
4・6カラムはカラム数が多いため、 2段に分けて擬似的に2カラムで表示します。
「flex-basis: 50%;」 にて各カラムの表示幅を半分にし、 左右のマージンを取り払います。
この時、 「flex-wrap: wrap;」 が効いている (ページ内リンク) ので、 カラムが2つ横並びに表示されます。
その状態から左側子要素 (奇数) の右側から1文字分 padding し、 右側も対となる設定をします。
5カラム
/* 5カラムは2 + 3カラム表示 */
.wp-block-columns.has-5-columns {
.wp-block-column {
margin-left: 0px;
margin-right: 0px;
&:nth-child(1) {
flex-basis: (100%/2);
padding-right: $thx_site_font_width;
}
&:nth-child(2) {
flex-basis: (100%/2);
padding-left: $thx_site_font_width;
}
&:nth-child(3) {
flex-basis: (100%/3);
padding-right: $thx_site_font_width * (4/3);
}
&:nth-child(4) {
flex-basis: (100%/3);
padding-left: $thx_site_font_width * (2/3);
padding-right: $thx_site_font_width * (2/3);
}
&:nth-child(5) {
flex-basis: (100%/3);
padding-left: $thx_site_font_width * (4/3);
}
}
}
5カラムもカラム数が多いため、 2段に分けて擬似的に2 + 3カラムで表示します。
基本的な考え方は4・6カラムと一緒です。
max-width-480.scss (スマホ縦持ち)
画面サイズが 480px 以下で、 スマホ縦持ちのメディアクエリとなります。 縦持ちのスタイルをこのメディアクエリ内に記述し、 「max-width-767.scss」 (ページ内リンク) の縦横共通設定を上書きします。
/*******************/
/* 480px 以下のベタ組 */
/*******************/
/* 2・3カラムはラップ表示 */
.wp-block-columns.has-2-columns,
.wp-block-columns.has-3-columns {
flex-wrap: wrap;
.wp-block-column {
@include thx-column-margin(0px);
}
}
共通設定ではカラム表示であった2・3カラム (ページ内リンク) を、 縦持ちではラップ表示に変更します。
4〜6カラムは縦横共通のままです。
width-1024.scss (iPad 横向き)
iPad 横向き専用のメディアクエリとなります。 コンテンツ幅が固定なのでベタ組みを行います。
基本サイズの変数化
/****************/
/* 1024px のベタ組 */
/* iPad 横持ち */
/****************/
// ベタ組用変数
$thx_main_column_contents_width:
1024px * 0.67 - ( 1 + 29 ) * 2;
// $thx_site_font_size: 18px;
// $thx_site_font_condense: 1;
// $thx_site_font_width: $thx_site_font_size * $thx_site_font_condense;
// thx_beta_border
//$thx_beta_border_style: solid;
//$thx_beta_border_width: 0px;
//$thx_beta_border_color: fade-out($key_sub_color, 1);
// thx_beta_column
//$thx_beta_column_count: 1;
//$thx_beta_column_margin: $thx_site_font_width * 1;
「thx_betagumi.scss」 で設定した変数 (ページ内リンク) の内、 コンテンツ幅のみ上書き変更します。
コンテンツ幅は 「@media screen and (max-width: 1242px)」 にて
width: 67%;
とスタイル指定がされており、 「.main」 にて
padding: 20px 29px;
border: 1px solid transparent;
と指定がされているため、 ソースコードの様な計算式で求められます。
include と padding の計算
body {
@include thx-beta-body;
}
$thx_beta_padding: thx-beta-padding(
$thx_main_column_contents_width,
$thx_site_font_width,
$thx_beta_border_width,
$thx_beta_column_count,
$thx_beta_column_margin
);
p {
@include thx-beta-p;
padding-left: $thx_beta_padding;
padding-right: $thx_beta_padding;
}
「thx_betagumi.scss」 で mixin したスタイル指定 (ページ内リンク) を include し、 ベタ組みにします。
また、 「thx_betagumi.scss」 にて設定した変数 (ページ内リンク) を用いて、 padding 量の計算を行います。
記述内容は 「min-width-768.scss」 と一緒 (ページ内リンク) なのですが、 コンテンツ幅が変更されたため再計算の必要があります。
カラムブロック内段落の padding 設定
/* カラムブロック内 padding 設定 */
@for $i from 2 through 6 {
.has-#{$i}-columns{
.wp-block-column{
p {
$thx_beta_padding: thx-beta-padding(
$thx_main_column_contents_width,
$thx_site_font_width,
$thx_beta_border_width,
$i,
$thx_beta_column_margin
);
padding-left: $thx_beta_padding;
padding-right: $thx_beta_padding;
}
}
}
}
「thx_betagumi.scss」 にて作成した関数 (ページ内リンク) を用いてカラム内段落の padding 設定を行います。
「min-width-768.scss」 でも設定 (ページ内リンク) していますが、 コンテンツ幅が変更されたため再計算の必要があります。
width-768.scss (iPad 縦向き)
iPad 縦向き専用のメディアクエリとなります。 こちらもコンテンツ幅が固定なのでベタ組みを行います。
基本サイズの変数化
/****************/
/* 768px のベタ組 */
/* iPad 縦持ち */
/****************/
// ベタ組用変数
$thx_main_column_contents_width: 748px;
//$thx_site_font_size: 18px;
//$thx_site_font_condense: 1;
//$thx_site_font_width: $thx_site_font_size * $thx_site_font_condense;
// thx_beta_border
//$thx_beta_border_style: solid;
//$thx_beta_border_width: 0px;
//$thx_beta_border_color: fade-out($key_sub_color, 1);
// thx_beta_column
//$thx_beta_column_count: 1;
//$thx_beta_column_margin: $thx_site_font_width * 1;
「thx_betagumi.scss」 で設定した変数 (ページ内リンク) の内、 コンテンツ幅のみ上書き変更します。
コンテンツ幅は 「@media screen and (max-width: 768px)」 にて
@media screen and (max-width: 768px)
main.main, div.sidebar {
padding: 10px;
margin: 10px 0;
border-width: 0;
}
とスタイル指定されているので、 左右 10px ずつ差し引いた 748px を使用します。
include と padding の再計算
「width-1024.scss」 の時 (ページ内リンク) と同様、 記述内容は 「min-width-768.scss」 と一緒なのですが、 コンテンツ幅が変更されたため再計算の必要があります。
カラムブロック内段落の padding 設定
こちらも、 「width-1024.scss」 の時 (ページ内リンク) と同様、 記述内容は 「min-width-768.scss」 と一緒なのですが、 コンテンツ幅が変更されたため再計算の必要があります。
カラム表示の保持
/* カラム表示の保持 */
.wp-block-columns.has-2-columns,
.wp-block-columns.has-3-columns,
.wp-block-columns.has-4-columns,
.wp-block-columns.has-5-columns,
.wp-block-columns.has-6-columns {
flex-wrap: nowrap;
}
「max-width-767.scss」 にも出てきた (ページ内リンク) 通り、 デフォルトのスタイルでは 782px 以上でしかラップが解除されないので、 こちらで解除を指定します。
width-375.scss (iPhone 縦持ち)
iPhone 縦持ち専用のメディアクエリとなります。 コンテンツ幅が固定なのでベタ組みを行います。
基本サイズの変数化
/*****************/
/* 375px のベタ組 */
/* iPhone 縦持ち */
/*****************/
// ベタ組用変数
$thx_main_column_contents_width: 355px;
$thx_site_font_size: 16px;
//$thx_site_font_condense: 1;
$thx_site_font_width: $thx_site_font_size * $thx_site_font_condense;
// thx_beta_border
//$thx_beta_border_style: solid;
//$thx_beta_border_width: 0px;
//$thx_beta_border_color: fade-out($key_sub_color, 1);
// thx_beta_column
$thx_beta_column_count: 1;
$thx_beta_column_margin: $thx_site_font_width * 1;
.page-body {
font-size: $thx_site_font_size;
}
「thx_betagumi.scss」 で設定した変数 (ページ内リンク) の内、 コンテンツ幅と文字サイズのみ上書き変更します。
フォントサイズは Cocoon のモバイルサイトデフォルトである 16px を使用。
コンテンツ幅は 「@media screen and (max-width: 768px)」 にて
@media screen and (max-width: 768px)
main.main, div.sidebar {
padding: 10px;
margin: 10px 0;
border-width: 0;
}
とスタイル指定されているので、 左右 10px ずつ差し引いた 355px を使用します。
include と padding の再計算
「width-1024.scss」 の時 (ページ内リンク) と同様、 記述内容は 「min-width-768.scss」 と一緒なのですが、 コンテンツ幅が変更されたため再計算の必要があります。
カラムの調整
「max-width-480.scss」 (ページ内リンク) により、 2・3カラムはラップ表示になっています。
4〜6カラムは 「max-width-767.scss」 の設定 (ページ内リンク) が生きていますが、 このメディアクエリ内では 「text-align: justify;」 が効いてしまっているので、
/* 456カラムはアジャスト解除 */
.wp-block-columns.has-4-columns,
.wp-block-columns.has-5-columns,
.wp-block-columns.has-6-columns {
@include thx-default-text-align;
}
として、 両端揃えを解除します。
まとめ
まぁ、 最初から分かってはいたのですが、 ホント、 手間の割には実りの少ない取り組みです w
それでも、 ここまで来たので次回は Cocoon 謹製のタブボックスなどに対応できれば、、、
見本やソース
見てみたいと思われる方がいらっしゃいましたらこちらからドゾ。 今後も改良 (?) を重ねていく予定ですので、 執筆時とは差異があるかもしれません、、、
参考記事
以下、 参考にさせて頂いたページです。
コメント