コピペ一発！ワードプレス無料テーマSelaを追加CSSだけで可愛く簡単カスタマイズ♪

ちびこママです！
Chibiko_mama

ワードプレスでテーマのカスタマイズを行う場合は、なるべく「子テーマ」を作って編集をします。テーマ更新時にカスタマイズ内容が上書きされるのを防ぐためです。

☞WordPressテーマSelaの子テーマを作る手順

ですが、「追加CSS（カスタムCSS）」という機能を使えば、テーマの更新があっても追加CSSの内容が優先されるようです。子テーマを作るのがちょっと難しい・・・という方は、追加CSSだけでも手軽にカスタマイズするのもアリかと思います。

☞ワードプレスで追加CSSを使ってカスタマイズしてみる

Selaというテーマを使っている方はなかなかいないと思いますが、色々実験してみたので、コピペだけでサクッと見た目を変えられるテンプレートを書き留めておきたいと思います。

ヘッダー、グローバルナビ、フッターを横幅いっぱいに変更する
グローバルナビの色を少し明るく優しい色に
グローバルナビの色と枠線をちょっとガーリーな雰囲気に
フッターの色を少し明るく
タイトル（h1）をかわいくシンプルに装飾
おすすめの組み合わせ（まとめ）

ヘッダー、グローバルナビ、フッターを横幅いっぱいに変更する

最近よく見かけるスタイルですね。テーマSelaでも、以下の記述をこのまま追加CSSにコピペすれば横幅いっぱいにできます。

.site-branding{
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
}

.main-navigation{
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
}

.footer-widget-area{
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
}

.site-footer{
	margin-left: -500%;
	margin-right: -500%;
	padding-left: 500%;
	padding-right: 500%;
}

参考サイト☞【続】横幅いっぱいのヘッダーやフッターにするCSSテクニック │PresentNote

sela用にアレンジしているので、ちょっと補足します。

site-branding：タイトルやロゴが入る部分です。
main-navigation：グローバルナビです。
footer-widget-area：フッターのウィジェットエリアです。
site-footer：コピーライトが入る部分です。

このようになります

デフォルトではページの背景色に薄いグレーが設定されているので、「カスタマイズ」→「色」を選択して背景を白にすれば、よりそれっぽくなると思います。

グローバルナビの色を少し明るく優しい色に

テーマSelaのカラーは割と濃い目のピンク色なので、ちょっとだけ色味を変えたい方は以下の記述を追加CSSにコピペしてください。帯の色と、下枠線の色を変更しています。色や線の太さはお好みで。

.main-navigation{background:#FB7D79; border-bottom:solid 1.5px #ddd;}
.menu-toggle{background:#FB7D79;}

main-navigation：グローバルナビの事です。

background：帯の色です。#で始まる６桁の英数字で色を指定します。色見本
border-bottom：下線を指定できます。ここでは影代わりに使っています。

border-topで上線、border-leftで左線、border-rightで右線、borderのみで四辺の枠線を指定できます。

solid：実線を引きます。pxで線の太さ、#で色を指定します。

dottedと書くと点線、dashedは破線になります。pxで線の太さを変えると、見た目の雰囲気が変わりますよ。

menu-toggle：スマホなど幅の狭いデバイスで見た時に、レスポンシブデザインでグローバルナビが短くなります。この時の「メニュー」の背景部分のことです。

何も書かないと画像のように「メニュー」の部分だけ色が元のままになってしまうので、グローバルナビと同じ背景色を指定します。

当サイトでは、スマホで見た時のグローバルナビを思いっきりカスタマイズしています。上の画像の状態がデフォルトです。

グローバルナビの色と枠線をちょっとガーリーな雰囲気に

帯の色を変え、白の点線を使ってちょっとリボン風に。左右の帯が少しだけ飛び出るようにし、帯より少しだけ濃い色を左右の枠線に指定してみました。

.main-navigation{
 background:#f57a78;
 margin-left:-0.5%;
 margin-right:-0.5%;
 padding-left: 0.5%;
 padding-right: 0.5%;
 border-right: 3.5px solid #E67A7A;
 border-left: 3.5px solid #E67A7A;
 border-top: 1.25px dashed;
 border-bottom: 1.25px dashed;}

.menu-toggle{background:#f57a78;}

最初の「ヘッダー、グローバルナビ、フッターを横幅いっぱいに変更する」の応用で、margin-left/rightのパーセントを少なめに設定することで帯が少しだけ飛び出る感じにしてみました。

少しリボンを織り込んでいるような雰囲気になっているのではないかと思います

フッターの色を少し明るく

コピーライトが記載されているフッター部分の色も、少し濃いな・・・という方は、以下の記述をコピペしてみてください。

.site-footer{background:#757575;}
.site-footer a:hover{color:#FFB2AE}

背景色をデフォルトよりも少しだけ明るくしました。その分、テキストリンクにカーソルを当てると文字が見辛くなるので、ホバー色も変更しました

タイトル（h1）をかわいくシンプルに装飾

２色のアンダーラインで装飾する

Selaはデフォルトではhタグ（見出し）が味気ないです・・・。hタグも追加CSSで変更できます。例えば、ピンクとグレーの王道２色のアンダーラインを引きたいならこちら。

h1 {
position: relative;
padding-bottom: 0.5em;
border-bottom: 4.5px solid #ddd;
}

h1::after {
position: absolute;
bottom: -4px;
left: 0;
z-index: 2;
content: '';
width: 20%;
height: 4px;
background-color: #F6AFAA;
}

色や太さはお好みで。

※h1を装飾するとサイトタイトルも、h2を装飾するとキャッチフレーズも装飾されます。

ぜひステキなロゴを作って、カスタマイズ→「サイトのタイトル、キャッチフレーズ、ロゴ」→「サイトのタイトルとキャッチフレーズを表示」のを外し、代わりにロゴを追加してお洒落な感じに仕上げてください。

落ち着いた色のステッチ風に装飾する

色の組み合わせが難しいですが、ステッチ風も可愛いですよね。

h1{
background: #EAEAEA;
box-shadow: 0px 0px 0px 5px #EAEAEA;
border: dashed 1px #4EA1D5;
border-radius:5px;
padding: 0.2em 0.75em;
}

こうなります

border-radiusのpx数を大きくすると角を丸くできます。

淡い色の帯に折り込みと影をつける

デフォルトのグローバルナビやフッターの背景色が割と強めなので、こんな感じの帯もいいかなと思います。

h1{
position: relative;
padding: 0.5em;
background: #FBE9D6;
border-bottom: solid 0.2px #bbb;
border-right: solid 0.2px #bbb;
}

h1::before {
position: absolute;
content: '';
top: 100%;
left: 0;
border: none;
border-bottom: solid 15px transparent;
border-right: solid 20px #bbb;
}

こうなります