お手軽CSS変更方法(サイドバー見出しのデザイン変更)

CSSってなんか難しいイメージありませんか？

自分のまとめブログを持っているなら、CSSに対する知識は多少は必要です。が、そこまで必死に勉強することはありません。

私はCSSについて勉強したことはありません。全て感覚でいけます。

要はポイントです。重要なところがわかればＯＫです。

お手軽にCSSを変更することができるので、その方法をお伝えします。

今回はサイドバー見出しのデザインを変更したいと思います。

ルクセリタスのサイドバーの見出し

サイドバーの見出しとは下記画像の矢印部分です。

デフォルト状態だと何も装飾が無く、あまりパッとしません。今回はこの見出しを装飾したいと思います。

Googleクロームで「検証」を行う

まずはデザイン変更したい箇所の名前を知りたいので、それを調べます。

見出しの部分にマウスカーソルを合わせて、右クリックを押します。そして、検証を選択します。

するとよくわからない画面になりますが、落ち着いて、右側の「h3 class=”side-title”」にマウスカーソルを合わせます。

すると左側のサイドバー見出しのところに「h3.side-title」というのが表示されます。

この「h3.side-title」というのがサイドバー見出しの変更箇所の名前です。これを覚えておけばＯＫです。

どのようなデザインにするか選択する

これは0から作ると難しいので、まずはベースとなるデザインをコピペで選択します。

サルワカ | サルでも分かる図解説...

CSSのコピペだけ！おしゃれな見出しのデザイン例まとめ68選 h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

このサイトがわかりやすいです。

自分が良いと思った見出しデザインのCSSコードをコピーします。今回は仮にこれにします。

以下の部分をコピーします。

h1 {
background: #dfefff;
box-shadow: 0px 0px 0px 5px #dfefff;
border: dashed 2px white;
padding: 0.2em 0.5em;
}

https://saruwakakun.com/html-css/reference/h-design

スタイルシートに貼り付ける

ダッシュボード→テーマエディター→スタイルシートでも変更可能です。が、今回はルクセリタスなので、ルクセリタスの編集画面から説明します。

ルクセリタスの独自メニューから「子テーマの編集」を選択します。その後「style.css」を選択。

先ほどのサルワカさんに書いてあったCSSコードを一番下に貼り付けます。

そして、「h1」の部分を検証で調べた「h3.side-title」に書き換えます。その後保存。

これでサイドバーの見出しが変更されているか確認してみましょう！

おお、バッチリですね！

これがCSS変更の方法です。こんな感じでカスタマイズしてオリジナリティのあるブログが作れます。

あとは、

background: #dfefff;

の数値を弄って色を変更することもできます。

まとめ

デザインの変更は案外簡単にできるものです。

クラスがどうとか、ソースコードを覚える必要はありません。（もちろんCSSの勉強をした方が良いのは間違いないです。）

検証機能を使って変更箇所を調べて、コピペで書き換えるだけ。

あとはちょこちょこ数値を変更して独自性を出せば、自分のオリジナルブログが完成します。

ぜひあなたのブログの参考になればと思います。