<Access>基本からVBAまでまるわかり!独学時に使える参考書

【WordPress】CSS見出しが参考になったサイト4選+Web色見本1選

スポンサーリンク
ワードプレス

cssで見出しを可愛くカスタマイズしようと思ってネットで色々と参考にさせていただいたサイトをご紹介します。

私の使っている『Simplicity』の見出しがとてもシンプルなので、出来ればもう少し可愛くカスタマイズしたいなぁと思ったんですが、私はcssが全然わからないので、コピペで見出しを差し替えたいと思って、コピペさせていただいたサイトさん、4選+1選です。

コピペでかわいいCSSデザイン!解説付きでカスタマイズも簡単!
私がこのブログで使っている見出しをご紹介したいと思います。 コピペで十分!ブログがかわいくなる見出し! 水玉見出し h2に使っている見出しは『第0版』さんを参考にさせていただいたものをカラーのみ変更して、使用しています。 私のサ...
スポンサーリンク

CSS見出しが参考になったサイト4選+Web色見本1選

『第0版』

こちらのサイト『第0版』さんは本当に可愛い見出しばかりで、ほとんど使わせてもらっています。

花柄や水玉は可愛すぎます~!心をわしづかみされてしまいました!

CSSコピペで出来るシンプル可愛い見出しデザイン【女性向け】 | 第0版
ブログをお持ちの方必見! スタイルシートをコピペするだけでOKな、シンプル可愛い見出しを作成しました。 ※アイキャッチ画像では10個になってますが、徐々に増えて現在17個あります。...

 

『Web Clear』

こちらのサイトさんはシンプルな見出しが多くて、カスタマイズする際に参考になりました。

CSSで出来る見出しデザインテンプレート
h1~h6までの見出しのデザインを画像を使わないでCSSで考えている方へ。 コードのバリエーションをメモしていたので見出しのデザインをご紹介していきます。 ※ Firefoxのアドオン Firebugを利用すると分かりやすいのでぜひ活用して

 

『Web’Notes』

シンプルだけど、いろいろな見出しがあって参考になった『Web’Notes』さん

http://webnonotes.com/css/heading_sample/

 

『サルワカ』

こちらは丁寧に見出しのcssにコメントを付けてくださっているので、すごく勉強になり、カスタムしやすかったです!

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

 


こちらの見出しを参考にこのサイトもカスタムしました。

って…ちょっと待って!

このブログの見出しって少しコピペと少し違うんじゃないか?と思った方いますか?

そうなんです。実は、最初は見出しの『コピペ』で使おうかと思っていたんですが、出来れば下に線が欲しいなぁと思ったり、丸が小さいなぁと思ったりで結局、さらにカスタマイズしちゃいました。

コピペでかわいいCSSデザイン!解説付きでカスタマイズも簡単!
私がこのブログで使っている見出しをご紹介したいと思います。 コピペで十分!ブログがかわいくなる見出し! 水玉見出し h2に使っている見出しは『第0版』さんを参考にさせていただいたものをカラーのみ変更して、使用しています。 私のサ...

おまけ WEB色見本

カラーの参考はこちらのサイトさんな豊富にあっておすすめです。

WEB色見本 原色大辞典 - HTMLカラーコード
色の名前とカラーコードが一目でわかるWEB色見本

個人的には『和色大辞典』が好きで、このブログにも和風色をつかっています。
『洋色大辞典』という洋風色もあって本当に色ってたくさんあるんだなぁと驚かされます。

選んでいると見入ってしまって、時間を忘れてしまいます…。

これを機に私もCSSの勉強をしてみたくなりました。

 

まとめ

cssがわからなくても見出しのカスタマイズはコピペをして、色を変えるだけでもずいぶん雰囲気が変わります。

ただし、カスタマイズのハマり過ぎには注意!
とまらなくなるのでほどほどにしましょう(笑)