Home

2025
2
4
火

サイト情報

ここはXXXが管理するOOOサイトです。???にお気を付けくださいなど

サイト：Site name
ＵＲＬ：https://nanos.jp/URL/
管理人：管理人名 など

管理人

blog / mail

アナログもデジタルも愛する

Template

2025
4
16
水

テンプレート情報

よくあるノート風デザインです。全てCSSのみで作成しているので、画像を保存する必要はありません。

2025.4.16 追記

Safari環境で4行目以降からページ罫線が崩れてしまう不具合を修正しました。対応が遅れてしまい申し訳ありません。
お手数をおかけしますが、CSSを差し替えていただけると幸いです。
※タグは変更していないため、以前配布したコードのままご利用いただけます。
また、CSSの修正に併せて、装飾の追加を行いました。内容は以下をご確認ください。

修正箇所

Safari環境のページ罫線のズレを修正
<h4>見出しの影のはみ出し修正
<p>の最後の破線が薄くなる問題を修正
一部フォントを変更（視認性向上のため）
その他、全体的なサイズ感調整（行間など）

追加箇所

ヘッダー（サイトタイトルとリンク）
2カラム表示（1400px以上の環境のみ）
方眼紙風の背景
<h5>追加（↑の「追加箇所」など）
リスト記号
- 順序なしリスト
  - ■ 四角（入れ子3つ目）
  - ● 丸（class="pin_o"）
  - ■ 長方形（class="mag"）
  - その他特殊装飾
    - チェック（class="check"）
    - ←これ棒線（class="bar"）
    - プラス（class="plus"）
    - スラッシュ（class="slash"）
- 順序ありリスト
テープ装飾の追加（上部両側）
リングノート風（※一部環境では四角い穴になります）のページ（上部・左部の2パターン）
ピン・マグネットっぽい装飾
- ◆ ピン風四角（class="pin"）
- ● ピン風丸（class="pin_o"）
- ■ マグネット風長方形（class="mag"）

カスタマイズ情報

css

:root内のコードを修正することで、ページの行間（罫線の幅）および各装飾の色が変更できます。変更可能な値はCSSをご覧ください。

html

2カラム（横幅1400px以上）

<section>をclass="flex"で囲むと、1400px以上の環境で2カラムになります。

画面いっぱいのページ幅（599px以下）

<main>にclass="full"と指定すると、599px以下の環境でのみページ（<section>）の幅が画面いっぱいになります。サンプルはページ最下部へ。

見出し4（h4）

見出し4・5は付箋風のデザインになります。通常の背景色は黄色。
色を変更したい場合は、classまたはstyle指定で任意の色に変更可能（この場合は background-color: thistle; と指定）。

class指定なし

class="green"

class="pink"

class="blue"

class指定なし

class="green"

class="pink"

class="blue"

テキスト装飾（mark）

markタグでマーカー風装飾ができます。通常は黄色です。class指定によって緑色・ピンク色・青色に変更可能です。

見出し4と同様、style指定で色が変更できます。（こちらもマーカーと同様 background-color: thistle; と指定。カラーコード指定でも問題ありません。）
<strong>ではマーカー＋太字。上記の色変更も可能です。

順序なしリスト装飾（ul）

class="check"で記号が変わります。チェックボックスではありません。
他にも多数。詳細は以下のサンプルをご覧ください。

Sample

デザイン見本

<p>サンプル
<p>内リンクサンプル
<p>内<br>サンプル改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

連続<p>サンプル　若干前後にスペースが空きます。

<b>　~~<s>~~　<i>
※一部環境ではフォントによって<i>の表示が異なります。

<strong>
<strong class="green">
<strong class="pink">
<strong class="blue">

h2

h3

h4（指定なし）

h4 class="green"

h4 class="pink"

h4 class="blue"

h4 style="background-color:任意の色"

h5（指定なし）

class="green"

class="pink"

class="blue"

h4 style="background-color:任意の色"

h4

inline-blockなので、h4の横に文字が入れられます。長いと下の行へ。

h5

横に繋げたくない場合は、お手数ですが<br>で改行してください。

↓hr（水平線）

順序ありリストサンプル
<ol><li></li></ol>で作れます
改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
入れ子リストサンプル
1. 入れ子リストサンプル
2. 更に入れ子
  1. 入れ子リストサンプル
  2. ※すべて数字になります。
2桁まで続けます
サンプル
サンプル
サンプル
サンプル
4桁以上だと罫線からはみ出します。

順序なしリストサンプル
<ul><li></li></ul>で作れます
改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト
リスト内リンク
入れ子リストサンプル
- 入れ子リストサンプル
- 更に入れ子
  - 入れ子リストサンプル
  - 記号の変化は3段階のみ

class="check"でチェック記号。
改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="bar"で－記号。
改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="plus"で＋記号。
上の＋に合わせて作りましたが使い道ないかも。開閉もできません。
改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="slash"で／記号。
- Information
- Contents
  - Novel (Long)
  - Novel (Short)
- Contact
サイトマップなどに良いかも（なんとかひねり出した使い道）

※ダミーのためどこにも送信されません。

その他装飾見本

<hgroup>＋<ul>でここに文章
多いと改行されます
最後尾は必ず（）が付きます。一つだけだと（）のみ

以下のclassを指定することで、テープやピンなどの装飾ができます。

section 内で更に class="tape" を使用するとこんな感じ。テープが若干小さくなります。

<p>タグも使えます。改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="tape_tl" はこんな感じ。

class="tape_both" はこんな感じ。

section 内で更に class="ring_t" を使用するとこんな感じ。
※一部環境では四角い穴になります。

section 内で更に class="ring_l" を使用するとこんな感じ。
※特定の状況下でやむなく左のリングの影がずれてしまう可能性があります。ずれてしまった場合はsection末尾に<br>（改行）を追加して調整してください。
※一部環境では四角い穴になります。

section 内で更に class="pin" を使用するとこんな感じ。

section 内で更に class="pin_o" を使用するとこんな感じ。

section 内で更に class="mag" を使用するとこんな感じ。

class="box"指定で何もついていないボックスも作れます。

<p>にclass="no"を指定すると、罫線のない通常の<p>が使えます。改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

罫線あり<p>と並べるとこんな感じ。改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="tape"

section自体に指定するとこんな感じ。
上部中央にテープを貼ります。改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="tape_tl"

左上にテープを貼ります。改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="tape_both"

上部両側にテープを貼ります。改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="ring_l"

左部にリングノート風の穴を空けます。※一部環境では四角い穴になります。
改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

※特定の状況下でやむなく左のリングの影がずれてしまう可能性があります。ずれてしまった場合はsection末尾に<br>（改行）を追加して調整してください。

class="ring_t"

上部にリングノート風の穴を空けます。※一部環境では四角い穴になります。
改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="pin"

上部にピンを打ちます。改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="pin_o"

上部に丸いピンを打ちます。改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="mag"

上部にマグネット風の四角が付きます。改行テストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテストテスト

class="full"あり見本

<main>にclass="full"を追加すると、599px以下（スマートフォンなど）で画面横幅いっぱいの表示になります。
※それより大きい環境では最大500pxの横幅を保ちます。

両側のテープ装飾（class="tape_both"）のみデザインが崩れるので非推奨。

Home

サイト情報

管理人

Template

テンプレート情報

2025.4.16 追記

修正箇所

追加箇所

カスタマイズ情報

css

html

2カラム（横幅1400px以上）

画面いっぱいのページ幅（599px以下）

見出し4（h4）

class指定なし

class="green"

class="pink"

class="blue"

class指定なし

class="green"

class="pink"

class="blue"

テキスト装飾（mark）

順序なしリスト装飾（ul）

Sample

デザイン見本

h2

h3

h4（指定なし）

h4 class="green"

h4 class="pink"

h4 class="blue"

h4 style="background-color:任意の色"

h5（指定なし）

class="green"

class="pink"

class="blue"

h4 style="background-color:任意の色"

h4

h5

その他 装飾見本

class="tape"

class="tape_tl"

class="tape_both"

class="ring_l"

class="ring_t"

class="pin"

class="pin_o"

class="mag"

class="full"あり見本

その他装飾見本