nanona-ui

使い方

<head> に共通ファイルを読み込み、ヘッダーとフッターの中身は各サイトで書きます。 nanona.js が、メインホームページ（nanona.me）へのリンク・テーマ切替・スマホ用メニュー・現在地の印を自動で足します。

<html lang="ja" data-nn-site="blog">
<head>
  <script>/* theme-init.js の中身をそのまま貼る */</script>
  <link rel="stylesheet" href="https://ui.nanona.me/v1/nanona.css">
</head>
<body>
  <header data-nn-header>
    <div class="nn-header__inner">
      <a class="nn-header__title" href="/">nanonaBlog</a>      ← サイト名
      <nav class="nn-header__nav" aria-label="ブログ内">          ← サイト内メニュー（任意）
        <ul><li><a href="/blog">記事一覧</a></li>…</ul>
      </nav>
      <div class="nn-header__tools">…</div>                    ← 検索ボタンなど（任意）
    </div>
  </header>
  <script src="https://ui.nanona.me/v1/nanona.js"></script>   ← ヘッダーの直後（defer なし）
  <main class="nn-page">…</main>
  <footer data-nn-footer>
    <div class="nn-footer__inner">…サイトごとの中身…</div>
  </footer>
</body>

ヘッダー・フッターの設定

色

基本

アクセント

水色は線・帯・面に、黄色は「現在地」「強調」「新着」にだけ使います。どちらも文字色には使いません。

文字

本文は 16px、行間 1.75 です。リンクは Wikipedia と同じ青で、強調したい語には黄色の下線を引きます。inline code や Ctrl + K も使えます。

引用は水色の線で区切ります。

部品

ボタン

入力

タブ

メッセージ

ラベル

Wikipedia Bot 新着 成功 失敗 警告 情報

カード

表