お仕事の依頼はココをクリック

『Cocoon』CSSを使ってユーザービリティーをあげる方法

Cocoon
スポンサーリンク

 

我こそは、影をすべるものChaos(ry
ごめんなさいめっちゃはずかしい(〃ω〃)

まいどおおきに!普通のおおもと(@so88qa)です!

 

今回の記事は、SANGOにも使われている『マテリアルデザイン』に必要な影を作るCSSを紹介します。

 

ママ
ママ

押してほしいとこをが直感的にわかるデザインだよね

おおもと
おおもと

影を使って浮き出ているように見せてユーザーアビリティーをあげているんだよ

 

影をつけて「ボタンがまるで浮き出ている」ようなデザインを作りたい人は必見です!

 

【知ってて損なし!】3分で覚えるCSSの『値の単位と色の指定』
前回の記事がかなり反響があったので、その続きを書きました! 初めてCSSをいじる人が分かりやすいように、要点のみをまとめてあるので ぜひみてくださいね!
コクーンに見出しをカスタマイズするために知っておきたい3つのこと
この記事は、ワードプレス無料テーマCocoon(コクーン)の見出しをカスタマイズするなら知っておきたい『3つ』のこと というテーマの記事です。見出しというのは、CSSのカスタマイズが簡単 Cocoon(コクーン)を使っている人だけではなく、初めてCSSを触る人向けの記事なので興味があればみてくださいね。

 

スポンサーリンク

影を使ったデザインの例

当ブログ「wとら」で採用している影を使ったデザインを紹介します。

 

エントリーカード

 

ブログカード

SNSボタン

むすめ
むすめ

3つとも、少し影の付け方が違うね

おおもと
おおもと

影の付け方で全く違ってみえるから面白いでしょ

 

どのデザインも、影を使って立体的に見せることによって、ユーザーにそこはクリックができるよ」とクリックを促してます。

 

スポンサーリンク

影をつけるカスタマイズ

影をつけるためには、「box-shadow」というプロパティーを使います。

注意点としては、「rgba」をつかって透明度を出すことカラーコードを使わないことに注意してください。

 

おおもと
おおもと

rgbaは関連記事を読んでね

 

【知ってて損なし!】3分で覚えるCSSの『値の単位と色の指定』
前回の記事がかなり反響があったので、その続きを書きました! 初めてCSSをいじる人が分かりやすいように、要点のみをまとめてあるので ぜひみてくださいね!

 

それでは、ぼくが実際に使っているカスタマイズを紹介します。

 

エントリーカードに影と動きをつける

/*エントリーカード変更*/
.a-wrap {
background-color:#fff;
border:solid 1px rgba(0,0,0,0.17);/*黒の薄い枠線を入れる*/
border-radius: 7px;
box-shadow:0px 0px 5px rgba(0,0,0,0.25);/*影をカードの周りにつける*/
}

.a-wrap:hover {
color:#56a7a7;
}

.a-wrap:hover .card-thumb img{
transform: scale(1.05);
transition: all 0.6s ease;
}

.card-thumb {
line-height: 0;
margin-right: 1rem;
overflow: hidden;
}

.cat-label {
line-height: 1.5em;
border-radius:2px;
background-color:#f8acac;
color:#555;
}

 

カード類全てに影をつけるCSSと、エントリーカードのアイキャッチに動きをつけるCSSです。

 

SNSボタンに影をつける

/*SNS*/
.twitter-button,.facebook-button,.hatebu-button,.google-plus-button, .pocket-button, .line-button,.feedly-button,.rss-button{
box-shadow:0px 0px 5px rgba(0,0,0,0.5);
}

SNS系のボタンに全て影をつけるCSSです。

 

スポンサーリンク

ユーザービリティーをあげる方法のまとめ

今回の記事は、SANGOにも使われている『マテリアルデザイン』に必要な影を作るCSSを紹介しました!

 

ママ
ママ

押してほしいところを教えてくれたほうが親切だよね

 

Googleも推奨しているマテリアルデザインを採用してユーザーアビリティーをあげましょう!

 

【知ってて損なし!】3分で覚えるCSSの『値の単位と色の指定』
前回の記事がかなり反響があったので、その続きを書きました! 初めてCSSをいじる人が分かりやすいように、要点のみをまとめてあるので ぜひみてくださいね!
コクーンに見出しをカスタマイズするために知っておきたい3つのこと
この記事は、ワードプレス無料テーマCocoon(コクーン)の見出しをカスタマイズするなら知っておきたい『3つ』のこと というテーマの記事です。見出しというのは、CSSのカスタマイズが簡単 Cocoon(コクーン)を使っている人だけではなく、初めてCSSを触る人向けの記事なので興味があればみてくださいね。

 

おおもと
おおもと

質問などがあれば、コメント覧に書き込んでくださいね!

- Comments -

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