WordPress初心者がブログを作るよ♪Gush2をカスタマイズして、コメント欄の背景色変更と枠の角丸をやめてみるとか。

公開日:  最終更新日:2015/02/26

SiSO-LAB WordPressで初心者がブログを作るよ

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

本記事は、WordPress V4.1と無料テーマのGush2 V1.1.1にて動作確認を行っています。

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

今回も変更するファイルはstyle.cssです。WordPressがインストールされているディレクトリの中にテーマが保存されているディレクトリがあり、その中の「gush2」内にあります。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、タイトル背景色、左寄せ

ブログ全体的に背景色を青系にしたので、コメント欄も同じ色で囲った方が気持ちいいかな?ということで、色を変更してみました。現在の色合いはこのようになっています。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、コメント欄のカスタマイズ

コメント欄の周りはアイボリーっぽい色になっていますが、こんな風に他の背景色と合わせた方がきれいそうだったので変更してみました。
SiSO-LAB 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」に変更しました。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、コメント欄のカスタマイズ

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

続いて表示幅小サイズにして表示確認したところ、コメント欄の枠って角丸(角に丸みが付けてある)になっていることを発見。表示幅小サイズの場合、周りの背景色部分とコメント枠がくっつきますので、角丸だとなんとなく落ち着きが悪い気がします。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、コメント欄のカスタマイズ

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

この変更は、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);
}

これで角の丸みが無くなりました。外側の背景色とくっついても違和感が無くていい感じです。
SiSO-LAB WordPressで初心者がブログを作る・Gush2、コメント欄のカスタマイズ

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

 

今日の一言二言三言

 

角丸は border-radius 使ったら

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

 

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

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

 

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

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

関連前後記事

Your Message

メールアドレスが公開されることはありません。


*

PAGE TOP ↑