112 Shares

デザインセンスのない僕がブログでさりげなく使っているCSSまとめ

style-css

ブログ開始当初はStingerを利用していましたが、その後オリジナルテーマGushへと変更し、現在もあちこち微調整しながらデザインとCSSの勉強中です。

ド派手なことは嫌いなので、ひっそりとつつましく生きてきた性格がブログにも反映されていると思います(え

ソースを見ればわかることですが、現時点で設定しているCSSをまとめておきます。備忘録ですが、さりげないデザインが好きな方はコピペして使ってみてください。

レスポンシブデザイン対応グローバルナビ

レスポンシブデザイン対応ナビ

しばらくブログタイトルとメインコンテンツの間にグローバルナビを設置していましたが、なんだか目線の動きがそこで遮られる気がするので最上部に移動しました。

イメージとしては、各ページを開いたときにすーっと記事本文までいってほしい。

スクロールしても最上部にはりつくような形も考えましたが、どうやっても邪魔なのでやめ。それなら記事下のCTAを作りこんだほうが効果がありそうです。

CSSグラデーションのかけ方

ナビ部分には白っぽいグラデーションをかけていますが、これはジェネレーターで作ったものです。

Ultimate CSS Gradient Generator

ちなみに、フッターのグラデーションも同じジェネレーターで作って適用しています。考えながら設定していくのは面倒なので、視覚で確認しながら調整してコピペするのが楽。

参考素人でもブログをちょっとだけオシャレにできるデザインテクニック

レスポンシブデザイン対応

あまりスッキリしたやり方ではありませんが、タブレット以下(768pxに設定)のサイズではグローバルメニューが「MENU▼」となります。

これはCSSの「display:none」で切り替えているだけです。「MENU▼」部分をタップしたときにメニューが表示される部分はjQueryを使用しています。

・メニュー部分(header.php)

・CSS

・jQuery

スマホやタブレットの場合、このメニューは記事下に配置したほうがいいんじゃないかと思い始めているので、こちらも改良の余地ありですね。

「display:none」はあまり使いたくないし。

リンク関連の設定

テキストリンクの色をふんわり変える

リンク部分にカーソルを乗せたときにふんわり色を変えるよう「transition」を設定しています。

言われなきゃわからないかも。

青く光るようなグロー効果

グローバルナビ部分はグロー効果を設定しています。

グロー効果

なんとなくかっこいいかなと思って実装してみたものの、ちょっとうざい気がしてきた今日この頃です。

いずれもWEBクリエイターボックスさんのコードを拝借しています。

参考コピペでできる!CSS3の素敵効果でテキストリンクを装飾する小技あれこれ

使いすぎると見づらくなるので、適度にやりましょう。

マウスオーバーでリンク画像を透過させる

画像にリンクを張っているとき、マウスオーバーでちょっぴり透過する設定がこれ。

数値を変えれば透過度が変わります。

マウスオーバー透過サンプル

Naifix

見出し関連

記事内の見出しはシンプルに

記事内の見出しタグはさほど凝ったものにしていません。ここが派手すぎたりブロック状になっていると、そこで目線が一瞬止まってしまいます。

目を休ませるぐらいの間隔なら良いですが、ブロック状の見出しタグ→3~4行の本文→ブロック…となるとゴツゴツするので個人的に嫌いなのです。

できれば最後まで違和感なく読んでほしいので、本当は装飾すらいらないかも。でも、そうなるとやっぱり寂しいのでちょこっと色付けしています。

色は気分によって月に1度ぐらい変えています。

h4の背景色は文字色をうすめただけ

h4の色は、文字色(#62440b)を30%ぐらいにうすめたものを背景色(#efe9e6)に設定しています。

配色バランスで悩んだときは、「濃い色をうすめる」というのが楽。この文字色には赤背景?青背景?それとも…なんて考えなくてすみます。

サイドバー見出しタグは擬似要素で装飾

たまに見るデザインですが、サイドバー部分の見出しは擬似要素を使っています。

擬似要素で装飾した見出しタグ

スマホだと邪魔になるので、タブレットサイズ(768px以上)でのみ反映しています。

その他あえて書くほどでもないCSS

ボックスの角を丸める

もはや当たり前になっている感じの、角を丸くする設定。当ブログでは、メインコンテンツを囲む罫線の角をちょっと丸くしています。

数値を大きくすればさらに丸くなりますが、やりすぎると境界があやふやになって統一感が出ません。

角を丸くする

ボックスの大きさにもよりますが、個人的に8pxぐらいが好きです。

罫線 hr にグラデーションをかける

記事タイトル下の線にはうっすらグラデーションをかけています。

罫線にグラデーションをかける

まずhrの値をリセット。

で、クラス名を設定してグラデーションをかけます。

NxWorldさんのコードを拝借しました。

参考hr要素のデザインサンプル 12

まとめ

ブログの目的は記事を読んでもらうことですから、読みやすくするにはどうしたら良いかを考えて設定していきましょう。

参考初心者ブロガーが絶対覚えておくべき読まれるブログデザインの大原則

CSS3でいろんな効果が出せるようになりましたが、あれもこれも取り入れてしまうとブログ全体がちぐはぐな印象になってしまいます。

個人ブログだから好きなようにデザインしてもかまいませんが、素人感丸出しだと記事自体も同じ印象を与えかねませんので、バランスには気をつけたいものです。

あちこちからコピペして使うのが楽ですが、基本も抑えておきましょうね。

CSS3のセレクタ全42種 まとめておさらい使い方リファレンス

それでは、また。