筆者愛用マジで使える極寒余裕のベンチコート【寒いのが苦手な人に】

LION MEDIAのサイドバーの見出しデザインを変更する方法

LION MEDIAのサイドバーの見出しデザインを変更する方法

LIONメディアってかなりcoolでデザインの変更もクリックだけできて初心者に嬉しいテーマですよね。

ただ、使っていると欲が出てきます。「ココの部分をこうしたい!色とか形変えたい!」って。

やっぱりデザインってかなり大切だと思います。デザインをよくするだけでサイト滞在時間とかダイレクトに伸びますし、コンテンツの質はもちろん大事ですが、同じくらいデザインも大事です。

ということで、今回は備忘録もかねて、「らいおんメディアのサイドバーの見出し部分のデザインを変更する方法」について書いていきます。

コピペだけで完成しちゃいますよ。

サイドバーのデザインを追加CSSで変更

デザイン変更前のデフォルトでは下の画像のような感じです。

らいおんメディアのサイドバー(デフォルト)

「カテゴリー」や「最近の投稿」といった見出し部分の下に、自分で決めたテーマカラーのボーダーが文字の長さ分だけ伸びています。そしてそこからグレーのボーダー。

いや、悪くないんですよ!すごく洗練されていると思います!でも、私はもっとカテゴリーだぞ!って感じが分かるようにハッキリしたデザインにしたかったんですよね。

なので子テーマにCSSを追加して以下のような形にしました。

ハッキリと角ばったサイドバーデザイン!

どうでしょうか?ハッキリとした形になりましたよね。

追加したCSSコードは下記のとおり

/*サイドバー見出しデザイン*/
.heading.heading-widget {
	color: #ffffff;/*見出しの文字色*/
	padding: 0.5em;
	display: inline-block;
	line-height: 1.3;
	background: #2e94b9;/*見出し背景色*/
	width: 100%;
	border-bottom: none!important;/*下線を消す*/
}
.heading.heading-widget::before {
	content: ‘ ‘;
	color: white;
	margin-right: 8px;
	border-bottom: none!important;
}
.heading.heading-widget::after {
	border-bottom: none!important;
}

カラーは自分で好きなように変えればOK。また、border-radius.heading.heading-widget部分に記入して数値を指定すれば丸みのあるデザインも簡単に作れます。

丸みのあるデザイン!

どうでしょうか?Lionメディアって元がカッコいいから、ちょっと追加CSSに記述してあげるだけで、さらにカッコよくなりますよね。

私はまだまだ初心者ですので、少しずつ勉強して自分好みのデザインを完成させていきたいと思います。一緒に頑張りましょう!

らいおんメディアカテゴリの最新記事