ナビゲーション、モジュールタイトルなどサイト全体のテーマカラー設定について解説します。
管理画面 > [デザイン] > [(1)デザインCSS] > [(2)CSS記述欄]にて各要素を調整して下さい。
対象箇所
- ヘッダー・フッター
- ナビゲーション
- カテゴリー(記事一覧、記事内、サブカラムなど)
- モジュールタイトル/もっと見るボタン
初期状態のCSS記述
@charset "utf-8";
/* Responsive: yes */
/*-- p2 css */
@import url("https://usercss.blog.st-hatena.com/-/theme/6801883189053512682.css");
ココからCSSの各コードを貼り付けてテーマカラーをカスタマイズします。
@charset "utf-8"; 〜 @import url~.css");が初期状態のCSS記述となります。
テーマカラーを変更する場合は、その初期記述の下に各CSSをコピーして貼り付けていきます。
各コードの「color: カラーコード」の部分に #000000 の様なカラーコードを指定すると
ナビゲーションカラーやモジュールタイトルカラー等を変更できます。
初期状態のCSS記述は絶対に削除しないでください。
各カラーコード設定箇所
ヘッダー(PC & スマホ)
/* 運営会社ロゴ */
#hbm-head-media-logo {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
/* ヘッダーメディアの紹介文 */
.blog-description {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #010101 */
}
ナビゲーション(PC & スマホ)
/* ナビゲーション */
.navbar {
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
/* ナビゲーションリンク */
.navbar-list a {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #010101 */
}
/* ナビゲーションリンク(マウスオーバー時 & タップ時)*/
.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 only screen and (max-width: 768px) {
.navbar-list a {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #333333 */
}
}
フッター(PC & スマホ)
/* フッター(フッタリンクとフッタリンク間の区切り縦線)*/
.blog-footer__nav a {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #747474 */
border-right-color: ②区切り縦線のカラーコード; /* ←デフォルトのカラーコードは #747474 */
}
/* フッター(コピーライト)*/
.blog-footer__copy {
color: ③文字色のカラーコード; /* ←デフォルトのカラーコードは #747474 */
}
/* フッター(背景色)*/
.blog-footer {
background-color: ④背景色ののカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
/* ページトップへ戻る */
#GoTopBtn {
background-color: ⑤背景色のカラーコード; /* ←デフォルトのカラーコードは #505050 */
}
サイドバーのモジュールタイトルとアンダーライン(PC & スマホ)
/* サイドバーのモジュールタイトルとアンダーライン */
#box2 .hatena-module-title {
color: ①文字色のカラーコード; /* ←デフォルトのカラーコードは #010101 */
border-bottom-color: ②タイトル下ラインのカラーコード; /* ←デフォルトのカラーコードは #747474 */
}
カテゴリー(PC & スマホ)
/* カテゴリータグ */
.archive-entries section .category > a,
.urllist-categories a,
.archive-entries section .categories a,
.entry-categories a,
.hatena-module-category .hatena-urllist a {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #505050 */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
/* カテゴリータグ(マウスオーバー時 & タップ時)*/
.archive-entries section .category > a:hover,
.urllist-categories a:hover,
.archive-entries section .categories a:hover,
.entry-categories a:hover,
.hatena-module-category .hatena-urllist a:hover {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #505050 */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
もっと見るボタン(PC & スマホ)
/* ① もっと見るボタン(通常時) */
.urllist-see-more a {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #505050 */
}
.urllist-see-more a::after{
border-color: テキスト横矢印のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
/* ② もっと見るボタン(マウスオーバー時 & タップ時)*/
.urllist-see-more a:hover {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #505050 */
}
.urllist-see-more a:hover::after{
border-color: テキスト横矢印のカラーコード; /* ←デフォルトのカラーコードは #505050 */
}
お問い合わせボタン(PC & スマホ)
/* ① お問い合わせボタン(通常時) */
.SingleContact__btn {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #505050 */
border-color: 枠線のカラーコード; /* ←デフォルトのカラーコードは #505050 */
}
.SingleContact__btn::after{
border-color: テキスト横矢印のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
/* ② お問い合わせ(マウスオーバー時 & タップ時)*/
.SingleContact__btn:hover {
color: 文字色のカラーコード; /* ←デフォルトのカラーコードは #505050*/
background-color: 背景色のカラーコード; /* ←デフォルトのカラーコードは #FFFFFF */
}
.SingleContact__btn:hover::after{
border-color: テキスト横矢印のカラーコード; /* ←デフォルトのカラーコードは #505050 */
}