初心者でもできるcocoonのカスタマイズ【コピペ可】

web・wordpress
この記事は約3分で読めます。

WEBデザイナーらしく、簡単にできるcocoonのカスタマイズ方法を書いてみようと思います。

cocoonはhtmlやcssの知識がなくてもかなりカスタマイズできるので、ここではCSSを編集しないとできないけれど、コピペでできるカスタマイズをご紹介します。

カスタマイズに最低限必要なこと

  • FTP操作ができる
  • wordpressの管理画面からテンプレートの編集ができる

編集するファイルは「cocoon」の子テーマの「style.css」です。

※必ず子テーマで編集してください!!親テーマだと自動更新で上書きされたり、レイアウト崩れが起きた時に戻せなくなります!

サイドバー内のウィジェットタイトルのカスタマイズ

ウィジェットタイトルの背景色を変更する方法

.widget-sidebar-title{
	background-color: #000;
}

「background-color」のコードが背景色の指定になります。

「#」で始まる3桁もしくは6桁の数字が色コードになります。

いわゆるベタ塗りの状態で背景色を指定する場合は上記のコードだけで変更可能です。

ちなみに「#000」は黒で、「#fff」は白になります。

ウィジェットタイトルの文字色を変更する方法

ウィジェットタイトルの背景色を変更したら、文字の色も変更した方がいいです。

.widget-sidebar-title{
	color: #fff;
}

「color」は文字色の変更です。

CSSは1つの項目につき、複数指定ができます。

背景色と文字色を両方変更する時は下記のように指定します。

.widget-sidebar-title{
	background-color: #000;
	color: #fff;
}

上記の指定は、背景色が黒で、文字色が白という設定です。

色コードの確認方法

ウィンドウズならペイントでも確認できますし、他にもいろいろ方法がありますが、WEB上でも簡単に調べることができます。

HTMLカラーコード
HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

ウィジェットタイトルの背景色をグラデーションにする方法

応用編になりますが、背景色をグラデーションにすることも可能です。

このブログでもグラデーションにしています。

グラデーションにするコードは下記のサイトで作成するのがおすすめです。

Free Gradients Collection by itmeo.com
Free collection of 180 background gradients that you can use as content backdrops in any part of your website.

上記サイトは、あらかじめグラデーションのパターンが決まっていて、その中から好きなグラデーションのCSSコードをコピペできるという優れものです!

自分でグラデーションを指定してもいいのですが、CSSカスタマイズの難易度も上がるし、デザインセンスも必要になってくるので、ちょっとハードルが上がります。

好きなグラデーションを選んだら、右下の「Copy CSS」をクリックして、CSSコードを入手します。

そのままstyle.cssにコピペでOK。

.widget-sidebar-title{
	background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
}

文字色の変更も可能です。

.widget-sidebar-title{
	background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
	color: #333;
}

文字色のグラデーションも可能ですが、背景にグラデーションをかけるなら、文字色は単色の方がいいと思います。

ウィジェットタイトルを非表示にする方法

これはテーマ作者のわいひら様がカスタマイズ方法を公開されています。

ウィジェットタイトル入力欄先頭に!を挿入すると公開ページでウィジェットタイトルが表示されない仕様になっています
ウィジェットタイトルを手軽に非表示にする方法の紹介です。ウィジェットタイトルの利便性を損なわず利用できる方法です。
web・wordpress
スポンサーリンク
free-mom

コメント

タイトルとURLをコピーしました