ナビゲーション、モジュールタイトルなどサイト全体のテーマカラー設定について解説します。
管理画面 > [デザイン] > [(1)デザインCSS] > [(2)CSS記述欄]にて各要素を調整して下さい。
対象箇所
- ヘッダー・フッター
- ナビゲーション
- カテゴリー（記事一覧、記事内、サブカラムなど）
- モジュールタイトル／もっと見るボタン
初期状態のCSS記述
/* <system section="theme"> */
@import url("/css/theme/hbm-simple-p1/style.css");
/* </system> */
/* <system section="background" selected="default"> */
/* default */
/* </system> */
ココからCSSの各コードを貼り付けてテーマカラーをカスタマイズします。
/* <system section="theme"> */ 〜 /* </system> */ が初期状態のCSS記述となります。
テーマカラーを変更する場合は、その初期記述の下に各CSSをコピーして貼り付けていきます。
各コードの「color: カラーコード」の部分に #000000 の様なカラーコードを指定すると
ナビゲーションカラーやモジュールタイトルカラー等を変更できます。
初期状態のCSS記述は絶対に削除しないでください。
各カラーコード設定箇所
ヘッダー（PCのみ）
/* 運営会社ロゴ */
.blog-header-logo .company-heading {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
ヘッダー（PC & スマホ）
/* ヘッダー */
.blog-header {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: ②背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
※①文字色のカラーコードは、メディア名とメディアの紹介文の2つの文字色が変更されます。
/* ヘッダーメディア名 */
.blog-title-heading a {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
※文字色のカラーコードは、メディア名のみ文字色が変更されます。
ナビゲーション（PCのみ）
/* ナビゲーション */
.navbar {
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #F5F5F5 */
}
ナビゲーション（PC & スマホ）
/* ナビゲーションリンク */
.navbar-list a {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
/* ナビゲーションリンク（マウスオーバー時 & タップ時）*/
.navbar-list a:hover {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #E4E4E4 */
}
ハンバーガーボタン（スマホのみ）
/* ハンバーガーボタン（スマホのみ）*/
.navbar-toggle-btn > span {
background-color: ①ハンバーガーマークのカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
.navbar-toggle-btn {
background-color: ②背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
/* ハンバーガーボタン：オープン（スマホのみ）*/
.navbar-toggle-btn.-open > span {
background-color: ①✖︎マークのカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
.navbar-toggle-btn.-open {
background-color: ②背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
ナビゲーション（スマホのみ）
/* ナビゲーションリンク */
@media (max-width: 768px) {
.navbar-list a {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
}
/* ナビゲーションリンク（項目タップ時）*/
@media (max-width: 768px) {
.navbar-list a:hover {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #EFEFEF */
}
}
フッター（PC & スマホ）
/* フッター（フッタリンク間の区切り縦線）*/
.footer-link>ul>li+li {
border-left-color: ①区切り縦線のカラーコード; /* ←デフォルトのカラーコードは #B5B5B5 */
}
/* フッター（COMPANY LOGO & フッタリンク & コピーライトと背景色）*/
.footer {
color: ②文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: ③背景色のカラーコード; /* ←デフォルトのカラーコードは #F5F5F5 */
}
/* ページトップへ戻る */
.btn-back-top {
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #2D2D2D */
}
アーカイブページ以外のモジュールタイトルとアンダーライン（PC & スマホ）
/* モジュールタイトル */
.hatena-module-title,
.about-blog-title {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
border-bottom-color: ②タイトル下ラインのカラーコード; /* ←デフォルトのカラーコードは #B5B5B5 */
}
/* モジュールタイトル下以外のライン */
.hatena-module-title::after,
.about-blog-title::after {
border-bottom-color: ラインのカラーコード; /* ←デフォルトのカラーコードは #F5F5F5 */
}
アーカイブページのモジュールタイトルとアンダーライン（PC & スマホ）
/* アーカイブモジュールタイトル */
.page-archive .archive-heading {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
border-bottom-color: ②タイトル下ラインのカラーコード; /* ←デフォルトのカラーコードは #B5B5B5 */
}
/* アーカイブモジュールのタイトル下以外のライン */
.page-archive .archive-heading:after {
border-bottom-color: ラインのカラーコード; /* ←デフォルトのカラーコードは #F5F5F5 */
}
カテゴリー（PC & スマホ）
/* カテゴリータグ */
.entry-category-link,
.urllist-category-link,
.archive-category-link,
.hatena-module-category .hatena-urllist a {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #F5F5F5 */
}
/* カテゴリータグ（マウスオーバー時 & タップ時）*/
.entry-category-link:hover,
.urllist-category-link:hover,
.archive-category-link:hover,
.hatena-module-category .hatena-urllist a:hover {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #F5F5F5 */
}
もっと見るボタン（PC & スマホ）
/* もっと見るボタン */
.urllist-see-more a {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: ②背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
border-color: ③枠線のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
/* もっと見るボタン（マウスオーバー時 & タップ時）*/
.urllist-see-more a:hover {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
background-color: ②背景色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
border-color: ③枠線のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}