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

WordPress （html ？） での文字組はデフォルトでは左詰めになっています。 文字の大きさが全て同じであれば文字はキレイに並びます。

例えば全て全角で打つと上段の様になります。

しかし、 日本語の文章は日常的に英数字なども使われますので、 下段二行目の様に行末がズレてしまうケースも多くあります。

2019-02-09 ：追記

全て全角で打っても揃わないかも ；；

そんな行末のズレを防ぐために両端揃えにする手もあります。

しかし、 これはこれで問題があります。

強制的に両端が揃う様、 文字の間隔 （ピッチ） を広げてしまうため、 パラパラとした文章になってしまいます。 また、 最終行との文字ピッチの差も気になります。

この結果、 見栄えの悪さ・読解力の低下に繋がります。

であれば、 文章の幅が文字サイズの整数倍ピッタリになる様に、 padding で調整してみたら？

ってのが今回のテーマです。

当サイトではこちらの記事に基もとづき、 scss を使ってカスタマイズを行っていきます。

 // compileExpanded: ../$1.css 

省略

 // 勉強用
 @import "thx"; 

 /////////////////////////////////////// 
 //  メディアクエリ
 /////////////////////////////////////// 
 @import "breakpoints/breakpoints"; 

コンテンツ幅が 「800px」 の前提条件なため、 スマホなどでは適用されない様に 「@media screen」 を使用します。

今回は Cocoon 親テーマに倣ならい、 style.scss と同階層に 「breakpoints」 フォルダを作成し、 その中に 「_breakpoints.scss」 ファイルを作成します。

 //1025px 以上
 @media screen and (min-width: 1025px){ 
   @import "min-width-1025"; 
 } 

スクリーン幅が 800px 以上の場合のみに適用されるルールを作成します。

「_breakpoints.scss」 と同階層に 「min-width-1025.scss」 ファイルを作成します。

 //  ベタ組用変数
 $thx_site_font_size: 18px; 
 $thx_main_column_contents_width: 800px; 

フォントサイズと画面幅を変数化します。

 // thx_beta_border 
 $thx_beta_border_style: solid; 
 $thx_beta_border_width: 0px; 
 $thx_beta_border_color: fade-out($key_sub_color, 1); 

<p> タグに付加する （かもしれない） border パラメータを変数化します。

ここで指定する 「$thx_beta_border_width」 が次の padding 計算に使われます。

 // thx_beta_padding 
 $thx_beta_padding: 
   ( 
     ( 
       $thx_main_column_contents_width 
       - 
       2 * $thx_beta_border_width 
     ) 
     % $thx_site_font_size 
   ) / 2; 

<p> タグに付加する padding を計算します。

計算手順は次の通りです。

 $thx_font_family: 
     'Hiragino Sans', 
     'Hiragino Kaku Gothic ProN', 
     Meiryo, 
     sans-serif; 

 body { 
   font-family: $thx_font_family; 
   font-size: $thx_site_font_size; 
 } 

 p { 
   border-style: $thx_beta_border_style; 
   border-width: $thx_beta_border_width; 
   border-color: $thx_beta_border_color; 
   padding-left: $thx_beta_padding; 
   padding-right: $thx_beta_padding; 
   text-align: justify; 
 } 

変数化されたパラメータを適用していきます。 css 化するとこの様になります。

 @media screen and (min-width: 1025px) { 
	 body { 
		 font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; 
		 font-size: 18px; 
	 } 
	 p { 
		 border-style: solid; 
		 border-width: 0px; 
		 border-color: rgba(47, 93, 80, 0); 
		 padding-left: 4px; 
		 padding-right: 4px; 
		 text-align: justify; 
	 } 
 }