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

コピペでかわいいCSSデザイン!解説付きでカスタマイズも簡単!

ワードプレス

私がこのブログで使っている見出しをご紹介したいと思います。

スポンサーリンク

コピペで十分!ブログがかわいくなる見出し!

水玉見出し

h2に使っている見出しは『第0版』さんを参考にさせていただいたものをカラーのみ変更して、使用しています。

私のサイトで使用しているh2はこんな感じの水玉模様です。

 

CSSコードは下の通りです。

解説とかいらないし、カスタマイズもしないという方はコピペして黄色いマーカーがついている部分だけ好きな色に当てはめてください。

解説

4行目『background-color: #c1e4e9;』この部分は、背景部分を指しています。

上の通りのコードなら背景部分は『#c1e4e9=白藍 しらあい』という色を使っています。

 

5行目『background-image: radial-gradient(#ebf6f7 20%, transparent 0), radial-gradient(#ebf6f7 20%, transparent 0);』

このコードは小さい水玉部分を表しているので、『#ebf6f7=藍白 あいじろ』という色を使っています。

 

8行目『color: #192f60;』は文字色を表しています。

 

ざっくり解説するとこんな感じです。

難しそうだけど、VBAと一緒でバラバラにすると簡単に見えてきたりします。

めんどくさいけど、わかるとけっこう楽しくなってきたりもします。

この調子でどんどん行きます!

【WordPress】CSS見出しが参考になったサイト4選+Web色見本1選
cssで見出しを可愛くカスタマイズしようと思ってネットで色々と参考にさせていただいたサイトをご紹介します。 私の使っている『Simplicity』の見出しがとてもシンプルなので、出来ればもう少し可愛くカスタマイズしたいなぁと思ったんで...

 


 

下ラインしましま見出し

またもや『第0版』さんの見出しを参考にさせてもらいました。

 

CSSコードはこちらです。

 


 

縦二重線+枠見出し

h4見出しは縦二重線の見出しに枠を付けてみました。

 

アイコン分のスペースをあけてタイトルがかぶらないようになっています。

(前の見出しはこれがなくて毎回スペースあけて調整していました。)

 


 

丸が二つ重なっている見出し

h5見出しは色の違う丸が二つ重なっていてきれいに見えます。

丸の形や、色をカスタマイズできるので気に入っています。

 

CSSコードはこちら。

 


 

チェック見出し

h6見出しはチェックマークにしました。

何かとチェック見出しは役に立ちそうです!

 

CSSコードはこちら。

 

以上が私がカスタマイズした見出しでした。

コピペしているうちに楽しくなってきてカスタマイズまでしてしまいました。

 

それではみなさんもカスタマイズをしてみてください。

 

コメント