wordPess stingerのデザイン、それだけでも十分スタイリッシュですが、
長年使用していると、ちょっと変更したい衝動に駆られます。
色々デザイン変更するのは大変ですが、記事を書く部分とそれ以外の要素をきちんと綺麗に見栄え良くする方法、具体的にはメインフレームの枠をもっと締まりのある感じにする方法のご紹介です。
メインフレームの枠を変更する
wordPressデザインの確認
通常は以下のような画像になっています。
それを以下のように変更します。
えっ？そんなに変化ないですか。まああくまでやり方の見本ですので、自分好みのデザインに変更してみてはいかがでしょうか。
wordPress style.cssに記述する内容
何度も、当サイトをみて下さっている方は、もうご存じだと思いますが、今回の子テーマの中に入れてあるstyle.cssの変更です。今までご紹介してきたwordPressのカスタマイズ方法でも、今回の箇所は1度も変更しておりませんので、”#wrap #wrap-in #main{・・・}”の記述を新規に書きこみます。
その前に子テーマの事を知りたい方は、『wordPress 子テーマの作成 カスタマイズ stingerで実践』をご参考下さい。
では、実際記入するコードです。
[css]
#wrap #wrap-in #main {
float: left;
width: 550px;
padding-right: 39px;
padding-left: 39px;
padding-top: 20px;
border-bottom: 1px #fff solid ;
border: 1px #fff solid;
box-shadow: 0 0 2px #999, 0 0 2px #FFF,0px 0px 8px -2px #C7C7C7 inset;
padding-bottom: 20px;
}
[/css]
これで通常の線から、少しだけ立体感のある線に変更する事が出来ます。
ポイントは、白の線でハイライト部分をつくり、影で陰影を作る事によって、たった1ピクセルの白い線を背景のデザインに溶け込むようにみせている事です。
[css]border: 1px #fff solid; [/css]
と
[css]box-shadow: 0 0 2px #999, 0 0 2px #FFF,0px 0px 8px -2px #C7C7C7 inset; [/css]
の設定部分が重要です。
サイドフレームの枠を変更する
wordPress style.cssに更に記述する内容
メインフレームのお隣のサイドフレームにも枠をつけたい方は、以下のコードを記述してください
[css]
#wrap #wrap-in #side {
border-radius: 4px 4px 4px 4px;
background-color: #fff;
border: 1px #fff solid;
box-shadow: 0 0
2px #999, 0 0 2px #FFF,0px 0px 8px -2px #C7C7C7 inset;
}
[/css]
sitingerのサイドフレームにおける背景、デフォルト設定では、サイト全体の背景がそのままサイドフレームの背景に適用されます。
背景の色次第ですが、文字や写真画像を目立たせたい場合は、メインフレームと同じようにサイドフレームも立体感のある線で縁取りする事で画面に一体感がでてきます。
当サイトの場合は、背景が明るいので、そこまで目立たないかもしれませんが、背景が濃いサイトで実践すると効果ありますよ。
以上
wordpress stingerにおいてフレームの線を変更する方法でした。
