[無料WordPressテーマ] Cocoonのアピールエリアをカスタマイズ！背景に半透明のカラーを被せてみた
いつでもCocoonのサイトを作れるようにと実験的に自分用スキンを試行錯誤中ですが、Simplicityには無かったアピールエリアという機能にちょっぴり手を加えるとなかなかいい感じになりそうです。
とか言って自画自賛は否めませんが、こんな風にも出来ますよという事で当エントリーではそのカスタマイズ方法を紹介してみたいと思います。
アピールエリアのカスタマイズ内容
当エントリーのカスタマイズ内容はざっと以下のようになります。
- コンテンツ部分の背景を透明に変更
- アピールエリア全体の背景色を透過色に変更
- タイトルとテキストの色を変更
たったこれだけなのでぶっちゃけ大した事はしていませんが、視覚的な効果はそれなりではないかと…単に私がこういうの好きなだけかもしれませんけどね？
ちなみに、こちらは私が作成したCocoonのデモサイトになります、当エントリーのカスタマイズ以外にもごにょごにょと色々やらかしてますが、とりあえずこんな感じになりますよーという事でひとつご参考までにどうぞ。
https://demo.unlimitedchaos.net/wp-cocoon/Cocoon設定からやっておく事
とりあえず、アピールエリアを作成して表示させない事には何も始まらないので、まずは > を開いて必要な項目を設定します。
- アピールエリアの表示
- 表示しない以外ならどれでも
- エリア画像
- 背景に指定したい画像を設定
上記以外の項目は全てお好みでどうぞ。タイトルやメッセージ、ボタンに関しては必要なければ特に設定しなくても構いません。
カスタマイズ用のCSS
カスタマイズはCSSをコピペして、色を設定している部分だけ使いたい色に変更してもらえばOKです。CSSは外観 > からstyle.cssか、外観 > > 追加CSSの好きな方にコピペしてご利用下さい。
尚、その任意に変更する色の部分に関しては後ほど説明します。何となく見ればわかっていただけるかとも思いますけど一応。
.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をクリックします。
まずはこのサイトの中から使いたい色を探して下さい。実際には透過させるのでかなり薄い色になりますが、透過度をイジれば何とでもなるので薄い色を選んでもノープロブレムです。
私のサンプルではティール（teal：#008080）という緑っぽい色を使用していますが、ここでは青っぽい色にしてみたいと思います。色を選択して少しスクロールした位置にある詳細からRGB (sRGB)の部分を先ほどのCSSに転記します。今回私が選んだ露草色という色の場合は以下のようになっています。
透過色を取得した色で設定
それでは透過色を先ほどのサイトから取得したカラーコードを使ってrgba形式で設定します。このサンプルでは透過度を0.25にしてあります。
background-color: rgba(37, 149, 199, .25);
透過度は0が完全に透明で、1が無透過の状態なので、その範囲内で好みの濃さになるよう調整してみて下さい。下の例では透過度を0.25から0.5に変更してみました。
background-color: rgba(37, 149, 199, .5);
アピールエリアのタイトルとテキスト色
これは以下の部分を普通に指定するだけなので簡単ですね？背景の画像が白系ならなるべく濃い色に、濃い系なら白に近い色が見易いでしょう。
color: #fff;
タイトルとテキストの色を別々にしたい
タイトルとテキストどちらも同じ色で良ければそのままでOKですが、それぞれに違う色を設定したい場合は以下のようにセレクタを分けます。
.appeal-title {
color: #ccc;
}
.appeal-message {
color: #ddd;
}
テキストにシャドウをつける
背景画像によっては直接テキストを置くといまいち読みにくい場合もあります。そんな時はシャドウをつけてやると少しは見やすくなるかも？なのでお試しを。
.appeal-title {
text-shadow: 2px 2px 0 #3f3f3f;
}
アピールエリアのカスタマイズでした
ちょっとしたカスタマイズでしたがどうでしょう、これだけの事でも結構雰囲気が変わったような気がしませんか？自己満足と言ってしまえばそれまでですが、こういったカスタマイズは自身のモチベーション維持にも大切な事ではないかと思います。
そんなわけで、今後もコピペで簡単に実装出来るカスタマイズをちまちまと紹介して行く予定ですんで、よろしければ使ってみてやって下さいね？