ナビゲーション、モジュールタイトルなどサイト全体のテーマカラー設定について解説します。
管理画面 > [デザイン] > [(1)デザインCSS] > [(2)CSS記述欄]にて各要素を調整して下さい。
対象箇所
- ヘッダー・フッター
- ナビゲーション
- カテゴリー（記事一覧、記事内、サブカラムなど）
- モジュールタイトル／もっと見るボタン
初期状態のCSS記述
/* <system section="theme"> */
@import url("/css/theme/hbm-visual/style.css"); /* hbm-visualの場合 */
@import url("/css/theme/hbm-text/style.css"); /* hbm-textの場合 */
/* </system> */
/* <system section="background" selected="default"> */
/* default */
/* </system> */
/*メインカラム記事一覧タイトル行数設定（トップページ）*/
#main-inner .urllist-title-link {
max-height: 3em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/*メインカラム記事一覧タイトル行数設定（トップページ以外）*/
#main-inner .archive-entries .entry-title-link{
max-height: 3em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/*サブカラム 記事一覧タイトル行数設定*/
#box2-inner .urllist-title-link{
max-height: 3em;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
ココからCSSの各コードを貼り付けてテーマカラーをカスタマイズします。
/* <system section="theme"> */ 〜 -webkit-box-orient: vertical;} が初期状態のCSS記述となります。
テーマカラーを変更する場合は、その初期記述の下に各CSSをコピーして貼り付けていきます。
各コードの「color: カラーコード」の部分に #000000 の様なカラーコードを指定すると
ナビゲーションカラーやモジュールタイトルカラー等を変更できます。
初期状態のCSS記述は絶対に削除しないでください。
各カラーコード設定箇所
ヘッダー（PCのみ）
/* 運営会社ロゴ */
.blog-header .company-heading {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
ヘッダー（PC & スマホ）
/* ヘッダーメディア名 */
.blog-title-heading a {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #3D3F44 */
}
/* ヘッダー */
.blog-header {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: ②背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
ナビゲーション（PCのみ）
/* ナビゲーション */
.navbar {
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
ナビゲーション（PC & スマホ）
/* ナビゲーションリンク */
.navbar-list a {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
/* ナビゲーションリンク（マウスオーバー時 & タップ時）*/
.navbar-list a:hover {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #EFEFEF */
}
ハンバーガーボタン（スマホのみ）
/* ハンバーガーボタン（スマホのみ）*/
.navbar-toggle-btn-icon line {
stroke: ①ハンバーガーマークのカラーコード; /* ←デフォルトのカラーコードは #000000 */
}
.navbar-toggle-btn {
background-color: ②背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
/* ハンバーガーボタン：オープン後の背景色（スマホのみ）*/
.navbar-toggle-btn:hover:after {
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは rgba(0,0,0,.08) */
}
※背景色のカラーコードは、✖︎マークをクリックしてメニューを閉じた後も持続します。
ナビゲーション（スマホのみ）
/* ナビゲーションリンク */
@media (max-width: 767px) {
.navbar-list a {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
.head-operating-company {
text-align: 運営会社の文字位置; /* ←デフォルトの文字位置は center */
text-decoration: 運営会社の下線指定; /* ←デフォルトの下線指定は underline */
}
}
/* ナビゲーションリンク（項目タップ時） */
@media (max-width: 767px) {
.navbar-list a:hover {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #EFEFEF */
}
}
フッター（PC & スマホ）
/* フッター（company logo & フッタリンク）*/
.footer a {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
/* フッター（フッタリンク間の区切り縦線 & コピーライトと背景色）*/
.footer {
color: ②区切り縦線 & 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: ③背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
フッター（スマホのみ）
/* ページトップへ戻る */
.btn-back-top {
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
モジュールタイトル（PC & スマホ）
/* モジュールタイトル（サイドバーのこのメディアについて）*/
.about-blog-title {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
/* モジュールタイトル（メインカラム、サイドバーの人気記事、関連記事、カテゴリー、ピックアップ、リンク）*/
.hatena-module-title {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
/* モジュールタイトル（メインカラム、サイドバーの最新記事、月別アーカイブ）*/
.hatena-module-title a {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
/* モジュールタイトル（メインカラム、記事上、記事下配置の最新記事モジュール）*/
#main .hatena-module-title a {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
/* モジュールタイトル（メインカラム、記事上、記事下配置の最新記事以外のモジュール）*/
#main .hatena-module-title {
color: ②文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
サイドバーのアンダーライン（PC & スマホ）
/* サイドバーモジュールタイトル下のライン */
.hatena-module-title {
border-bottom-color: タイトル下ラインのカラーコード; /* ←デフォルトのカラーコードは #DEDEDF */
}
カテゴリー（PC & スマホ）
/* カテゴリータグ */
.categories a,
.entry-category-link,
.hatena-module-category .hatena-urllist li a,
.page-archive .categories a,
.urllist-category-link {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #666666 */
}
/* カテゴリータグ（マウスオーバー時 & タップ時）*/
.categories a:hover,
.entry-category-link:hover,
.hatena-module-category .hatena-urllist li a:hover,
.page-archive .categories a:hover,
.urllist-category-link:hover {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #CCCCCC */
}
もっと見るボタン（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 */
}