デザインセンスのない僕がブログでさりげなく使っているCSSまとめ
公開日：
ブログ開始当初はStingerを利用していましたが、その後オリジナルテーマGushへと変更し、現在もあちこち微調整しながらデザインとCSSの勉強中です。
ド派手なことは嫌いなので、ひっそりとつつましく生きてきた性格がブログにも反映されていると思います（え
ソースを見ればわかることですが、現時点で設定しているCSSをまとめておきます。備忘録ですが、さりげないデザインが好きな方はコピペして使ってみてください。
目次
レスポンシブデザイン対応グローバルナビ
しばらくブログタイトルとメインコンテンツの間にグローバルナビを設置していましたが、なんだか目線の動きがそこで遮られる気がするので最上部に移動しました。
イメージとしては、各ページを開いたときにすーっと記事本文までいってほしい。
スクロールしても最上部にはりつくような形も考えましたが、どうやっても邪魔なのでやめ。それなら記事下のCTAを作りこんだほうが効果がありそうです。
CSSグラデーションのかけ方
ナビ部分には白っぽいグラデーションをかけていますが、これはジェネレーターで作ったものです。
Ultimate CSS Gradient Generator
ちなみに、フッターのグラデーションも同じジェネレーターで作って適用しています。考えながら設定していくのは面倒なので、視覚で確認しながら調整してコピペするのが楽。
参考素人でもブログをちょっとだけオシャレにできるデザインテクニック
レスポンシブデザイン対応
あまりスッキリしたやり方ではありませんが、タブレット以下（768pxに設定）のサイズではグローバルメニューが「MENU▼」となります。
これはCSSの「display:none」で切り替えているだけです。「MENU▼」部分をタップしたときにメニューが表示される部分はjQueryを使用しています。
・メニュー部分（header.php）
|
1 2 3 4 |
<div class="menubtn">MENU ▼</div> <nav id="menu" class="togmenu"> <?php wp_nav_menu(); ?> </nav> |
・CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!--スマホ--> .togmenu { display:none; } <!--PC(1024px)--> .menubtn { display:none; } .togmenu { display:block; } |
・jQuery
|
1 2 3 4 5 |
jQuery(function(){ jQuery(".menubtn").click(function(){ jQuery("#menu").toggleClass('togmenu'); }); }); |
スマホやタブレットの場合、このメニューは記事下に配置したほうがいいんじゃないかと思い始めているので、こちらも改良の余地ありですね。
「display:none」はあまり使いたくないし。
リンク関連の設定
テキストリンクの色をふんわり変える
リンク部分にカーソルを乗せたときにふんわり色を変えるよう「transition」を設定しています。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
a { color: #0033cc; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; } a:hover { color: #c03; } |
言われなきゃわからないかも。
青く光るようなグロー効果
グローバルナビ部分はグロー効果を設定しています。
なんとなくかっこいいかなと思って実装してみたものの、ちょっとうざい気がしてきた今日この頃です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
a { display: block; color : #333; padding : 8px 1em; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; } a:hover { background: none; color: #fff; text-shadow: -1px 1px 3px #03c, 1px -1px 3px #03c; } |
いずれもWEBクリエイターボックスさんのコードを拝借しています。
参考コピペでできる！CSS3の素敵効果でテキストリンクを装飾する小技あれこれ
使いすぎると見づらくなるので、適度にやりましょう。
マウスオーバーでリンク画像を透過させる
画像にリンクを張っているとき、マウスオーバーでちょっぴり透過する設定がこれ。
|
1 2 3 4 5 |
a:hover img { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha( opacity=80 )"; } |
数値を変えれば透過度が変わります。
マウスオーバー透過サンプル
見出し関連
記事内の見出しはシンプルに
記事内の見出しタグはさほど凝ったものにしていません。ここが派手すぎたりブロック状になっていると、そこで目線が一瞬止まってしまいます。
目を休ませるぐらいの間隔なら良いですが、ブロック状の見出しタグ→3～4行の本文→ブロック…となるとゴツゴツするので個人的に嫌いなのです。
できれば最後まで違和感なく読んでほしいので、本当は装飾すらいらないかも。でも、そうなるとやっぱり寂しいのでちょこっと色付けしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
h2 { font-size: 24px; text-align: left; border-left: 5px solid #7f3d3d; margin: 0 0 24px -39px; padding: 10px 0 10px 10px; } h3 { font-size: 20px; text-align: left; border-bottom: 3px double #e1dcd3; margin: 0 0 24px 0; padding: 15px 0 5px 0; } h4 { color: #62240b; margin: 0 0 24px 0; background-color: #efe9e6; padding: 0.8em; } |
色は気分によって月に1度ぐらい変えています。
h4の背景色は文字色をうすめただけ
h4の色は、文字色（#62440b）を30％ぐらいにうすめたものを背景色（#efe9e6）に設定しています。
配色バランスで悩んだときは、「濃い色をうすめる」というのが楽。この文字色には赤背景？青背景？それとも…なんて考えなくてすみます。
サイドバー見出しタグは擬似要素で装飾
たまに見るデザインですが、サイドバー部分の見出しは擬似要素を使っています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
#sub h4 { padding: 0.5em 0.5em 0.5em 2.0em; } #sub h4:before { content: "□"; font-size: 200%; position: absolute; color: #364dff; top: -0.8em; left: 0.3em; height: 12px; width: 12px; } #sub h4:after { content: "□"; font-size: 200%; position: absolute; color: #9ca7ff; top: -0.5em; left: 0; height: 12px; width: 12px; } |
スマホだと邪魔になるので、タブレットサイズ（768px以上）でのみ反映しています。
その他あえて書くほどでもないCSS
ボックスの角を丸める
もはや当たり前になっている感じの、角を丸くする設定。当ブログでは、メインコンテンツを囲む罫線の角をちょっと丸くしています。
|
1 2 3 4 5 6 7 |
#main { background-color: #fff; padding: 20px 10px; margin-bottom: 24px; border-radius: 8px; border: 1px solid #ddd; } |
数値を大きくすればさらに丸くなりますが、やりすぎると境界があやふやになって統一感が出ません。
ボックスの大きさにもよりますが、個人的に8pxぐらいが好きです。
罫線 hr にグラデーションをかける
記事タイトル下の線にはうっすらグラデーションをかけています。
まずhrの値をリセット。
|
1 2 3 4 5 6 |
hr { height: 0; margin: 0; padding: 0; border: 0; } |
で、クラス名を設定してグラデーションをかけます。
|
1 2 3 4 5 6 7 8 |
hr.hrgrad { height: 1px; background: #bbb; background-image: -webkit-linear-gradient(left, #eee, #777, #eee); background-image: -moz-linear-gradient(left, #eee, #777, #eee); background-image: -ms-linear-gradient(left, #eee, #777, #eee); background-image: -o-linear-gradient(left, #eee, #777, #eee); } |
NxWorldさんのコードを拝借しました。
まとめ
ブログの目的は記事を読んでもらうことですから、読みやすくするにはどうしたら良いかを考えて設定していきましょう。
参考初心者ブロガーが絶対覚えておくべき読まれるブログデザインの大原則
CSS3でいろんな効果が出せるようになりましたが、あれもこれも取り入れてしまうとブログ全体がちぐはぐな印象になってしまいます。
個人ブログだから好きなようにデザインしてもかまいませんが、素人感丸出しだと記事自体も同じ印象を与えかねませんので、バランスには気をつけたいものです。
あちこちからコピペして使うのが楽ですが、基本も抑えておきましょうね。
CSS3のセレクタ全42種 まとめておさらい使い方リファレンス
それでは、また。
Your Message