WordPressでInDesignの様な文字組−その①

 $line_space: 
   round( 
     ($thx_site_line_height - 1) * $font_size / 2 
   ) * 2; 
 $line_height_px: $font_size + $line_space; 
 $grid_color: fade-out($key_sub_color, 0.75); 

「$line_space」 で行間の px 数を設定します。

続いて、 「$line_height_px」 にて line-height の px 数を設定します。

「$grid_color」 ではグリッドの色を設定します。 薄めの色がいいと思います。

 @mixin set-grid(){ 
   line-height: $line_height_px; 
   background-image: 
   linear-gradient( 
     to bottom, 
     $grid_color 4%, 
     transparent 0%, 
     transparent percentage(1 / $thx_site_line_height) - 4%, 
     $grid_color 0%, 
     $grid_color percentage(1 / $thx_site_line_height) + 0%, 
     $white      0  ), 
   linear-gradient( 
   to right, 
     $grid_color 3%, 
     transparent 0%, 
     transparent 95%, 
     $grid_color 0%  ); 
   background-position: 
     top $line_space / 2 - 2px 
     left 
   ; 
   background-size: 
     $font_size 
     $line_height_px 
   ; 
 } 

こちらの記事を参考に設定します。

懐かしの作文を CSS グラデーションで表現する - Qiita

CSS には、 グラデーションを生成するための linear-gradient というプロパティがありますが、 今回はその linear-gradient を使って、 誰もが子どもの頃に書いた作文風の CSS を作りました。 せっかくなので、 lin...

qiita.com

注意点としては、 「background-position:」 にて表示 （開始） 位置を行間の半分ずらし、 さらに 2px ずらしています。

本来であれば、 と言うか、 理想論的には行間の半分さえずらせば良さそうなのですが、 各ブラウザの解釈 （？） によって表現が変わる様なので微調整が必要となります。

今回は、 iOS の Safari をテスト機としています。

 .thx-set-grid { 
   @include set-grid(); 
 } 

適用したいクラスに include します。

常時表示の場合は 「.article」 や 「.entry-content」 などに include します。