【Cocoon】【コピペOK】エントリーカードのラベルにグラデーションをかける方法
2023年2月20日
当ブログでは、WordPressの無料テーマ「Cocoon」で作成したブログのカスタマイズ情報を発信しています。
この記事では、エントリーカードのラベルにグラデーションをかける方法を紹介します。
「エントリーカードのラベルをおしゃれにデザインしたい！」
「ラベルに個性を出して目立つようにしたい！」
そんな方に読んでいただきたいです。
この記事では、CSSが分からない方でも理解しやすいようにコードの解説を行っています。
またCSSについては、コピペで使用いただいて問題ありません。
style.cssにコードを記述する
１．「外観」から「テーマファイルエディター」を選択し「Cocoon Child: スタイルシート (style.css)」を開きます。
※選択するテーマは必ず「Cocoon Child」にしましょう。
style.cssにCSSのコードを記述します。
.cat-label {
background-image: linear-gradient(to right, #003973 0%, #E5E5BE 51%, #003973 100%);
padding: 15px 45px;
background-size: 200% auto;
color:#fff;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
}上記のコードを記述することで以下のようなデザインになります。
コードの解説
先ほど記述したコードの解説を行います。
.cat-label {
background-image: linear-gradient(to right, #003973 0%, #E5E5BE 51%, #003973 100%);
padding: 15px 45px;
background-size: 200% auto;
color:#fff;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
}background-image
background-imageでグラデーションを表現しています。
「to right」で右側からグラデーションを開始しています。
こちらを「to left」とすることで左側からグラデーションを適用することが可能です。
また、0%・51%・100%の各カラーコードを変更することで、グラデーションの色を変えることができます。
padding
paddingでラベルの内側に余白を上下15px、左右に45px設けています。
余白を調整したい場合は、こちらの数値を変更してください。
color
colorでラベルも文字色を指定しています。
カラーコードを変更してお好きな文字色に変更してください。
カラーコードについては、こちらから簡単に調べることができます。
box-shadow
box-shadowでラベル背景に少し影をつけています。
border-radius
borde-radiusでラベルの角を少し丸くしています。
数値を大きくすることでラベルに丸身を加えることができます。
グラデーションのカラーを調べる
最後にグラデーションのカラーを調べる方法について解説します。
こちらのサイトから、グラデーションカラーを自由に設定することができます。
・１でどの場所からグラデーションを開始するか指定します。
・２でお好きなグラデーションカラーを選択します。
・３で追加したグラデーションカラーが表示されます。必要に応じて削除も可能です。
・最後に4のコードをコピーして貼り付けます。
.cat-label {
background: rgb(17,42,70);
background: linear-gradient(90deg, rgba(17,42,70,0.7315301120448179) 0%, rgba(4,143,187,1) 48%, rgba(110,154,164,1) 60%, rgba(172,229,226,0.38139005602240894) 100%);
padding: 15px 45px;
background-size: 200% auto;
color:#fff;
box-shadow: 0 0 20px #eee;
border-radius: 10px;
}
backgroundの2つが新しく貼り付けたコードになります。
このように新しくラベルのグラデーションを定義できました。
まとめ
エントリーカードのラベルにグラデーションカラーをかける方法について紹介しました。
当ブログでは、Cocoonのカスタマイズについて他の記事でも様々な内容を取り上げています。
また、当ブログではブログのカスタマイズをサポートします。
『こんなブログサイトにしたい』『サイトの部分的なカスタマイズを行いたい』などどんな内容でも構いません。
ご要望通りにデザインをカスタマイズします！
この記事を読んで不明点があればお気軽にご連絡ください。
最後まで読んでいただきありがとうございました。