[無料WordPressテーマ] Cocoonのアピールエリアをカスタマイズ!背景に半透明のカラーを被せてみた

無料WordPressテーマ Cocoon デモサイト カスタマイズイメージ

いつでもCocoonのサイトを作れるようにと実験的に自分用スキンを試行錯誤中ですが、Simplicityには無かったアピールエリアという機能にちょっぴり手を加えるとなかなかいい感じになりそうです。

とか言って自画自賛は否めませんが、こんな風にも出来ますよという事で当エントリーではそのカスタマイズ方法を紹介してみたいと思います。

アピールエリアのカスタマイズ内容

当エントリーのカスタマイズ内容はざっと以下のようになります。

  • コンテンツ部分の背景を透明に変更
  • アピールエリア全体の背景色を透過色に変更
  • タイトルとテキストの色を変更

たったこれだけなのでぶっちゃけ大した事はしていませんが、視覚的な効果はそれなりではないかと…単に私がこういうの好きなだけかもしれませんけどね?

ちなみに、こちらは私が作成したCocoonのデモサイトになります、当エントリーのカスタマイズ以外にもごにょごにょと色々やらかしてますが、とりあえずこんな感じになりますよーという事でひとつご参考までにどうぞ。

Cocoon設定からやっておく事

とりあえず、アピールエリアを作成して表示させない事には何も始まらないので、まずはCocoon設定 > アピールエリアを開いて必要な項目を設定します。

アピールエリアの表示
表示しない以外ならどれでも
エリア画像
背景に指定したい画像を設定

上記以外の項目は全てお好みでどうぞ。タイトルやメッセージ、ボタンに関しては必要なければ特に設定しなくても構いません。

カスタマイズ用のCSS

カスタマイズはCSSをコピペして、色を設定している部分だけ使いたい色に変更してもらえばOKです。CSSは外観 > テーマの編集からstyle.cssか、外観 > カスタマイズ > 追加CSSの好きな方にコピペしてご利用下さい。

透過度を確認しながらの作業は追加CSSの方がやりやすいですが、Cocoonの高速化設定によってはリアルタイムに反映されない場合があるかも…と言うかありました。

尚、その任意に変更する色の部分に関しては後ほど説明します。何となく見ればわかっていただけるかとも思いますけど一応。

アピールエリアのカスタマイズ
.appeal .appeal-in {
	width: 100%;
	background-color: rgba(0, 128, 128, .25);
}

.appeal-content {
	background-color: transparent;
}

.appeal-title,
.appeal-message {
	color: #fff;
}

色に関する部分のカスタマイズ

先ほどのCSSでハイライトした行がその部分にあたります。

背景に被せる透過色

まずは背景の透過色の変更からですが、この場合は通常の16進形式ではなくrgba形式になるので、まずは使用したい色を選んでそれを変換する必要があります

rgba形式とは?

ちなみにrgbaとはそれぞれ

  • R:Red(赤)
  • G:Green(緑)
  • B:Blue(青)
  • A:Alpha(アルファ、透明度、透過度)

を表しています。何とかの一つ覚えというやつで私は透過を多用したがる人なので、なにげにこのrgba形式を使用する事が多いです。

カラーサンプルサイトを参考に

ちょうどCocoon管理のボタンのところにリンクが貼られているので、そのサイトを利用させてもらうとしましょう。ボタン色の右にある黄色っぽい三角部分にカーソルをホバーさせるとこんな感じになるのでURLをクリックします。

Cocoon設定からカラーサンプルサイトへ

まずはこのサイトの中から使いたい色を探して下さい。実際には透過させるのでかなり薄い色になりますが、透過度をイジれば何とでもなるので薄い色を選んでもノープロブレムです。

私のサンプルではティール(teal:#008080)という緑っぽい色を使用していますが、ここでは青っぽい色にしてみたいと思います。色を選択して少しスクロールした位置にある詳細からRGB (sRGB)の部分を先ほどのCSSに転記します。今回私が選んだ露草色という色の場合は以下のようになっています。

選択した色のコードをrgb形式で取得

透過色を取得した色で設定

それでは透過色を先ほどのサイトから取得したカラーコードを使ってrgba形式で設定します。このサンプルでは透過度を0.25にしてあります。

背景の透過色をrgba形式で設定

	background-color: rgba(37, 149, 199, .25);

アピールエリアの背景を露草色の透過度0.25で設定

透過度は0が完全に透明で、1が無透過の状態なので、その範囲内で好みの濃さになるよう調整してみて下さい。下の例では透過度を0.25から0.5に変更してみました。

背景色の透過度を0.5に設定

	background-color: rgba(37, 149, 199, .5);

アピールエリアの背景を露草色の透過度0.5で設定

アピールエリアのタイトルとテキスト色

これは以下の部分を普通に指定するだけなので簡単ですね?背景の画像が白系ならなるべく濃い色に、濃い系なら白に近い色が見易いでしょう。

タイトルとテキストの色を変更

	color: #fff;

タイトルとテキストの色を別々にしたい

タイトルとテキストどちらも同じ色で良ければそのままでOKですが、それぞれに違う色を設定したい場合は以下のようにセレクタを分けます。

タイトルとテキストの色を別々に指定したい場合
.appeal-title {
	color: #ccc;
}

.appeal-message {
	color: #ddd;
}

テキストにシャドウをつける

背景画像によっては直接テキストを置くといまいち読みにくい場合もあります。そんな時はシャドウをつけてやると少しは見やすくなるかも?なのでお試しを。

タイトルにシャドウをつける
.appeal-title {
	text-shadow: 2px 2px 0 #3f3f3f;
}

アピールエリアのカスタマイズでした

ちょっとしたカスタマイズでしたがどうでしょう、これだけの事でも結構雰囲気が変わったような気がしませんか?自己満足と言ってしまえばそれまでですが、こういったカスタマイズは自身のモチベーション維持にも大切な事ではないかと思います。

そんなわけで、今後もコピペで簡単に実装出来るカスタマイズをちまちまと紹介して行く予定ですんで、よろしければ使ってみてやって下さいね?