記事内に商品プロモーションが含まれる場合があります
サルワカでは「見出し」や「ボタン」などWebサイトのパーツごとに様々なデザインサンプルを作成しています。どれもHTMLとCSSのコピペだけで使えるものです(いわゆる「スニペット」というものですね)。
サンプルの数がかなり増えてきたので、このページでまとめておこうと思います。ブログのデザインカスタマイズの際に是非ご活用ください。
1. ボタンのCSSサンプル
コピペで使えるボタンデザイン集です。シンプル、フラット、立体的、円形のものなど、かなりのバリエーション数を用意しました。気に入ったCSSを追加しておけば、記事内にHTMLテンプレを書くだけで好きなデザインのボタンが表示できるようになります。
2. リスト(箇条書き)
こちらは箇条書きです。カラフルで華やかなもの、ポチ代わりにユニークなアイコンを使ったものなどなどたくさん作ってみました。きっと「おしゃれ」だと思えるリストデザインが見つかるはず。
3. 見出し
反響の大きかった見出しデザインのサンプル集です。こちらも68個という膨大な数を用意したので、きっとお気に入りのものが見つかるはずです。
4. ボックスデザイン
こちらの記事では、四角いボックス(囲み枠)のデザインをたくさん作りました。画面の上に紙が置かれたようなものや、グラーデーションを使ったものなどユニークなサンプルも含まれています。記事中の重要な部分、あるいは補足事項をまとめるのにご活用ください。
5. リボン
ブログやWebサイトにアクセントを加える「リボン」のサンプル集です。デザインを華やかに見せたいとき、目立たせたい文字があるとき、新着記事につける「NEW」というラベルをつけたいときなどに活用するのが良いかと思います。
6. 引用ボックス
こちらの記事では、ググってもあまり見つからない引用(blockquote)のデザインを30個紹介しています。比較的シンプルで使いやすいものが揃っているのではないかと思います。
7.吹き出し
ウェブサイトやブログを華やかに見せるのに吹き出しは効果的です。LINE風や会話風のデザインサンプルも紹介しています。
8.パンくずリストのCSSサンプル
少しマニアックですが、パンくずリストについてもいくつかサンプルを作っています。記事の前半では「パンくずリストって何?メリットは?」という話についても触れています。
9. ウォシュレットのデザイン
こちらの記事では、リアルなウォシュレットボタンをWebサイトやブログに表示させる方法を紹介しています。ボタンに連動して動くお兄さんのサンプル付き。
10. CSSが効かないときは?
「コピペしたCSSが効かない」or「反映されない」というときの対処法は、こちらの記事で解説しています。お手数ですが、1つずつチェックしてみて頂ければと思います。
今後も「タブメニュー」や「目次」などなど追加していく予定です。お楽しみに!