LION MEDIAの見出しデザインをCSSでおしゃれに変更

LION MEDIAの見出しデザインをCSSでおしゃれに変更

 

WordPressの無料テーマLIONMEDIAを使い始めて1か月が過ぎたので、そろそろサイトデザインをおしゃれにいじってみようと思い、見出しのデザインを変えてみました。

CSSの知識がないので勘と直感だけで見出しデザインの変更をしたのですが、意外とできたようです(笑)

LIONMEDIAには初めから、選べる見出しが16種類オリジナル見出しCSSでデザインできるようになってます。

WordPressの無料テーマで見出しデザインが16種類も選べるようになってるのが凄いのかはわかりませんがLIONMEDIAのテーマは人気があるみたいで、おしゃれさんが使ってる人も多いはず。それなら似たような見出しじゃなくてオリジナルの見出しを使って初心者ながらも抵抗したい。

 

 

LIONMEDIAサイドバー見出しをCSSで変更

 

そんなことで、まずはおしゃれ感を出すために何故かサイドバーの見出しからいじりだす私。

基本で使ってるLIONMEDIAの見出しは吹き出し風の見出しを使ってるんですけど、この吹き出し風の見出しの角を丸くしたくなりました。(見出しを丸くするだけでもおしゃれになると思ってる私)

 

 

今までのサイドバーの見出しデザインはこんな感じなのでなんか寂しい感じがしてました。

 

 

.heading.heading-widget {
	color: #fff;
	padding: 0.5em;
	display: inline-block;
	line-height: 1.3;
	background: # 5252f9;
	vertical-align: middle;
	border-radius: 25px 0px 0px 25px;
	width: 100%;
	border-bottom: none!important;
}

.heading.heading-widget::before {
	content: ' ';
	color: white;
	margin-right: 8px;
	border-bottom: none!important;
	border-color: transparent;
	position: static;
}

.heading.heading-widget::after {
	border-bottom: none!important;
	border-color: transparent;
	position: static;
}

 

 

寂しいサイトデザインにはしたくないと思い上のCSSをLIONMEDIAの追加CSSのところに急いでぶち込みます。子テーマのstyle.cssでも大丈夫です。

 

 

サイドバー見出しが丸くなりました!

でも「赤い…」赤いにもほどがあると思った私はカラーを変えるために、どこをいじればいいのかすらわからない。

いじりたいけどいじれない…

 

LIONMEDIAサイドバーの背景カラーをCSSで変更

 

幸いカラーコードってだけは知識として持ってるので追加CSSにぶち込んだCSS記述?でカラーコードの場所を確認。

カラーコードが書いてある部分が2か所あるので、どっちかが文字のカラーでどっちかが見出し背景色なはず。

color: #ffffff;background: # 5252f9;

なるほど、カラーコードだけを見るとbackgrundのカラーコードを好きなカラーコードに変えればいいのだな?と80%ほど確信。

念のためbackgrundの意味をGoogle師匠に確認。

なるほどね、backgrundは背景関連の指定ね。ということでbackgrundのカラーを自分色に染めていきます。

 

 

カラーコード表で調べるのは、めんどうなのでLIONMEDIAのカスタマイズから投稿スキンのところにある見出しの色の選択からカラーコードをコピペ。

 

⇑サイドバー見出しカラー変更作戦が成功したとっておきの画像です。

 

Advertisement

 

サイドバーの角丸をCSSで調整する

 

しかしここで気になりだしたのは、見出しの角丸をもっと丸くしたり丸くしなかったり自由自在に操る指定場所はどこなのかが知りたくてたまらなくなりました。

 

予想場所 border-radius: 25px 0px 0px 25px;

 

調べる前に、ほぼ予想だけで「ここだな?」と勘だよりなダメな私。

何故かというと、数字が4つあるから(笑) これって見出しの四つ角指定してるんでしょ?ってことになりました。

実際にborder-radiusの数字を色々と変更してみたら見出しの左上だけ角丸にできたりウィンナーを斜めに切った感じの見出しになったりしたので間違ってはいなかったと確信。

確信した後に恒例のGoogle師匠に確認にいきます(普通は調べるのが先…)

なるほど、backgroundによって与えられた背景とか.img要素で指定された画像の四隅も丸くすることができるらしいです。

この後も面白くて見出しを色んなウィンナ―見出しにしていましたが記事にすると長くなるので次にいきます。

 

 

サイドバーの見出しを角丸ウィンナー状態にしていましたが1日たってみて思った事があります。

「飽きた…」

見出しの角丸は「イイよねぇ」と思ってたけど実際に自分のサイトで見てると物足りなさが出てきたのと、色々なサイトを巡回にいくと見出し角丸信者がけっこういるんですよね。

なので見出し角丸は卒業します。

 

見出しにおしゃれ感をCSSで表現する

 

.heading.heading-widget {
 color: #ffffff;
 padding: 0.5em;
 display: inline-block;
 line-height: 1.3;
 background: #5252f9;
 vertical-align: middle;
 border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
 border-bottom: none!important;
}
.heading.heading-widget::before {
 content: ' ';
 color: white;
 margin-right: 8px;
 border-bottom: none!important;
 border-color: transparent;
 position: static;
}
.heading.heading-widget::after {
 border-bottom: none!important;
 border-color: transparent;
 position: static;
}
h2 {
 padding: 1em;
 border: 3px solid #ccc;
 border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}
h3 {
 padding: 1em;
 border: 3px solid #ccc;
 border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}
h4 {
 padding: 1em;
 border: 3px solid #ccc;
 border-radius: 3em .7em 2em .7em/.7em 2em .7em 3em;
}

 

 

手書き風の見出しなのですが、見出しh2からh4の見出しも変更してしまっています。

 

記事内の見出しは↑こんな感じです。

LIONMEDIAにある吹き出し風の見出しを設定したままの状態から、追加CSSに手書き風見出しのCSSをぶち込みました。

記事内は吹き出し風を残しながらの手書き風になったので、LIONMEDIAの見出し設定の種類によっては変わってくるんではないでしょうか。

 

 

サイドバーの見出しもしっかり手書き風の見出しになりました。

記事タイトル部分も手書き風になるので、ちょいオシャレ感が出たのかもしれません。

 

トップページの記事タイトルも見出しを変更したことでタイトル文字だけだった時よりは目が行くようになったかもしれませんね。

 

 

フッターも背景を黒にしておくと見出しの枠線がシンプルでちょいオシャレになってる感じになりました。

 

こんな感じでCSSの知識がなくても私のようにCSSを使ったふりをして見出し変更ができます(笑)

CSSを使ってサイトデザインを変更するときは念のため、バックアップをとってからやるのが安全ないじり方なので忘れずに。

 

CSSはおもしろい

 

WordPressテーマカテゴリの最新記事