【注意‼】WordPressに引っ越ししました、改正が間に合っていない記事があります。

Comfortで、サイドバーやスライドメニュー、記事リンク、文字色等のカラーを変更する方法

f:id:oyomiyo:20180604152107j:plain

カード型デザインテーマ、Comfort(コンフォート)をお使いいただきありがとうございます。この記事では、このテーマのカラーを好みの色に変更する方法を紹介していきます。

まずは使うコードです。

CSS

<style type="text/css">
#slide-nav, #slide-nav .slide-nav-inner { background-color: #dfe5e7; /*スライドメニューの背景色*/}
#slide-nav .menu a { color: #3d3f44; /*スライドメニューの文字色*/}
.page-archive .archive-entries .archive-entry { background-color: #f5f5f5; /*記事リンクの背景色(一覧)*/}
.page-archive .categories a {
background: #aaa; /*記事リンク内のカテゴリーの背景色)*/
color: #fff; /*記事リンク内のカテゴリーの文字色*/ }
.hatena-module-title { background-color: #ddd; /*サイドバータイトルの背景色*/}
#box2 .hatena-module-title, #box2 .hatena-module-title a { color: #e60e0e; /*サイドバータイトルの文字色*/}
.hatena-module { background-color: #eee; /*サイドバーボックス内の背景色*/}
#box2 .hatena-module-recent-entries li, #box2 .entries-access-ranking li, #box2 .hatena-module-related-entries li { background-color: #fdfdfd; /*サイドバー内のサムネ付き記事リンク背景色*/}
#box2 .hatena-module-recent-entries li a, #box2 .hatena-module-entries-access-ranking li a, #box2 .hatena-module-related-entries li a { color: #666; /*サイドバー内のサムネ付き記事リンク文字色*/}
#entry-footer-secondary-modules .hatena-urllist li { background-color: #fdfdfd; /*記事下のサムネ付き関連記事リンク背景色*/}
#entry-footer-secondary-modules .hatena-urllist li a { color: #666; /*記事下のサムネ付き関連記事リンク文字色*/}
</style>

*2018/7/1修正しました。

必要なものをすべて詰め込んでしまったのでごちゃごちゃしていますが、必要な部分のみ変更すれば大丈夫です。

挿入する場所は以下の場所です。

f:id:oyomiyo:20180604145530p:plain

ダッシュボードから、デザイン→工具マーク→ヘッダと進み、タイトル下の部分に追加します。

既にコードが書き込まれている場合は、その最後の部分からいくつか改行して貼り付けるといいでしょう。

カラーの変更方法

ある程度カスタマイズの知識がある人からすれば、説明する必要もないかもしれませんが一応説明しておきます。

先ほど載せたコードをもう一度表示すると、

CSS

<style type="text/css">
#slide-nav .slide-nav-inner { background-color: #dfe5e7; /*スライドメニューの背景色*/}
#slide-nav .menu a { color: #3d3f44; /*スライドメニューの文字色*/}
.page-archive .archive-entries .archive-entry { background-color: #f5f5f5; /*記事リンクの背景色(一覧)*/}
.page-archive .categories a {
background: #aaa; /*記事リンク内のカテゴリーの背景色)*/
color: #fff; /*記事リンク内のカテゴリーの文字色*/ }
.hatena-module-title { background-color: #ddd; /*サイドバータイトルの背景色*/}
#box2 .hatena-module-title, #box2 .hatena-module-title a { color: #e60e0e; /*サイドバータイトルの文字色*/}
.hatena-module { background-color: #eee; /*サイドバーボックス内の背景色*/}
#box2 .hatena-module-recent-entries li, #box2 .entries-access-ranking li, #box2 .hatena-module-related-entries li { background-color: #fdfdfd; /*サイドバー内のサムネ付き記事リンク背景色*/}
#box2 .hatena-module-recent-entries li a, #box2 .hatena-module-entries-access-ranking li a, #box2 .hatena-module-related-entries li a { color: #666; /*サイドバー内のサムネ付き記事リンク文字色*/}
#entry-footer-secondary-modules .hatena-urllist li { background-color: #fdfdfd; /*記事下のサムネ付き関連記事リンク背景色*/}
#entry-footer-secondary-modules .hatena-urllist li a { color: #666; /*記事下のサムネ付き関連記事リンク文字色*/}
</style>

ごちゃごちゃしてるので難しく感じるかもしれませんが、必要になるのは赤表示にしている部分(カラーコード)だけなので、ほとんどの部分は無視してもらって大丈夫です。

カラーコード一覧などと検索すればかなりヒットしますから、そこから自分の好きな色を選んでいくといいでしょう。

先程のコードではコメントアウトにしてどの部分の色のことなのかを表示しているので、ストレスなく作業できると思います。

最後に

タイトルの部分については載せませんでしたが、タイトル周りのカスタマイズは別記事で扱っているのでそちらを参考にして下さい。

Comfort(コンフォート)タイトル周りのカスタマイズと、ヘッダー画像を設置する方法

以上です。お疲れ様でした!