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

 .footer { 
   padding-top: 0px; 
   background-color: $key_color; 
 } 

前回のヘッダー周りのカスタマイズと同様に、 padding を外し背景色を設定します。

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

 .footer-bottom-logo .site-name-text { 
   font-size: 2rem; 
 } 

ロゴを大きくします。

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

 .navi-footer-in a { 
   color: $white; 
 } 

 .footer-bottom-content { 
   color: $white; 
   .copyright { 
     margin-top: 2px; 
   } 
 } 

文字の色を白に指定します。

併せて、 行間も調整しています。

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

 .go-to-top-button{ 
   background-color: $key_sub_color; 
 } 

「トップへ戻るボタン」 が背景と同色化してしまうので、 サブカラーで着色します。

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

thx.jp はレンタルサーバの XSERVER 上で稼働しており、 当初より XSERVER の機能であるモリサワの Web フォントを使用しています。

 // 基本フォントファミリー
 $thx_font_family: 
     'Hiragino Sans', 
     'Hiragino Kaku Gothic ProN', 
     Meiryo, 
     sans-serif; 

基本となる書体名を変数化しておきます。

「游ゴシック」 はあまり好きではないので 「メイリオ」 にしています。

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

 // デフォルト設定
 body { 
   font-family: "UD 新ゴ コンデンス 90 L", 
     $thx_font_family; 
   -webkit-font-smoothing: antialiased; 
   -moz-osx-font-smoothing: grayscale; 
 } 

サイトの基本となる書体を指定します。

"UD 新ゴ コンデンス 90 L" の様に、 上記の基本フォントファミリーよりも優先したい書体がある場合は 「$thx_font_family」 よりも前に記述します。

 // アンチエイリアス効果抑制
 .sub-antialiased { 
   -webkit-font-smoothing: subpixel-antialiased; 
   -moz-osx-font-smoothing: auto; 
 } 

局所的にアンチエイリアスの効きを抑えたい場合のクラス指定をしておきます。

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

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

前回、 サイドバーの文字に強さを感じたため文字サイズを小さくしたのですが、 アンチエイリアス化によりスッキリし過ぎたので、 大きさを少し戻します。

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

 // サイト名
 .site-name-text { 
   font-family: $thx_font_family; 
   font-weight: 800; 
 } 

サイト名の書体を指定します。

前回、 「font-family: 'Hiragino Kaku Gothic StdN', 〜」 と指定しましたが、 「font-weight: 800;」 のウェイト指定に変更します。

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

 // 各ページタイトル
 .entry-title, 
 .archive-title, 
 h1 { 
   font-family: " 新ゴ  B", $thx_font_family; 
   font-weight: 700; 
 } 

投稿タイトルやカテゴリータイトルの書体を指定します。

Web フォントの " 新ゴ B" を最優先とし、 使用不可な場合は基本フォントファミリーに 「font-weight: 700;」 を指定します。

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

 // キャッチフレーズ、 各見出し、 白抜き文字
 .tagline, 
 h2, 
 h3, 
 h4, 
 h5, 
 h6, 
 .sidebar h3, 
 .widget-entry-cards.large-thumb-on .card-title, 
 .cat-label { 
   font-family: " 新ゴ  R", $thx_font_family; 
   font-weight: 600; 
 } 

各種見出しや、 アンチエイリアス化により視認性が低下する恐れのある白抜き文字など、 本ページ 2-1-2 の指定よりも太くしたい箇所の 「font-weight」 を設定します。

また、 アンチエイリアス対策としては文字を太らせる方法以外に、

 .cat-label { 
   @extend .sub-antialiased; 
 } 

と、 本ページ 2-1-3 で設定したクラスを継承する方法もあります。

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

 //admin パネル
 .admin-panel { 
   font-family: sans-serif; 
 } 

原因はよく分かりませんが、 本ページ 2-1-2 を指定するとアドミンパネルが文字溢れを起こしたため、 シンプルなゴシック系を指定します。

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

 /* under-entry-content  の並び順  */ 
 .under-entry-content { 
   display: flex; 
   flex-direction: column; 
   .related-entries { 
     order: 2; 
   } 
   .pager-post-navi { 
     order: -1; 
   } 
   .comment-area { 
     order: 3; 
   } 
 } 

親要素である 「under-entry-content」 クラスに 「display: flex;」 で子要素の並び順変更を可能にし、 「flex-direction: column;」 で縦並びを指定します。

子要素の並び順は 「order: 」 の数字に低い順に並ぶので、 前後の記事 （pager-post-navi） が最初に表示されます。

ここで指定していない自動広告などの子要素は 「order: 0;」 となるので、 この css の場合は 「前後の記事」 と 「関連記事」 の間に自動広告が入ります。

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