このブログで使っている『SWELL』のCSSカスタマイズコード＆カスタマイズ手順

2023年2月15日

細かい見た目は、CSSで

弊ブログで使用中のWordPressテーマ『SWELL』は、設定が超柔軟でほとんどのことは実現できるんですが、、細かい部分の見た目を変えたりするのはテーマの機能だけだと厳しめ。。

なので、そういった部分はCSSカスタマイズなどが必要になります。

そこで今回は、
このブログで施している『SWELL』のCSSカスタマイズコードを一部ご紹介しようと思います。

ただ先にお伝えしておくと、、め〜〜っちゃ細かいカスタマイズなので、どれだけ参考になるのか不明…笑。なので、他のWordPressテーマでも参考になるよう「ぼくが普段どうやってカスタマイズしてるか」や「テスト環境の作り方」も触れています。

使っているCSSカスタマイズ一覧

今回ご紹介するコードは、『SWELL』でコピペすれば同じようにカスタマイズすることができるようになってます。

外観（カスタマイズ）
＞テーマエディター
＞style.css（SWELL CHILD）

の順で画面遷移して、そこに貼り付けで反映されるはず。

ただ前提として、ぼくはWEBデザインとかプラグラミングに詳しいわけじゃなく、むしろ完全なド素人。HTML/CSSもブログを始めてから自分でちょっと触って覚えただけです。笑

なのでもしかしたら変な書き方になってたりするかもしれないので、その点は予めご了承ください。

あと一応、以下の点もご留意ください。（CSSカスタマイズにおける定型句的なやつ）

バックアップは忘れずに
不安ならテスト環境などで試してみること
カスタマイズは自己責任でお願いします

では、具体的なカスタマイズをご紹介していきますね。

プロフィールボックスの余白を消す

『SWELL』のプロフィールウィジェットでは背景画像を設定することができるんですが、その際にちょっとだけ余白があるんですよね

余白ない方がカッコ良さそうだったので、消すことにしました。

.p-profileBox{
padding:0px;
}

余白が消えて、「こなれ感」(?)が出てくれたんじゃないでしょうか。

いきなり細か過ぎるカスタマイズで驚かれたかもしれませんが、こんなのが続きます笑。

カテゴリページのアイキャッチ画像の線を消す

『SWELL』では、何故かカテゴリページのアイキャッチだけ囲い線がついてるんですよね。

投稿ページのアイキャッチは線がなく、邪魔だったので消しております。

.p-termHead{
border:0px;
}

SWELLのカテゴリページのアイキャッチ画像の囲い線を消した画像 — カスタマイズ後

これでスッキリしてくれました。

日付、パンくずリストの文字色変更

デザインにおいては「あった方がいいけど、目立たせるべきではない」ものもあると考えてます。

ぼくの中では、日付やパンくずリストといった情報などがそれ。

これらは間違いなくあった方が良いけど、目立たせ過ぎるとタイトルの印象が薄くなっちゃう気がして…（考えすぎ？）

というわけで、
これらのテキストカラーを薄くしております。

.p-articleMetas,
.p-breadcrumb{
color:#999999;
}

文字色を変えたい場合は「#〜」の部分を好きなカラーコードに変えればOKです。

目次の文字の太さをカスタマイズ

ブログにおいて「目次」ってかなり重要で、実はめちゃくちゃクリックされてる（見られてる）部分。見た目にはこだわりたいところなのです。

『SWELL』デフォルトの目次だと、見出し２（h2）と見出し３（h3）のフォントがほぼ同じで、パッと見で「階層の上下が見分け辛いなぁ」と感じました。

なのでフォントの太さなどを少しずつ変更しております。

ul.p-toc__list li {
color:#333;
font-weight:bold;
}
ul.p-toc__list li li {
font-weight:normal;
color:#666;
}
.p-toc__ttl{
font-weight:bold;
color:#000;
}
.p-toc__ttl::before{
font-weight:normal;
}
.p-toc {
margin-bottom:16px!important;
}

目次自体が目立つようになったし、
見出し２と見出し３の階層上下が分かりやすくなってくれてるんじゃないでしょうか。

タグクラウドのデザイン変更

このブログではタグを「特集」的に使っていて、今のところ6個だけ設定しています。

しかしデフォルトのタグクラウドだと、数が少ないとボタンが小さくて微妙…

というわけで、カテゴリクラウドの見た目と同じように合わせることとしました。

.widget_tag_cloud .tagcloud a,
.wp-block-tag-cloud a{
font-size:inherit!important;
background:none;
width:100%;
display:block;
border-bottom:dotted 1px var(–swl-color_border);
padding: 0.75em 1em 0.75em 0.5em;
}
.widget_tag_cloud .tagcloud a:before,
.wp-block-tag-cloud a:before{
content: “\e935”;
font-family: icomoon!important;
color: inherit;
padding-right:6px;
display: inline-block;
opacity: .85;
font-size:0.85em;
}