デジタルマーケティング専門家/デジタルマーケッター・ブログ集客専門家 時々 おもろいおっさん

コピペOK!Webサイトのチェックボックスをおしゃれにカスタマイズする方法2つ

 
アイキャッチ
この記事を書いている人 - WRITER -
松原 潤一
デジタルマーケティング専門家、ブログ集客の専門家。ブログ・SNS活用・SEO・動画などなど現代のデジタルメディアを使ったマーケティングが大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら

今回の記事の難易度★★★★☆【上級者向け】
■今回の記事はこんな人のために書いています
⇒Webサイトのチェックリストを少しおしゃれにカスタマイズしたい人

今回の記事を読むと以下のことが分かります
⇒おしゃれに心地よく操作できるチェックリストの作り方(HTMLとCSSの書き方)がわかる

デザインが美しい、操作が心地よいとそのWebサイトのことを好きになるっていうことはありますよね!

そこで、今回はめちゃくちゃ細かい部分なんですが、Webサイトの中でも特にユーザーさんに操作してもらう部分である「チェックボックス」をカスタマイズする方法をお伝えしたいと思います。

通常のチェックボックスはこんな感じ
↓↓

同意する

これをもう少しおしゃれにカッコよく表示させるカスタマイズ例を2つだけご紹介します。HTMLとCSSをコピペするだけで実装できるので、めっちゃ簡単だと思います。

デフォルトの書き方

↓こんな感じでHTMLに記述してあげると、シンプルなチェックボックスになります。

See the Pen チェックボックスデフォルト by JUNICHI (@junichi-manga) on CodePen.

はじめに)カスタマイズをするための方法

以下のようにコードを埋め込んでおきます。

  • HTML」をWordPressならテキストモードやHTMLモードに記述
  • CSS」をスタイルシートに記述します(WordPressであれば、外観⇒カスタマイズ⇒追加CSSに記述が簡単でおすすめ)
  • Result」がこんな感じにカスタマイズできますよ、っていう見本だと思ってください。

See the Pen Vwepgmm by JUNICHI (@junichi-manga) on CodePen.

では、早速カスタマイズの事例をいくつかご紹介します。

1.チェックするとボックスが消え、チェックマークだけに切り替わるスタイル

See the Pen Vwepgmm by JUNICHI (@junichi-manga) on CodePen.

それほど難しいコードもなく、記述方法も比較的簡単でおすすめ!

2)スイッチの色が変わるタイプ

See the Pen rNxyPdN by JUNICHI (@junichi-manga) on CodePen.

よくスマホとかで機能のON/OFFを切り替えるのに使ったりしますね!こういう形もかわいいです。

番外編)チェックを必須にするための書き方

例えば、この規約に同意しないと次のページに進めないよ、フォームを送れないよっていうように、チェックを必須にするためには、以下のようにHTMLを記述しましょう。

↓ こうすると、チェックボックスにチェックすることを「必須」にすることができます。メルマガの登録に同意してもらわないといけない場合などに使えますね。

See the Pen チェックボックス同意する by JUNICHI (@junichi-manga) on CodePen.

まとめ

HTMLとCSSをコピペで、簡単にチェックボックスをおしゃれに心地よくつかえるようなカスタマイズ方法を自分のために、備忘録として記事にしました。

どこかの誰かのお役に立てたらいいなと!

 

今までの僕のブログ集客のノウハウを全部つぎ込んで
しかも無料で配布することにしました。

【今すぐ読める無料Ebook】
広告費を一切使わずブログだけで
19,000人以上を集客した全手法!

総ページ100ページ以上の
大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

Ebook

この記事を書いている人 - WRITER -
松原 潤一
デジタルマーケティング専門家、ブログ集客の専門家。ブログ・SNS活用・SEO・動画などなど現代のデジタルメディアを使ったマーケティングが大好物。【好き】⇒妻・娘・愛犬チワワ・漫画を描くこと・FF14。大阪吹田の千里ニュータウンを愛す。北摂によく出没。
詳しいプロフィールはこちら