カスタマイズ用コードを使わずにカエレバの見た目を変える方法

スポンサーリンク

今、職業訓練でWEBデザインを勉強しているんですが、HTMLやCSSの知識が少しずつ増えてきました。

このサイトもカスタマイズする時、最初は訳もわからずにやってたんですが、今は記述内容も意味がわかる様になってきたので更に手を加えていきたいと思います。

カスタマイズ用CSSを使わないカエレバカスタマイズ

以前カスタマイズ用コードを使わないでカエレバに外枠をつける方法っていうのを記事にしましたが、
 icon-arrow-circle-o-rightカエレバをカスタマイズせずに枠線だけつける方法

枠線だけじゃなく、もうちょっとバリエーションをつける方法が分かりましたので、幾つか紹介したいと思います。

以前のカスタマイズ

以前は外枠だけをつける方法

solid

こんな感じの見た目ですね。これのコードは

この様な記述になります。下から2行目の「border」の項目が指示内容になっているんですが、「solid」というのは実線を表していまして、ここの表記を変えれば、線の種類が変えられます。

枠線を点線にしたい場合

点線にしたい場合は下記の様になります。

「solid」「dotted」に変更。こうすると

tensen

こんな感じになります。見やすくするために線の色を濃くしてます。

枠線を破線にしたい場合

破線にしたい場合は

破線はborderの所が「dashed」という表記に変わります。

hasen

見た目はこんな感じになります。

二重線の場合

あと二重線なんかもできます。

これは「double」という表記に変更。1pxだと線が細すぎて二重に見えないので5pxと少し太くしています。

nijyuusenn

そうするとこんな感じ。点線や破線ももう少し線を太くすれば、はっきり見えるかも。

背景の色もつけられる。

今はバックの色を指定してないですが、背景色を指定する事もできます。
背景色を入れたい時は「background-color」の一文を追加してカラー指定すれば可能です。

こんな感じ。

backcolor

そうすると、背景に色が入ります。ただ楽天やアマゾンのアイコンバックの色は白くなってしまうので、あまり濃い色にしないか、アイコンを外した方が良いかなと思います。

影をつけて立体的にする方法

あとは影をつける方法

影は「box-shadow」という指示を追加するとできます。

最初の数値は水平方向へのずらし、次は垂直方向へのずらし、最後の数値はぼかし具合を表しています。カラーは薄い色の方がそれっぽく見えると思います。

firefoxとChrome、Safari用にも別に記述が必要になるのでそこだけ要注意ですね。

backshadow

そして実際やってみたのがこちら。ずらし加減とかぼかし具合は実際数値を入れてみて試しながら確認した方が良いかと思います。

こんな感じでちょこっとCSSを追記すれば、見た目がいろいろ変えられますので好みでいろいろ変えてみてはいかがでしょうか。

スポンサーリンク