ブログを始めてみたので作ったテーマを解説してみる:CSS3編

サイトキャプチャ

デザインの勉強がてらブログを始めてみました。
基本的には勉強したことをアウトプットすることで理解を深めるとともに、
メモとして残していくような感じでマイペースにやっていけたらいいかなって感じです。

手始めにWordpressで作ったこのブログの解説から始めていきます。
早くしないと忘れてしまうしね。

WordPressといえばオープンソースのCMSとして現在主流になりつつありますね、
僕自身はWordpressでブログを作るのは2回目で、今回は自分のブログなので結構好き勝手に作ってます
なるべく綺麗なソースで作ろうとは思ってましたが、もはや何が綺麗なのかよくわからないので
とにかく無理やり形になればいいかと開き直ってしまいましたorz
一応試みとしては3つポイントがあります。

1.CSS3の使用

これから主流になるであろうCSS3をなるべく使ってみようとトライしています。

基本は大抵のブラウザで見れるよう配慮しながら使っていますが、IE6に関してはちょっと不十分かもしれません。

2.有名なプラグインを試す

いわゆる有名なプラグインを試しまくってみようってことで

よく使われているプラグインをいくつか使ってみています。
まだ使い方がよくわからないものが多いですがなんとなくわかったものだけ簡単に紹介します。

3.SEO対策の実験

実際にサイトを運営した経験がほとんどないので実際のSEO対策がどんな点に注目して施されているのか
ちょっと試してみようと思ってます。
タイトルのつけ方だったり、パーマリンクの設定だったりくらいしかできてませんが。
この3つが意識したポイントではありますが、結局中途半端になってる部分もありますのでおいおい修正していけたらと思います。

ブログ名のecholaboは学校で屋号を考えてドメインを取って来いという授業の際に作ったものです。
echo(反響)の研究所(labo)という意味で、世の中に響き渡るためにはどうすればいいか考えようって感じです。
せっかく.comでドメイン買ってしまったので使い続けてます。
ちなみにecholabo表記では東京エコーラボさんという医療の研究チームとかぶってました。
あとエコラボという大手の業務用洗剤や薬品の会社もあるのでその辺とかなり競合してしまいますね。

まずCSS3の利用ですが、ブラウザの対応状況などを考慮して

角丸
ボックスシャドウ

くらいにしときました。

IEに関してはhtcファイルを利用して対応させています。

htcファイルについてはこちら
[JS]IE6/7/8でもCSS3が使えるようになるスクリプト -IE-CSS3

注意したいのがhtcファイルの読み込みに使うbehavior:(url.htc);ですがurlを絶対パスにしないと機能しないようです。
またスタイルがうまく表示されない場合があるのでposition:relative;を各要素に適応させる必要があります。

詳しくはこちら
CSS3PIE(PIE.htc)が効かないと思ったら

htcを読み込むタイムラグなのかIEではCSS3の適用が遅れることがあります。
まあすぐ適応するのですがリンクのロールオーバーなどに使っていると
なんか気持ち悪い感じになったりもするので注意が必要かもしれません。

多用してるのは角丸です。
コンテンツ背景は角丸で作ることが多いのでこれはホント便利だなって感じました。
いちいち分割した可変型の背景を画像で作らなくて済むし、可変のためにソースにいろいろ追加しなくていいので楽チンです。
さらに色や形をCSSをいじるだけで変えられるのでカスタマイズも簡単。
シンプルなコンテンツ背景ならほとんどこれで十分だと思います。

/* ▼角丸▼ */
border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;

角丸の丸みは水平方向と垂直方向の半径の値をpxで指定することによって決めます。
数値は左上、右上、右下、左下の順で設定して、水平方向と垂直方向の値を違う物にしたい場合は/で区切ります。

/* ▼角丸▼ */
border-radius: 10px 10px 10px 10px/ 20px 20px 20px 20px;
-webkit-border-radius: 10px 10px 10px 10px/ 20px 20px 20px 20px;
-moz-border-radius: 10px 10px 10px 10px/ 20px 20px 20px 20px;

marginやpaddingの値と同じように値が同じならば省略して書くこともできるので、今回はまとめて書いてあります。

/* ▼角丸▼ */
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;

参考:border-radius …… 角丸をまとめて指定する

続いてボックスシャドウですがこちらはコンテンツ背景に少しつけただけです。

/* ▼ボックスシャドウ▼ */
box-shadow: 2px 2px 10px #666;
-webkit-box-shadow: 2px 2px 10px #666;
-moz-box-shadow: 2px 2px 10px #666;

コチラの数値は水平方向の影の大きさ、垂直方向の影の大きさ、ぼかし距離、広がりの距離、影の色の順で設定します。
影の大きさを指定する数値は正なら右または下へ影が伸びます。また広がりの距離は正なら広がり負なら縮小するように設定できます。
さらにinsetと付けると影の方向を内側にすることができます。

ボックスシャドウについてはちょっとまだあまり検証していないので詳しくはまた後日実験してみたいと思います。

参考:box-shadow …… ボックスに影をつける

ブラウザ毎に設定しないと設定してないブラウザで機能しません。
ちなみに各ブラウザで見た場合(IE6と7は環境がないのでまだテストしてませんorz)


角丸はサイドメニューのロールオーバーにも使ってます。
記事の見出しもCSSのみで作ってあります。

ここに書いてあるやり方のまんまですが・・・

Quick Tip: Practical CSS Shapes

上の画像でも分かるんですがIEだけ1pxずれてます。
ちょっときれいにならなかったのでもう少し調整が必要ですね。
でもこちらもCSSで色々カスタマイズできるので調整が楽なので色々実験しやすいのが嬉しいです。

とりあえず長くなってきたので今回はCSS3についてだけで終わります。
まだまだ完成にはほど遠いブログですが少しづつ書いていきますので、最後まで読んでいただいてありがとうございました。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Pagetop

Copyright© echolabo All rights reserved.