Blanky Nordic — ドキュメント

Blanky Nordic は、ブログのためのブロックテーマです。北欧の雑誌のような、セリフ体の見出し・静かな罫線・紺と金の配色で組んでいます。3.7 で、ブログに要るものだけに絞って作り直しました。

目次

1. 概要
2. 動作環境
3. インストール
4. 3.6 から更新したとき
5. テンプレート一覧
6. 使い方
7. ブロックのスタイル
8. スタイルバリエーションとダークモード
9. 日本語の表示
10. 自動アップデート
11. 子テーマでのカスタマイズ
12. サポート・リソース

概要

主な特徴:

• トップは全記事の新しい順。1件目（または先頭固定表示の記事）を大きく見せ、2件目からカードのグリッド
• ヘッダー2種（題字型と1行型）
• 一覧はカードのグリッドと、左に画像を置いたリストを切り替え
• サイドバー付きの記事ページ（本文 750px）。リード文・著者・日付・読了時間、著者紹介、前後の記事、関連記事3件
• 共有ボタン（X・Facebook・はてなブックマーク・リンクをコピー）
• 「広告」の表示付きの広告枠パターン
• ヘッダーのボタンで切り替えるダークモード
• スタイルバリエーション4種（既定・Nordic Midnight・Nordic Ink・Nordic Sand）
• 和文の見出しの合成斜体を止め、字送り・行送りを整える和文タイポグラフィ
• すべてシステムフォント。外部のサーバーからは何も読み込みません
• 369theme.com 経由の自動アップデート対応

動作環境

インストール

1. テーマのアップロード
   購入時にダウンロードした blanky-nordic.zip を、WordPress 管理画面の「外観」→「テーマ」→「新しいテーマを追加」→「テーマのアップロード」から選びます。
2. 有効化
   「今すぐインストール」→「有効化」をクリックします。今ある記事が、そのまま Nordic のデザインで表示されます。

「設定」→「表示設定」で、ホームページに固定ページを選んでいる場合は、その固定ページが表示されます。投稿の一覧は「投稿ページ」に選んだページに出ます。

3.6 から更新したとき

3.7 では、3.6 のトップページの部品（リードヒーロー・About・マガジンヒーロー・お知らせ・記事グリッド）と、フロントページのテンプレートを外しました。サイトエディターで編集して保存したテンプレートは、外した部品を参照したままになり、その場所が空になります。

1. 「外観」→「エディター」→「テンプレート」で、そのテンプレートを開きます。
2. 右上のメニュー（⋮）から「リセット」を選びます。新しい形に戻ります。
3. フロントページのテンプレートを編集していた場合は、それも削除するかリセットしてください。

テンプレート一覧

テンプレートパーツは「ヘッダー」「ヘッダー（1行）」「フッター」「サイドバー」の4つです。

使い方

大きく見せる記事を選ぶ

投稿の編集画面の設定で「先頭固定表示」をオンにします。ブログの1ページ目の先頭に来て、大きく表示されます。固定した記事が無いときは、いちばん新しい記事が大きくなります。2ページ目からは、すべて同じ大きさのカードです。

ヘッダーを切り替える

1. 「外観」→「エディター」でテンプレートを開きます。
2. 左上の「リスト表示」を開き、一番上の「ヘッダー」をクリックします。画面のヘッダーを直接クリックすると、中の部品が選ばれてしまいます。
3. 右のパネルの「デザイン」に、2つのヘッダーがサムネイルで並びます。使いたいほうを押して、保存します。

• Nordic ヘッダー（題字） — 既定。キャッチフレーズの帯、大きなサイト名、線に挟んだナビ、検索とダークモードのボタン
• Nordic ヘッダー（1行） — 1行。サイト名、ナビ、検索とダークモードのボタン

一覧の形を変える

サイトエディターで、一覧の中の「投稿テンプレート」ブロックを選び、右のパネルの「スタイル」で選びます。

広告・アフィリエイトを入れる

1. ブロックの挿入画面の「パターン」から、カテゴリー「Blanky Nordic のパターン」の「広告枠」を、置きたい場所に入れます。
2. 中のカスタム HTML ブロックに、広告のコードを貼ります。

全部の記事に出したいときは、テンプレートパーツ「サイドバー」に入れます。

枠には最初から「広告」の表示が付いています。読者に広告であることを示すためのものです。文言は書き換えられます。

共有ボタン

記事の本文の下に、X・Facebook・はてなブックマーク・リンクをコピーの4つが並びます。どれもただのリンクで、各サービスのスクリプトは読み込みません。読者がボタンを押したときだけ、そのサービスに移ります。

「リンクをコピー」は、https のページでだけ動きます（ブラウザの決まりです）。http の開発用サイトでは「コピーできませんでした」と表示されます。Discord や GitHub などは共有用のリンクが無いため、「リンクをコピー」でアドレスを貼ってもらう形になります。

読了時間

記事の日付の横に出ます。WordPress 6.9 で追加された「読了時間」ブロックを使うので、6.7・6.8 では何も表示されません。

ブロックのスタイル

ブロックを選び、右のパネルの「スタイル」で選べます。

スタイルバリエーションとダークモード

「外観」→「エディター」→「スタイル」で選びます。

どの配色でも、本文・ボタン・補足の文字のコントラストは WCAG AA（4.5:1 以上）を満たしています。金は線と飾りに使い、文字には使っていません。

ダークモード

ヘッダーの月のボタンで、サイト全体が夜の配色に切り替わります。選んだ状態は、読者のブラウザに保存されます。端末（OS）の設定には追従しません。

スタイルを「Nordic Midnight」にしているときは、もともと暗いのでボタンは出ません。

日本語の表示

日本語の翻訳ファイル（languages/ja.po・ja.mo）を同梱しています。「設定」→「一般」のサイトの言語が日本語なら、テーマの文言が日本語で表示されます。テーマ名やスタイルバリエーションの名前は、英語のままにしています。

和文の見出しには、合成斜体（和文にはイタリック体が無いため、ブラウザが字を傾けて作る偽物の斜体）を使わず、字送りと行送りも和文向けに整えています。指定は日本語の部分（:lang(ja)）にだけ効き、フォントの種類は変えません。

自動アップデート

Blanky Nordic は 369theme.com のアップデートサーバーと連携しており、WordPress 管理画面から最新版にアップデートできます。

アップデートの確認方法

更新確認は最大1時間キャッシュされます。「外観」→「テーマ」画面に表示される「今すぐ更新を確認」から、すぐに確認し直せます。新しいバージョンがあれば、通知が表示されます。

子テーマでのカスタマイズ

1. フォルダを作る
   wp-content/themes/ の中に、my-nordic-child などの名前で空のフォルダを作ります。
2. style.css に書く
   style.css を作り、先頭に次のコードを書きます。これで子テーマとして認識されます。ブロックテーマの子テーマなので、index.php はいりません。

   /**
    * Theme Name: My Nordic Child
    * Template: blanky-nordic
    * Text Domain: my-nordic-child
    */
   

3. functions.php に書く
   Blanky Nordic は自分の CSS を部品ごとに読み込むので、子テーマの style.css は自動では読み込まれません。functions.php を作り、次のコードを書きます。blanky-nordic-ja は Blanky Nordic が最後に読み込む CSS です。最後の 20 は、Blanky Nordic（10）より後に読み込むための指定です。Blanky Nordic のすべての CSS の後に並ぶので、子テーマに書いた CSS で上書きできます。

   <?php
   function my_nordic_child_enqueue_styles() {
   	wp_enqueue_style(
   		'my-nordic-child-style',
   		get_stylesheet_uri(),
   		array( 'blanky-nordic-ja' ),
   		wp_get_theme()->get( 'Version' )
   	);
   }
   add_action( 'wp_enqueue_scripts', 'my_nordic_child_enqueue_styles', 20 );
   

4. テンプレートのファイルをコピーする
   変更したいテンプレートのファイルを、親テーマ blanky-nordic から、子テーマの同じ場所（例：my-nordic-child/templates/single.html）にコピーします。書き換えは子テーマのファイルで行います。

サポート・リソース

公式リソース

• Blanky Nordic の紹介ページ — テーマの紹介
• Blanky Nordic の商品ページ — テーマの購入
• Blanky の紹介ページ — ベースになった無料テーマ

サポート

• お問い合わせ — 質問やサポートのご相談
• カスタマイズのご依頼 — 有料のカスタマイズ
• サポートポリシー — サポートの範囲