段落を整えて表示する−その③

いよいよ 手間ばかりが増えてきます 目次の量に我ながら若干引くわ〜

2019-01-14  追記

次回の記事にて仕様が変更されます

スポンサーリンク

その他のデバイス対応

コンテンツ幅と文字サイズから適切なベタ組みが可能となったので 前回までの コンテンツ幅 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 に適応してみます

check
  • カスタマイズは自己責任でお願いします。
  • wp-cocoon.comサイトのサポート対象外となります。

前提条件

今回はこの様な前提条件とします

  • PC・iPad・スマホに大別する。
  • フォントサイズは、PC・iPad を 18px、スマホを 16px とする。
  • iPad 縦向きの 768px 以上をベタ組みする。
    • 767px 以下は、
      • 「text-align: justify;」を付加しない。
      • padding の計算を行わない。
      • カラムの表示方法を変更する。
    • 但し、iPhone 縦持ちの 375px はベタ組みを行う。

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 はマージンがゼロ以外の場合にのみ作用し 無駄な 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 PCiPad

画面サイズが 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; 
 } 

カラムブロック内段落の 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 以上でラップを解除したカラム表示を行っています スマホファースト?

今回はそれを踏まえた上で デフォルトのスタイル指定を打ち消していく作業となります

3カラム
 /*  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); 
   } 
 } 

3カラムはカラム表示のままにします

flex-wrap: nowrap; にてラップを解除しカラム表示を指定します

続いて @include thx-column-margin($thx_beta_column_margin); にて1文字分のカラム間マージンを設定します

6カラム
 /*  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; 
     } 
   } 
 } 

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カラムで表示します

基本的な考え方は46カラムと一緒です

max-width-480.scss スマホ縦持ち

画面サイズが 480px 以下で スマホ縦持ちのメディアクエリとなります 縦持ちのスタイルをこのメディアクエリ内に記述し max-width-767.scss ページ内リンク の縦横共通設定を上書きします

 /*******************/ 
 /* 480px 以下のベタ組  */ 
 /*******************/ 

 /*  3カラムはラップ表示  */ 
 .wp-block-columns.has-2-columns, 
 .wp-block-columns.has-3-columns { 
   flex-wrap: wrap; 
   .wp-block-column { 
     @include thx-column-margin(0px); 
   } 
 } 

共通設定ではカラム表示であった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 ページ内リンク により 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; 
 } 

として 両端揃えを解除します

まとめ

まぁ 最初から分かってはいたのですが ホント 手間の割には実りの少ない取り組みです

それでも ここまで来たので次回は Cocoon 謹製のタブボックスなどに対応できれば、、、

見本やソース

見てみたいと思われる方がいらっしゃいましたらこちらからドゾ 今後も改良 を重ねていく予定ですので 執筆時とは差異があるかもしれません、、、

参考記事

以下 参考にさせて頂いたページです

コメント