Kindleストア売れ筋ランキング

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

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

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

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

ママのアイコン画像ママ

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

おおもとのアイコン画像おおもと

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

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

Contents

影を使ったデザインの例

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

エントリーカード
ブログカード
SNSボタン
むすめのアイコン画像むすめ

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

おおもとのアイコン画像おおもと

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

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

影をつけるカスタマイズ

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

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

おおもとのアイコン画像おおもと

rgbaは関連記事を読んでね

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

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

/*エントリーカード変更*/
.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つのこと
コクーンに見出しをカスタマイズするために知っておきたい3つのことCocoon(コクーン)の見出しをカスタマイズするなら「3つだけ」知ってればいいんだよな〜あっどうも、おおきに!おおもと(@so88qa)ですこの記事は、ワードプレス無料テー...

この記事を書いた人

・面白いネタ
・ためになるネタ
・時事ネタ
・しょうもないネタ
を日々更新していきます!
誤字脱字が多いかもしれませんが、愛嬌と言うことで暖かく見守ってください。

ブログを楽しむテーマ「SWELL」

当ブログで使用している有料テーマ「SWELL」はブログを楽しく書く事を思い出させてくれるテーマ

  • 簡単におしゃれな文章が作れる
  • マウスだけでおしゃれなブログを作れる
  • テーマ製作者に事を気軽に聞ける環境
  • 簡単に収益化ができる仕組みを搭載

楽しく文章を書く事以外にもワクワクさせてくれる機能がアナタを待っています!

SWELLは初心者〜上級者まですべての人にオススメのテーマ

今のマンネリ化した環境から脱出したい人はSWELLを使ってください!

ブログが書きたくて書きたくてたまらない!!!!!

SWELLはそんな思いにさせてくれます。

おおもとのアイコン画像おおもと

SWELLのおかげで毎日記事が書けています♪

SWELLに興味がある人は公式サイトをチェックしてください。

\ SWELL公式サイトをチェック /

コメント

コメントする

Contents
閉じる