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

段落に生じる行末のズレや文字間の隙間を排除し 日本語ならではの美しい ベタ組版 を目指します

手間の割には実りの少ないテーマです こんな事は気にしないって方が精神衛生上とてもよろしいかと思います

2019-01-14  追記

未熟な者がカスタマイズを行っているため ある記事の内容が次の記事では無用になったり 仕様が変更されたりします

初心者にありがちなトライ&エラー の読み物としてお楽しみください

スポンサーリンク

文字組みを考える

デフォルト状態での文字組み

text-align: left;
text-align: left;

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

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

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

2019-02-09 追記

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

行末の見栄えを良くする

text-align: justify;
text-align:  justify;

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

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

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

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

文字ピッチが広がらない様にするには

padding 調整
padding 調整

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

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

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

scss 準備編

それを踏まえた上で 今回は次の様な前提条件で進めます

  • 文字サイズは、Cocoon のデフォルトの「18px」
  • コンテンツ幅は、Cocoon のデフォルトの「800px」
  • まずは<p>タグのみに適用

style.scss

 // compileExpanded: ../$1.css 

省略

 // 勉強用
 @import "thx"; 

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

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

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

_breakpoints.scss

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

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

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

scss 実作業編

min-width-1025.scss

基本サイズの変数化

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

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

border パラメータの変数化

 // 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 計算に使われます

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_main_column_contents_width - 2 * $thx_beta_border_width)
コンテンツ幅から <p> タグに付加される border を左右で2本分引きます これが <p> タグに収まる文章の幅になります
% $thx_site_font_size
上で求めた文章の幅フォントサイズで割った余り 余剰 を求めます これが text-align: justify; 間延びしてしまう幅になります
/ 2
padding-left padding-right の両端から詰めるので 間延びしてしまう幅二分します

スタイルの適用

 $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; 
	 } 
 } 

今回のまとめ

scss は書式内に計算式を含めることが出来るので 今回の様な画面サイズに応じたスタイル調整にはとても便利です

次回以降でもう少し細かくカスタマイズしていきます

参考記事

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

コメント