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

SWELLのCSSカスタマイズ記事のアイキャッチ画像
目次

右下のボタン()で目次まで戻れます

細かい見た目は、CSSで

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

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

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

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

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

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

  1. 外観(カスタマイズ)
  2. >テーマエディター
  3. >style.css(SWELL CHILD)

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

テーマエディターへの画面遷移方法

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

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

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

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

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

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

プロフィールの余白を消すビフォーアフター画像

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

カスタマイズ前

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

.p-profileBox{
padding:0px;
}

SWELLのプロフィールウィジェットの余白を消した
カスタマイズ後

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

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

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

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

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

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

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

.p-termHead{
border:0px;
}

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

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

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

ぱんくずリストや投稿日の文字色を変更するビフォーアフター

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

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

投稿ページのぱんくずリストや投稿日
カスタマイズ前

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

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

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

投稿ページのぱんくずリストや投稿日の文字色を薄くした
カスタマイズ後

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

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

目次の文字の太さを変更するビフォーアフター

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

目次のカスタマイズビフォー
カスタマイズ前

『SWELL』デフォルトの目次だと、見出し2(h2)と見出し3(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;
}

目次のカスタマイズアフター
カスタマイズ後

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

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

タグクラウドのデザイン変更ビフォーアフター

このブログではタグを「特集」的に使っていて、今のところ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;
}

タグクラウドのデザイン変更後
カスタマイズ後

良い感じに見た目を合わせられて、統一感が出てくれましたね。

自分でCSSカスタマイズする方法

これまでご紹介したCSSカスタマイズは正直細かすぎてほぼ参考にならなそうなので、ぼくがいつもやっているカスタマイズ方法もお伝えしておきます。(SWELL以外でも可)

ただ先にも述べました通り、完全にド素人の独学手順であることはご理解ください…笑

今回は例として、
記事タイトル(h1)部分を変更してみることにします。

デザイン変更の例として記事タイトルを変更する

まず、カスタマイズしたい部分があるページを「GoogleChrome」ブラウザで開いて、ページ上で右クリック→「検証」でデベロッパーツールを開きます(F12キーでも可)

GoogleChromeでデベロッパーツールを開く手順

デベロッパーツールの左上にある矢印のボタン?をクリックすると、ページ上にある要素が選択できるようになります。(Command+Shift+Cキーでも可)

デベロッパーツールで要素を選択するボタン
デベロッパーツールで要素を選択する

カスタマイズしたい箇所をクリックすると、デベロッパーツール画面で対象箇所がどんなコードで書かれているかが分かります

デベロッパーツールでクリックした部分の記述がわかる

その中に「class=”XXXX”」という記述があれば、対象箇所のCSSの名前が「XXXX」ってことが分かるので、それを指定してCSSを書けばOKって感じ。(今回の場合、XXXXは「c-postTitle__ttl」です)

書き方としては、
.XXXX{}
みたいに、XXXXの前に「.(ドット)」をつけて、{}内にコードを書いていきます。

すると、その内容がページに反映されるはずです。

CSSコードを反映した画面
これはセンス最悪

ただ今回説明した内容だけでは完全じゃなくて、反映できないパターンや変になるパターンもあるんで、その場合はいろいろと試行錯誤しまくって正解を見つけていく感じです…

ここでバシッと説明できればカッコいいんですが、これが素人の限界ですね…笑

あくまで自己流なんですが、「ここのデザインをちょっと変えたい…!」というときの参考になれば。

WordPressのテスト環境を作る方法

「カスタマイズを試行錯誤しまくりたいけど、表示が崩れて読者に変に思われたくない…」という方は、テスト環境を作っておくのをオススメします。

その名の通り、誰にも見られることなくテストするための環境のこと。

作り方は様々ですが、おそらく一番簡単なのはローカル(自分のPC)にWordPressを入れちゃう方法

読者にアクセスされるWEB上のブログはレンタル有料サーバー上にWordPressが入ってるんですけども、自分のPCにWordPressを入れれば誰にも見られず好きに弄れちゃうわけです。(最悪消し飛ばしてもOKなので、思い切ったカスタマイズも安心してできます)

Windowsであれば「XAMPP」、Macであれば「MAMP」などのソフトを使ってすぐに無料で作成可能。

Wordpressのローカル環境を作れるソフト「MAMP」
ぼくもMAMPを使ってテスト環境作ってます

詳しい作り方については、めちゃくちゃ丁寧に解説されてるサイトが山ほどあるので、"WordPress テスト環境 XAMPP(MAMP)"とかで検索していただければ。(他力本願マン)

『SWELL』が神過ぎるので

以上、『SWELL』のCSSカスタマイズコードの紹介自分でカスタマイズする方法などについて語ってきました。

「神は細部に宿る」と都合よく解釈して、細か〜いカスタマイズばかりでしたが…笑

見方を変えると、
『SWELL』の元のデザインがそれだけ優れているってこと。

デザインの設定も超柔軟で、「こんな見た目にしたいなー」ってのがたいてい実現できちゃうので、わざわざCSSを書く必要がほとんど無いんですよね。

そんな愛してやまない『SWELL』、WordPressでブログを始めるならマジでオススメなので、是非チェックしてみてください。

SWELLの購入はこちら

過去の記事でも『SWELL』の良さを語ってます。

以上です。
ご覧いただきありがとうございました。

目次
閉じる