スタイルシートの変更だけで枠の角が丸くなるなんてすごいですよね！…いや、21世紀初頭からHTML手書きでホームページを作ってたりなんかする人だったりするので、スタイルシートのできることって、新鮮で驚きの連続です。

コメント欄の背景色も統一感のある色に変更

今回も変更するファイルはstyle.cssです。WordPressがインストールされているディレクトリの中にテーマが保存されているディレクトリがあり、その中の「gush2」内にあります。

ブログ全体的に背景色を青系にしたので、コメント欄も同じ色で囲った方が気持ちいいかな？ということで、色を変更してみました。現在の色合いはこのようになっています。

コメント欄の周りはアイボリーっぽい色になっていますが、こんな風に他の背景色と合わせた方がきれいそうだったので変更してみました。

style.cssの変更場所は1849行目の「#comment_box」です。

#comment_box {
     background: #fff url(images/sos.png) left top repeat;
     /* thnx! http://subtlepatterns.com/ */
}

「background」プロパティには、背景色「#fff」と画像ファイルが指定されていますので、背景色「#aaf」だけに変更します。

続いて、レスポンシブデザインなので、表示幅中サイズ用の変更もします。style.cssの変更場所は1522行目の「#comment_box」です。

#comment_box {
     text-align: left;
     background-color: #ddd;
     padding: 20px;
     margin-bottom: 20px;
}

これの「background-color」プロパティを「#ddd」から「#aaf」に変更しました。

コメント欄の角丸を角々にしてみた

続いて表示幅小サイズにして表示確認したところ、コメント欄の枠って角丸（角に丸みが付けてある）になっていることを発見。表示幅小サイズの場合、周りの背景色部分とコメント枠がくっつきますので、角丸だとなんとなく落ち着きが悪い気がします。

そんなわけで、コメント欄の背景色を変えるついでに、角丸処理もやめて普通の角に変更してみました。

この変更は、style.cssの895行目にある「#comment_box」を編集します。

#comment_box {
     text-align: left;
     background-color: #eee;
     padding: 20px;
     margin-bottom: 20px;
     border-radius: 8px;
     text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}

現在、このように定義されているのを、「background-color」プロパティは「#aaf」に変更します。また、角丸処理は「border-radius」というプロパティで定義されていますので、これを削除しました。

最終的にはこんな定義になります。

#comment_box {
text-align: left;
background-color: #aaf;
padding: 20px;
margin-bottom: 20px;

text-shadow: -1px 1px 0 rgba(255, 255, 255, 1);
}

これで角の丸みが無くなりました。外側の背景色とくっついても違和感が無くていい感じです。

え？Gush2オリジナルの方がよかったですか？あ、いや、まあ、こんな感じでいろいろな色やデザインを設定できますので、ぜひ、Gush2をカスタマイズしてみてくださいね！

今日の一言二言三言

角丸は　border-radius　使ったら

あっという間に　丸く収まるね

いやー、冒頭にもちょっと書きましたが、HTML手書きみたいな世代の人間から見ると、スタイルシートで文字に影が付けれたり、角が丸くなっちゃったり！ビックリしながらも楽しいのでついつい時間かけて調整しちゃいます。

これだけいろいろなことができるんなら、完全に画像表示なしのサイトなんて作ってみても面白いかもしれません。

WordPress初心者がブログを作るよ♪テーマは無料のGush2！

WordPressを使い始めて約９か月になりますが、もう１つ新しいサイトを立ち上げてみました。初めての時は試行錯誤の連続でひどいものでしたが、今回は、以前よりはもうちょっと整理した状態で作業内容をまとめながら進めたので、テスト用環境構築からGush2のカスタマイズまで連載記事にしてみました。

• WordPress初心者がGush2をカスタマイズしてブログを作るよ♪ – まとめ