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

スポンサーリンク

前回やり忘れていた事

前回 まとめ までして終わった気になり 全く気付いていなかったのですが

フッター周りが手付かずでした

疾く疾くとっととカスタマイズしていきます

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

フッターのカスタマイズ

コンパクト化&着色

 .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 になります

これらのカスタマイズでこの様になりました

今回のカスタマイズ

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 よりも前に記述します

また 2 つの -font-smoothing 行にて 画面表示される文字のアンチエイリアス化を指示します この結果 細い文字や白抜き文字などの視認性が低下する事があるので注意が必要です

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

アンチエイリアスの効果抑制

 // アンチエイリアス効果抑制
 .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 パネル
 .admin-panel { 
   font-family: sans-serif; 
 } 

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

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

参考記事

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

under-entry-content の並び順

各記事の最下部 under-entry-content には

  • 各記事の最下部 under-entry-content
    • 関連記事(related-entries)
    • 前後の記事(pager-post-navi)
    • コメント(comment-area)

が並んでいますが 前後の記事 関連記事 よりも上に表示される様にします

display: flex; order: -1;

 /* 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 になります

参考記事

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

コメント