前回の続きとなります。
- カスタマイズは自己責任でお願いします。
- wp-cocoon.comサイトのサポート対象外となります。
前回のおさらい
「skin-colors-yellow」 をベースにカスタマイズ
前回、 スキンでの着色を行った結果、 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 は本当にカスタマイズのしやすい作りをされている事です。 元がシンプルなだけに、 カスタマイズする際の打ち消しが少なくすみますので、 とてもありがたいです。
この様なテーマを提供してくださっている わいひらさんに改めて感謝です。
以下、 参考にさせて頂いたページです。
コメント