scss で skin を作ってみる−その②

前回の続きとなります。

check

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

skin-colors-yellow をお手本にする
1. 色指定を整理する
2. 色指定を簡略化する
既存のカスタマイズを追加する
1. 追加用の scss
まとめ

skin-colors-yellow をお手本にする

色指定を整理する

「skin-colors-yellow」の「style.scss」では、まず最初に基本となる色の指定がなされています。

 $bg_color: #fbfaf5; 
 $white: #fff; 
 $key_color: #f8b500; 
 $key_sub_color: #ffec47; 
 $key_color_thin: rgba(248, 181, 0, 0.05); 
 $h_bk_color: #fff6e0; 
 $sub_menu_hover_bg_color: #333; 
 $border_color: #ccc; 

これらの中で、そのまま使う色指定

 $white: #fff; 
 $sub_menu_hover_bg_color: #333; 
 $border_color: #ccc; 

と、カスタマイズに使用する色指定

 $bg_color: #fbfaf5; 
 $key_color: #f8b500; 
 $key_sub_color: #ffec47; 
 $key_color_thin: rgba(248, 181, 0, 0.05); 
 $h_bk_color: #fff6e0; 

とに区分します。

色指定を簡略化する

更にカスタマイズの色指定を簡略化するべく、「$key_color」の濃淡調整などで指定できそうな色指定を計算式化し、

 $key_color: #f8b500; 
 $key_sub_color: #ffec47; 

 $bg_color: change-color($key_color, $lightness: 95%); 
 $key_color_thin: fade-out($key_color, 0.95); 
 $h_bk_color: lighten($key_color, 40%); 

とします。

簡略化した事によって色指定のニュアンスが多少は変わってしまいますが、「$key_color」と「$key_sub_color」の２つを指定するだけで良くなりますので、お手軽感があります。

無論、全ての色指定を個別に行っても何も問題ありません。むしろ、よりきめ細やかなサイトデザインが可能となるでしょう。

もしくは、「$key_sub_color」をも「$key_color」から計算式化し、サイトの色調統一感を目指すのも良いかもしれません。

thx.jp ではこの様な記述としました。

 $thx_ruriiro: hsla(217, 68%, 37%, 1.0); 
 $thx_amairo: hsla(199, 75%, 52%, 1.0); 
 $thx_mizuiro: hsla(188, 48%, 82%, 1.0); 

 $white: #fff; 
 $sub_menu_hover_bg_color: #333; 
 $border_color: #ccc; 

 $key_color: $thx_ruriiro; 
 $key_sub_color: $thx_amairo; 
 $bg_color: change-color($key_color, $lightness: 95%); 
 $key_color_thin: fade-out($key_color, 0.95); 
 $h_bk_color: lighten($key_color, 40%); 

「style.scss」全体としてはこうなります。

 // compileExpanded: ../$1.css 
 /* 
   Skin Name: thx 
   Description: thx.jp にて scss 勉強用に作成
   Skin URI: https:// 
   Author:  がっきぃ
   Author URI: https://thx.jp 
   Screenshot URI: https:// 
   Version: 0.0.1 
   Priority: 0 
 */ 
 /* 以下にスタイルシートを記入してください */ 
 $thx_yamabukiiro: hsla(43, 100%, 48%, 1.0); 
 $thx_nanohanairo: hsla(49, 100%, 45%, 1.0); 
 $thx_tanpopoiro: hsla(51, 100%, 50%, 1.0); 
 $thx_himawariiro: hsla(47, 100%, 49%, 1.0); 
 $thx_tankou: hsla(49, 88%, 76%, 1.0); 
 $thx_kihadairo: hsla(55, 98%, 69%, 1.0); 

 $thx_ruriiro: hsla(217, 68%, 37%, 1.0); 
 $thx_amairo: hsla(199, 75%, 52%, 1.0); 
 $thx_mizuiro: hsla(188, 48%, 82%, 1.0); 

 $white: #fff; 
 $sub_menu_hover_bg_color: #333; 
 $border_color: #ccc; 

 $key_color: $thx_ruriiro; 
 $key_sub_color: $thx_amairo; 
 $bg_color: change-color($key_color, $lightness: 95%); 
 $key_color_thin: fade-out($key_color, 0.95); 
 $h_bk_color: lighten($key_color, 40%); 

 // 基本要素
 @import "base"; 
 // グローバルナビ
 @import "navi"; 
 // 見出し
 @import "h"; 
 // 追加
 @import "add"; 
 // 勉強用
 @import "thx";

既存のカスタマイズを追加する

追加用の scss

例えばこの記事の様なカスタマイズをしていた場合、 thx.jp では Cocoon Child のスタイルシート (style.css) ではなく、 skin 内のスタイルシート (style.css) に css を追加をしていました。

scss 化に於いては、 skin 内の「style.css」は「style.scss」をコンパイルする度に上書きされてしまうので、これを回避するには

追加する css の記述先を Cocoon Child のスタイルシート (style.css) に変更する。
追加する css も scss 化する。

のどちらかの手法を選択する必要があります。

判断基準としては、追加する css の内容が、 skin を使用している全サイトに適用された場合の問題アリナシでよいかと思います。

問題がなければ、前回の様に「thx.scss」内に

 /*  コード改行禁止  */ 
 pre { 
   word-wrap: normal; 
   overflow-wrap: normal; 
   word-break: normal; 
   code { 
     word-wrap: normal; 
     overflow-wrap: normal; 
     font-size: 1rem; 
     line-height: 1rem; 
     span { 
       word-wrap: normal; 
       overflow-wrap: normal; 
     } 
   } 
 }

の記述を追加すると、コンパイルされた「style.css」内に

 /*  コード改行禁止  */ 
 pre { 
		 word-wrap: normal; 
		 overflow-wrap: normal; 
		 word-break: normal; 
 } 

 pre code { 
		 word-wrap: normal; 
		 overflow-wrap: normal; 
		 font-size: 1rem; 
		 line-height: 1rem; 
 } 

 pre code span { 
		 word-wrap: normal; 
		 overflow-wrap: normal; 
 }