Simple Days テーマ設定とカスタムCSS解説

🎨 Simple Days テーマ設定とカスタムCSS解説

📄 テーマ情報(テーマヘッダー)

/*
Theme Name: Simple Days  // テーマの名前
Text Domain: simple-days  // 翻訳ファイルの識別子
Version: 0.9.191  // テーマのバージョン
Requires at least: 4.9  // 最低WordPressバージョン
Tested up to: 6.5  // 動作確認済みWPバージョン
Requires PHP: 5.3  // 最低PHPバージョン

Description:
Simple Daysは無料のレスポンシブ対応ブログテーマです。
スマホに最適化されたモバイルファースト設計で、カスタマイザーやGoogle Fonts、Gutenberg対応、日本語翻訳など、多くの機能に対応。
YAHMAN Add-onsでアクセス解析、SNS連携、SEO対応なども可能。

Tags:
カスタム背景、ヘッダー、ロゴ、メニュー、ウィジェット、レスポンシブ、翻訳対応など。

Author: YAHMAN
Author URI: https://back2nature.jp/
Theme URI: https://dev.back2nature.jp/en/simple-days/
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Domain Path: /languages
*/

💡 Google Fonts と日本語ゴシック体の統一CSS

/* Google Fonts「Noto Sans JP」を読み込み */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* 本文全体に日本語ゴシック体を適用 */
body, html {
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  font-weight: 400;
  line-height: 1.8;
  color: #333;
}

/* 見出しも同じフォントで統一し、やや太字に */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  font-weight: 600;
  line-height: 1.4;
  color: #222;
}

/* サイドバー・フッター・フォーム要素にも適用 */
.sidebar, .footer, .header, nav, input, textarea, button {
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif !important;
}

/* モバイル表示時にも同様のフォントを強制 */
@media screen and (max-width: 768px) {
  body, html {
    font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  }
}

📌 補足ポイント

  • font-family により、日本語表示に最適なゴシック体フォントを順に指定。
  • @import を使って Google Fonts から Noto Sans JP を読み込み。
  • !important によって他のCSSの上書きを防止。
  • media query でスマホでも同じフォントを明示。

🛠 使用方法

  1. このCSSを 外観 > カスタマイズ > 追加CSS に貼り付けます。
  2. フォントが正しく適用されたことをスマホやPCで確認します。
  3. さらにカスタマイズしたい場合はフォントサイズや行間などを調整可能です。

以上が Simple Days テーマにおける日本語フォント統一のCSS設定と解説です。

💡 Simple Days テーマのカスタムCSS(コメント付き)

/*
Theme Name: Simple Days  // テーマの名前
Text Domain: simple-days  // 翻訳ファイルの識別用ドメイン
Version: 0.9.191  // バージョン番号
Requires at least: 4.9  // 必須WordPressバージョン
Tested up to: 6.5  // テスト済みバージョン
Requires PHP: 5.3  // PHP最小バージョン

Description:
Simple Daysは、無料のレスポンシブWordPressブログテーマです。
スマホファースト設計で全デバイスに対応。カスタマイザー編集、Google Fonts 800種、
サイドバー(右・左・なし)選択、Gutenberg・翻訳対応、日本語あり。
YAHMAN Add-onsによりアクセス解析、SNS、目次、OGP、SEOなど多機能化可能。
子テーマ「Simple Days Plus」も利用可能。

Tags:
block-styles, custom-background, custom-colors, custom-header, custom-logo,
custom-menu, editor-style, featured-images, flexible-header, footer-widgets,
grid-layout, left-sidebar, one-column, post-formats, right-sidebar,
rtl-language-support, sticky-post, threaded-comments, translation-ready,
three-columns, two-columns, blog, news, wide-blocks

Author: YAHMAN
Author URI: https://back2nature.jp/
Theme URI: https://dev.back2nature.jp/en/simple-days/
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Domain Path: /languages
*/

/* --- 日本語ゴシック体フォントをGoogle Fontsから読み込み --- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

/* --- 本文とHTML全体のフォントを指定 --- */
body, html {
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  font-weight: 400;          /* 標準の太さで可読性良く */
  line-height: 1.8;          /* 行間を広めにして読みやすく */
  color: #333;               /* 少し薄めの黒で柔らかい印象 */
}

/* --- 見出し(h1〜h6)のフォントを統一し、やや強調 --- */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  font-weight: 600;          /* 見出しなので少し太めに */
  line-height: 1.4;          /* 行間は狭めでまとまり良く */
  color: #222;               /* 本文よりやや濃い色で強調 */
}

/* --- サイドバー、フッター、ナビゲーションなどもフォントを統一 --- */
.sidebar, .footer, .header, nav, input, textarea, button {
  font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif !important;
}

/* --- モバイル画面でもフォントが崩れないように再定義(保険) --- */
@media screen and (max-width: 768px) {
  body, html {
    font-family: 'Noto Sans JP', 'Yu Gothic', 'Meiryo', 'Hiragino Kaku Gothic ProN', sans-serif !important;
  }
}

このCSSは、[外観 > カスタマイズ > 追加CSS] に貼り付けることで適用されます。

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です