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

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

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

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

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

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

 


 


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

最近よく見かけるスタイルですね。テーマ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テクニック icon-external-link │PresentNote

 

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

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

このようになります icon-hand-o-down

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

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

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

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

icon-star-o main-navigation:グローバルナビの事です。

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

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

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

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

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

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

 

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

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

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

.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のパーセントを少なめに設定することで帯が少しだけ飛び出る感じにしてみました。

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

 

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

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

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

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

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

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

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

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を装飾するとキャッチフレーズも装飾されます。

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

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

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

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

こうなります icon-hand-o-down

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;
}

こうなります icon-hand-o-down

なお、これらはh1をh2に書き換えれば、記事中の見出しとしても使えます。

もっと色々試してみたいという方は、サルワカ icon-external-link さんのサイトがとても参考になると思います。テーマが違うと調整は必要かもですが、シンプルな装飾ならそのままコピペでも行けるかと思います。

参考サイト☞CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選 icon-external-link │サルワカ

おすすめの組み合わせ(まとめ)

色々試してみたいけれど、だんだん何がいいのか分からなくなりますよね(笑)

これまでご紹介した物を組み合わせて(一部変更して)、コピペ一発でカスタマイズが完了するようにしてみました。

※あくまでテーマSela用です。まぁ、テーマによってはこのままで使えるのもあるかも?

.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%;
}

.main-navigation{
 background:#f57a78;
 border-top: 1.25px dashed;
 border-bottom: 1.25px dashed;}

.menu-toggle{background:#f57a78;}

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;
}

h2{
padding-bottom: 0.5em;
border-bottom: solid 1.5px #ddd;
}

こうなります icon-hand-o-down

Selaというテーマは結構シンプルな見た目なので、どちらかと言うと自分であれこれカスタマイズしたい人に向いているかもしれません。

色々試してみて、自分好みのサイトを作ってくださいね♪

☞こちらの記事も併せてどうぞ!

icon-clock-o 2017-12-20 icon-rotate-left  icon-user ちびこママ

あなたのシェアが励みになります!

Google+  B! Hatena  LINE  Pocket