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

前回の続きとなります

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

前回のおさらい

skin-colors-yellow をベースにカスタマイズ

skinなし
着色のみ

前回 スキンでの着色を行った結果 Cocoon オリジナルのシンプルなデザインから青色を基調としたデザインに変更されました 上記が比較画像となります

この時点でのスキンによって変更された箇所は

  • カスタマイズのベースとなった skin-colors-yellow によるスタイル変更
    • タイトルを含む、h1〜h6のデザイン
    • サイドバーのカテゴリー周り
  • thx.jp にて青系統を着色

などとなってます ここから更に手を加えていきます

今回のカスタマイズ

下準備

前々回のおさらいになりますが

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

style.scss @import "thx"; の記述を追加し

 // main: style.scss 

style.scss と同じ階層に thx.scss 作成し 一行目に // main: style.scss を記述します

サイト名とタイトル名

まず 最初に手を加えたいのはサイト名とタイトル名です 現状ではとてもあっさりしてますので もう少し目立つスタイルに変更します 具体的には

  • 影付き白抜き文字にする
  • サイト名の書体変更
  • サイト名周りのスカスカ感をなくす
  • タイトル名は文字詰めをしたい

といったところです

影付き白抜き文字

 /*  白抜き影付き文字  */ 
 .site-name-text, 
 .entry-title, 
 .archive-title { 
   color: white; 
   text-shadow: 0.075em 0.075em 0.02em rgba(0,0,0,0.21); 
   background-color: $key_color; 
 } 

ありきたり的なデザインですが 好きなんですよ

特段な説明はありませんが .site-name-text .entry-title とでは扱う font-size の値が異なってますので 影の移動分を em 準拠にしています

追加先は thx.scss になります

サイト名の書体

 /*  サイト名  */ 
 .site-name-text { 
	 font-size: 3rem; 
	 line-height: 1.5em; 
	 font-family: 'Hiragino Kaku Gothic StdN', Meiryo, Helvetica, Arial, sans-serif; 
 } 

ヒラギノ好きです Apple 製の端末しか手元にないので 他の環境では未検証です

追加先は thx.scss になります

サイト名周りのスカスカ感

 .logo-text { 
     padding: 0; 
 } 

padding を外します

追加先は thx.scss になります

タイトル名の文字詰め

 /*  投稿タイトル  */ 
 .entry-title, 
 .archive-title { 
	 font-size: 2rem; 
	 font-feature-settings : "palt"; 
	 letter-spacing: 0.025em; 
	 margin: 0px; 
	 padding: 12px; 
 } 

font-feature-settings : "palt"; で文字詰めを行います

若干 詰まり過ぎに感じたので letter-spacing: 0.025em; でゆとりを持たせています

追加先は thx.scss になります

ここまでのカスタマイズでこの様になります

ちょっと引き締まってきました

見出しの変更

タイトル名である h1 までのカスタマイズが済んだので h2 h6 のカスタマイズを行います

今回は勉強の意味も込めて 各見出しに連番を振っていきます 実用性は問いません

初期設定

 /*  タイトルカウンター  */ 
 .article h2, 
 .article h3, 
 .article h4, 
 .article h5, 
 .article h6 { 
   position: relative; 
   padding-top: 0.5rem; 
   padding-bottom: 0.5rem; 
   padding-left: 0.5rem; 
   padding-right: 0.5rem; 
   &::after { 
     position: absolute; 
     right:  4px; 
     bottom:  0px; 
     font-family: 'Hiragino Kaku Gothic StdN', Meiryo, Helvetica, Arial, sans-serif; 
     line-height: 1em; 
     color: fade-out($key_sub_color, 0.5); 
     transition-duration: 0.3s; 
   } 
   &:hover::after{ 
     color: fade-out($key_sub_color, 1); 
     transition-duration: 0.3s; 
   } 
 } 

各見出しに共通する項目を設定します

&::after で連番の初期設定

&:hover::after でマウスオーバーやタップ時には連番を表示しない様にします 見出しの文字数が多い場合や 端末の表示幅が狭い場合などは見出しと連番が重なる場合がありますので 一応の回避手段です

追加先は thx.scss になります

h2

 .article h2 { 
   font-size: 2rem; 
   line-height: 2.5rem; 

   counter-increment: c-h2; 
   counter-reset: c-h3; 

   color: $white; 
   background-color: $key_color; 

   &::after{ 
     font-size: 4rem; 
     content: counter(c-h2) "."; 
   } 
 } 

h2 の設定です

counter-increment: c-h2; c-h2 をカウントアップし content: counter(c-h2) "."; で表示します

また counter-reset: c-h3; で手前の h2 見出し内で使用された h3 のカウントをリセットします

追加先は thx.scss になります

h3

 .article h3 { 
   font-size: 1.5rem; 
   line-height: 2rem; 

   counter-increment: c-h3; 
   counter-reset: c-h4; 

   background: linear-gradient(90deg, $h_bk_color, $white); 
   border: none; 

   &::after{ 
     font-size: 3rem; 
     content: counter(c-h2) "-" counter(c-h3); 
   } 
 } 

h3 の設定です

背景色に $h_bk_color を使いたかったのですが 連番との色差が少ないためグラデーションにしました

border: none; Cocoon オリジナルで使用されている h3 の枠線を外します

追加先は thx.scss になります

h4 h6

 .article h4, 
 .article h5, 
 .article h6 { 
   border-color: $h_bk_color; 
 } 

 .article h4 { 
   font-size: 1.25rem; 
   line-height: 1.75rem; 

   counter-increment: c-h4; 
   counter-reset: c-h5; 

   &::after{ 
     font-size: 2rem; 
     content: counter(c-h2) "-" counter(c-h3) "-" counter(c-h4); 
   } 
 } 

 .article h5 { 
   counter-increment: c-h5; 
   counter-reset: c-h6; 

   &::after{ 
     font-size: 1.25rem; 
     content: counter(c-h2) "-" counter(c-h3) "-" counter(c-h4) "-" counter(c-h5); 
   } 
 } 

 .article h6 { 
   counter-increment: c-h6; 
   counter-reset: c-h7; 

   &::after{ 
     font-size: 1rem; 
     content: counter(c-h2) "-" counter(c-h3) "-" counter(c-h4) "-" counter(c-h5) "-" counter(c-h6); 
   } 
 } 

h4 h6 の設定です

デザイン自体は Cocoon オリジナル のものをそのまま使わせていただき 色のみ変更しています

追加先は thx.scss になります

skin-colors-yellow のコメントアウト

 // main: style.scss 
 .sidebar h3{ 
   background: transparent; 
   padding: 0.4em; 
   margin: 0.3em 0; 
 } 

 //.article h2 { 
 //  background: $h_bk_color; 
 //  border-left: solid 5px $key_color; 
 //} 


 //.article h3 { 
 //  border: none; 
 //  border-left: solid 5px $key_color; 
 //} 

 // .article h3 { 
 //   border: none; 
 //   font-size: 23px; 
 //   border-bottom: 5px solid #e7e7e7; 
 //   padding: 10px 0; 
 // } 

 //.article h4 { 
 //  border: none; 
 //  border-bottom: 6px solid $h_bk_color; 
 //} 

 //.article h5, 
 //.article h6{ 
 //  border: none; 
 //} 

 blockquote::before, blockquote::after{ 
   content: "  "; 
 } 

 // //768px 以下
 // @media screen and (max-width: 768px){ 
 //   .article h1, .entry h2 a, #archive-title, .article h2, .article h3, .article h4, .article h5 .article h6, .article h3, #comment-area h2, #related-entries h2{ 
 //     font-size: 20px; 
 //   } 
 //   .article h2{ 
 //     margin: 40px 0; 
 //     padding: 14px; 
 //   } 
 // } 

 // //480px 以下
 // @media screen and (max-width: 480px){ 

 // } 

skin-colors-yellow が使用している h2 h6 のスタイル設定をコメントアウトします

作業するファイルは style.scss と同じ階層にある h.scss になります

thx.scss と同様に 一行目に // main: style.scss を追加します

ここまでのカスタマイズでこの様になります

サイドバーのカスタマイズ

サイドバーにも少し手を加えます

文字を小さく

 /*  サイドバーの文字を小さく  */ 
 .sidebar { 
   font-size: 0.75rem; 
   line-height: 1.25em; 
 } 

サイドバー内の文字に強さを感じるので小さくします

追加先は thx.scss になります

ウィジェットのタイトル

 /*  サイドバーウィジェット  */ 
 .sidebar h3 { 
   color: $white; 
   background-color: $key_color; 
   padding: 0.4em; 
   margin: 0.3em 0; 
 } 

ウィジェットタイトルが目立っていないので白抜き文字にします

追加先は thx.scss になります

skin-colors-yellow のコメントアウト

 // main: style.scss 
 //.sidebar h3{ 
 //  background: transparent; 
 //  padding: 0.4em; 
 //  margin: 0.3em 0; 
 //} 

 //.article h2 { 
 //  background: $h_bk_color; 
 //  border-left: solid 5px $key_color; 
 //} 


 //.article h3 { 
 //  border: none; 
 //  border-left: solid 5px $key_color; 
 //} 

 // .article h3 { 
 //   border: none; 
 //   font-size: 23px; 
 //   border-bottom: 5px solid #e7e7e7; 
 //   padding: 10px 0; 
 // } 

 //.article h4 { 
 //  border: none; 
 //  border-bottom: 6px solid $h_bk_color; 
 //} 

 //.article h5, 
 //.article h6{ 
 //  border: none; 
 //} 

 blockquote::before, blockquote::after{ 
   content: "  "; 
 } 

 // //768px 以下
 // @media screen and (max-width: 768px){ 
 //   .article h1, .entry h2 a, #archive-title, .article h2, .article h3, .article h4, .article h5 .article h6, .article h3, #comment-area h2, #related-entries h2{ 
 //     font-size: 20px; 
 //   } 
 //   .article h2{ 
 //     margin: 40px 0; 
 //     padding: 14px; 
 //   } 
 // } 

 // //480px 以下
 // @media screen and (max-width: 480px){ 

 // } 

skin-colors-yellow が使用している .sidebar h3 のスタイル設定をコメントアウトします

作業するファイルは style.scss と同じ階層にある h.scss になります

thx.scss と同様に 一行目に // main: style.scss を追加します

ここまでのカスタマイズでこの様になります 今回はここまでにします

まとめ

今回のカスタマイズを行うに当たって強く感じたのは Cocoon は本当にカスタマイズのしやすい作りをされている事です 元がシンプルなだけに カスタマイズする際の打ち消しが少なくすみますので とてもありがたいです

この様なテーマを提供してくださっている わいひらさんに改めて感謝です

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

コメント