こんにちは、どろっぷしっぴんぐ研究所の奥成大輔（オクナリダイスケ）です。
今週はWEBデザイナーの山口美登利さんです。
前回はショップできすぎくんで一番目立つタイトル画像作りのヒントについて寄稿してくださいましたが、今回はCSSを使った小技を３つ紹介してくれました。
では、今週もお楽しみください。
ライバルと差がつくCSSを使った3つの小技
皆さんこんにちは、山口です。
1年経つのは早いものでもう残すところ今年も50日そこそことなってしまいました。
最近私は自分のショップやブログについて、今後も末永く運営できるようにどうすればいいか、そんなことを考えたり模索したりしているうちにどんどん時間が経ってしまいました。
手を動かさないうちに時間が経ってしまうことの焦りがどんなものか、皆さんも良くご存じだと思います(^_^;)
そんな焦りを感じつつも、自分なりに考察して改善できたことに少しばかりの達成感を感じています。
さて前置きが長くなってしまいましたが今回のメルマガでは、CSSを使った小技を３つご紹介いたします。
もしかすると目新しい情報ではないかもしれませんがお役に立てれば幸いです。
小技（１）～ ブロック要素の角を丸くする
「border-radius: ★px;」を追加することで、角を丸めることが出来ます。
設定方法
方法はとっても簡単。例えば「border-radius: 5px;」とすれば、半径5pxの角丸が反映されます。画像にも使えるので、四角い画像を丸く切り抜いた画像に見せることもできますね。数字を変えていろいろ試してみて下さい。
因みに、４つある角それぞれに別の数値を設定することも出来ます。
例：border-radius: 10px 20px 30px 40px; /* 左上、右上、右下、左下 */
小技（２）～ アドレスバーの色を変える
ホームページの上部にURLを入力する場所がありますよね。その部分の色を変える方法です。必要かどうかと問われると、特に必要がないかもしれない小ネタですが、細かなところにこだわることで、他のサイトと差別化を図ったり、ユーザーに印象を残せるかもしれません。
例えばこんな風になります→ ※Android Chromeでご覧ください。
対応環境
Android用 Chromeのバージョン 39以降
Android バージョン5(Lolipop)以降
設定方法
方法はとっても簡単。head内に以下のメタタグを追記するだけです。
<!– head内に追加してください。content=”●●●”の部分を好きなカラーコードに変更してください。 –>
<meta name=”theme-color” content=”#2196F3″>
小技（３）～ できすぎくんショップ、スマホ時のバーガーメニュー画像を変更する
できすぎくんショップのスマホ時のバーガーメニューを自分の用意した画像に差し替えることで、一気にイメチェンできる…かも！？
まずはCSSファイルと画像をご自分で用意する必要がありますので、その時点で面倒！と感じる人には向いていないかもしれません(^_^;)
いろいろやり方はありますが、今回はデフォルトで設定されているバーガー画像を差替える方法です。
設定方法
差替えたい160px×64pxの画像を用意して、どこかにアップロードします。
CSSファイルに以下のコードを貼り付けます。次に「https:hogehoge.com/★★★.jpg」部分をアップロードした画像URLに変更してアップロード。ショップできすぎくんの管理画面でCSSファイルをリンクすれば完成です。
/* ショップできすぎくんのバーガーメニューを変更する */
@media (max-width: 768px)
div#header span#navi-button {
background: url(https:hogehoge.com/★★★.jpg) repeat 0 0!important;
}
…と、今回は３つの小技をお知らせしました。
次回またお会いしましょう！
———————————————————–
【今週の執筆者】山口美登利
（プロフィール）
2002年に広告代理店に勤めDTPデザインやWEB制作業界に入る。
起業、廃業、派遣など良くも悪くも様々な経験を経てフリーランスになる。
出来ることはWEBデザインほかDTPデータ制作など。
2018年からはもしもドロップシッピングのショップ運営や、創作活動をメインに活動、研究中。
□ WEB：DTPデザイン・WEBサイト制作｜ミドリデザインワークス
□ Twitter
□ FaceBook
———————————————————–
それでは、次号もお楽しみに。
※この記事は2018年11月29日に配信した『どろっぷしっぴんぐ研究所 公式メルマガ（無料）』の一部を修正、改訂して掲載しています。メルマガのご登録はこちら
