WordPressテーマCocoon(コクーン)のインデックス色変更

ブログのこと
スポンサーリンク

シンプルがベストですが…

背景画像に芝画像を設置したら、なんとなくインデックス周辺が白くてサッパリし過ぎていて何かインパクトと言うか印象を変えたくメイン背景とインデックスページの記事部分背景色を変更してみました。

Cocoonのスキンはなしを使用しています。
インデックスのカードタイプはエントリーカード(デフォルト)です。

インデックスの背景色を変更するのに色々見て探しましたが分からず(何処かに変更できる所があるかもしれません)スタイルシートに書いちゃいました。

スタイルシートに書き込むのには、必ず子テーマでお願いします。
またphp、CSSなどを変更するときにはCocoon サポート対象外のものを読んだうえで行って下さい。
サポート対象外のもの
当テーマでは、できる限りサポートを行いたいと思いますが、管理者の時間的都合上サポートできないものもあるのでご了承ください。

スタイルシートで調整

変更前のトップページ

変更前のトップページがこんな感じです。
これはこれでシンプルで良いんですが…ちょっと寂しい?エントリーカードが白いのを変更したいと思いました。

CSS書き込み手順

WordPress外観⇒テーマエディット⇒スタイルシートに書き込みます。

CSSコードとファイルを保存

コードを書き込みましたらファイルを更新して確かめてください。

/* main背景色 */
.home .main{
background-color: #008000;
color: #fff;/*テキストカラー*/
}
.a-wrap{ /* インデックスページの記事背景色 */
background-color: #fff8dc;
}

文字色変更

スポンサーリンク、シェアするの文字が黒かったのでテキストカラーで白色にしています。

変更後のトップページ

こんな感じに仕上げてみました。

まとめ

緑色の背景でエントリーカードを薄肌色で見やすくなった感じです。
今回サイドバーは変更していませんが、サイドバーの背景色も変更していこうと考えています。
自分が気にいた色に装飾してみるとサイトの雰囲気も変わって楽しいです♪

最後まで読んで頂きありがとうございました。
また、次の記事でお会いいたしましょう。

コメント

タイトルとURLをコピーしました