タイトル
h2タイトル
<h2 class="mtitle">h2タイトル</h2>
h3タイトル
<h3 class="stitle">h3タイトル</h3>
h4タイトル
<h4 class="sstitle">h4タイトル</h4>
h5タイトル
<h5 class="ssstitle">h5タイトル</h5>
文字修飾など
太字
class="bold1"吾輩は猫である。名前はまだ無い。
<p>吾輩は猫である。<span class="bold1">名前はまだ無い。</span></p>
<span class="bold1"></span>
どこで生れたかとんと見当がつかぬ。
<p>どこで生れたかとんと<span class="bold2">見当</span>がつかぬ。</p>
<span class="bold2"></span>
明朝体
class="font1"吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
<p class="font1">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。
<p class="font2">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>
センター寄せ
class="center"吾輩は猫である。名前はまだ無い。
<p class="center">吾輩は猫である。名前はまだ無い。</p>
リンク
class="link"※aタグを囲むpタグにつけます。
<p class="link">
<a href="リンク先URL" target="_blank" rel="noopener">リンクテキスト</a>
</p>
ボタン
class="btn-bd-key"※aタグを囲むdivタグにつけます。
■漫画コンテンツのコメントリンク
<div class="btn-bd-key">
<a href="https://nekochan.jp/cat/comment/xxxxx">応援や感想のメッセージはこちらから</a>
</div>
■外部リンクなど
<div class="btn-bd-key">
<a href="リンク先URL" target="_blank" rel="nofollow noopener">ボタンのテキスト</a>
</div>
枠・囲み
枠
class="waku1"- ブルーベリーベーグル
- チーズ蒸しパン
サンプルはリストが入っていますが、中身はリストに限らずpタグなどなんでも構いません。
<div class="waku1">
<ul class="ulist">
<li>ブルーベリーベーグル</li>
<li>チーズ蒸しパン</li>
</ul>
</div>
<div class="waku1">
</div>
ここがポイント
タイトルあり
吾輩は猫である
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
タイトルなし
吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。
<div class="point_color">
<p class="point_title">吾輩は猫である</p>
<p>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
</div>
■タイトルあり
<div class="point_color">
<p class="point_title">タイトル</p>
<p>ポイントのテキスト</p>
</div>
■タイトルなし
<div class="point_color">
<p>ポイントのテキスト</p>
</div>
吹き出し
通常の吹き出し
回答者
ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。
監修者など
吹き出しタイトル
ではみなさんは、そういうふうに川だと云われたり、乳の流れたあとだと云われたりしていたこのぼんやりと白いものがほんとうは何かご承知ですか。
■通常の吹き出し
<div class="baloon">
<div class="baloon_icon">
<img src="吹き出し発言者の画像URL">
<div class="baloon_name">
発言者の名前
</div>
</div>
<div class="baloon_text-bold">
吹き出しのテキスト
</div>
</div>
■監修者など
<div class="baloon">
<div class="baloon_icon">
<img src="吹き出し発言者の画像URL">
<div class="baloon_name">
<a href="発言者リンクURL">発言者の肩書き<br>
発言者の名前</a>
</div>
</div>
<div class="baloon_text">
<div class="baloon_title">吹き出しタイトル</div>
<div class="text">
吹き出しのテキスト
</div>
</div>
</div>
その他の修飾
Q&A
犬との生活で困った時には、誰に相談したらいいの？
まずは、わんちゃんの購入先のブリーダーさんやペットショップに相談することを検討してみましょう。
とりわけトイプードルの専門家であるブリーダーさんであれば、知識や経験も非常に豊富です。また、わんちゃんの体調や病気に関することであればかかりつけの獣医師にアドバイスを求め、しつけに関する悩みであればドックトレーナーさんに相談するのも良いでしょう。
<div class="articleqa">
<div class="articleqa_q">
<p>犬との生活で困った時には、誰に相談したらいいの？</p>
</div>
<div class="articleqa_a">
<p>まずは、わんちゃんの購入先のブリーダーさんやペットショップに相談することを検討してみましょう。</p>
</div>
<div class="articleqa_text">
<p>とりわけトイプードルの専門家であるブリーダーさんであれば、知識や経験も非常に豊富です。また、わんちゃんの体調や病気に関することであればかかりつけの獣医師にアドバイスを求め、しつけに関する悩みであればドックトレーナーさんに相談するのも良いでしょう。</p>
</div>
</div>
<div class="articleqa">
<div class="articleqa_q">
<p>質問のテキスト</p>
</div>
<div class="articleqa_a">
<p>回答のテキスト</p>
</div>
<div class="articleqa_text">
<p>補足テキスト</p>
</div>
</div>
リスト
※リストで使用するul,ol,dlタグはpタグで囲むことはできません。
順序なしリスト（ulタグ）
class="ulist"- 安心して眠れるスペースを用意する。
- 新鮮な水を用意する。
- 快適な室温にする。
<ul class="ulist">
<li>安心して眠れるスペースを用意する。</li>
<li>新鮮な水を用意する。</li>
<li>快適な室温にする。</li>
</ul>
<ul class="ulist">
<li></li>
<li></li>
</ul>
順序付きリスト（olタグ）
class="olist"- フタを開けて調味油を取り出します。
- 熱湯を内側の線まで注ぎます。
- 3分後、調味油を入れてかきまぜてください。
<ol class="olist">
<li>フタを開けて調味油を取り出します。</li>
<li>熱湯を内側の線まで注ぎます。</li>
<li>3分後、調味油を入れてかきまぜてください。</li>
</ol>
<ol class="olist">
<li></li>
<li></li>
</ol>
順序付きリスト（olタグ） タイプ-2
class="olist2"- フタを開けてソース、かやくを取り出します。
- かやくを麺の上にのせ、熱湯を内側の線まで注ぎます。
- 3分後、ソースを入れてよくかきまぜてください。
<ol class="olist2">
<li>フタを開けてソース、かやくを取り出します。</li>
<li>かやくを麺の上にのせ、熱湯を内側の線まで注ぎます。</li>
<li>3分後、ソースを入れてよくかきまぜてください。</li>
</ol>
<ol class="olist2">
<li></li>
<li></li>
</ol>
説明（記述）リスト（dlタグ）
class="dlist"- 名前
- スコティッシュフォールド
- 性格
- 人懐っこく甘えん坊
- 大きさ
- 小型～中型程度
- 寿命
- 10年～13年ほど
<dl class="dlist">
<dt>名前</dt>
<dd>スコティッシュフォールド</dd>
<dt>性格</dt>
<dd>人懐っこく甘えん坊</dd>
<dt>大きさ</dt>
<dd>小型～中型程度</dd>
<dt>寿命</dt>
<dd>10年～13年ほど</dd>
</dl>
<dl class="dlist">
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
リストの囲み（タイトル付き）
ベンガルの平均寿命
- 家の外には出ない
- 家の外と中の行き来ができる
- 散歩に出かける
<div class="box_with_title">
<h3 class="title">ベンガルの平均寿命</h3>
<div class="box">
<ul class="ulist">
<li>家の外には出ない</li>
<li>家の外と中の行き来ができる</li>
<li>散歩に出かける</li>
</ul>
</div>
</div>
<div class="box_with_title">
<h3 class="title"></h3>
<div class="box">
<ul class="ulist">
<li></li>
<li></li>
</ul>
</div>
</div>
※h3要素の部分は入れ込む場所によってh4要素などに変更してください。p要素も使えます。
※コードを挿入するブロックが h2 のタイトルの下になる場合は h3 にします。
h3 の下になる場合は h4 にします。
見出し要素(h3～h6)にするまでもないかなという場合があれば p や div にしても崩れることはありません。
表組み
※表組みで使用するtableタグはpタグで囲むことはできません。
表（tableタグ）項目が上のもの
class="table1"| 名前 | 血液型 | 星座 | 身長 |
|---|---|---|---|
| 白石 | A型 | しし座 | 162cm |
| 秋元 | B型 | しし座 | 154cm |
| 生田 | A型 | みずがめ座 | 160cm |
<table class="table1">
<tbody>
<tr>
<th>名前</th>
<th>血液型</th>
<th>星座</th>
<th>身長</th>
</tr>
<tr>
<td>白石</td>
<td>A型</td>
<td>しし座</td>
<td>162cm</td>
</tr>
<tr>
<td>秋元</td>
<td>B型</td>
<td>しし座</td>
<td>154cm</td>
</tr>
<tr>
<td>生田</td>
<td>A型</td>
<td>みずがめ座</td>
<td>160cm</td>
</tr>
</tbody>
</table>
<table class="table1">
<tbody>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
項目となる<th>タグはセルの色のclass="bg"と同じ効果で表示されます。
表（tableタグ）項目が左のもの
class="table1"| 名前 | 白石 | 秋元 | 生田 |
|---|---|---|---|
| 血液型 | A型 | B型 | A型 |
| 星座 | しし座 | しし座 | みずがめ座 |
| 身長 | 162cm | 154cm | 160cm |
<table class="table1">
<tbody>
<tr>
<th>名前</th>
<td>白石</td>
<td>秋元</td>
<td>生田</td>
</tr>
<tr>
<th>血液型</th>
<td>A型</td>
<td>B型</td>
<td>A型</td>
</tr>
<tr>
<th>星座</th>
<td>しし座</td>
<td>しし座</td>
<td>みずがめ座</td>
</tr>
<tr>
<th>身長</th>
<td>162cm</td>
<td>154cm</td>
<td>160cm</td>
</tr>
</tbody>
</table>
<table class="table1">
<tbody>
<tr>
<th></th>
<td></td>
<td></td>
</tr>
<tr>
<th></th>
<td></td>
<td></td>
</tr>
</tbody>
</table>
項目となる<th>タグはセルの色のclass="bg"と同じ効果で表示されます。
セルの色
| セルの | 色 | サンプル |
|---|---|---|
| class="bg" | class="bg_pink" | class="bg_glay" |
| class="bg_blue" | class="bg_green" | class="bg_orange" |
| trにclassを | 入れると | 行単位で色が変わる |
<table class="table1">
<tbody>
<tr>
<th>セルの</th>
<th>色</th>
<th>サンプル</th>
</tr>
<tr>
<td class="bg">class="bg"</td>
<td class="bg_pink">class="bg_pink"</td>
<td class="bg_glay">class="bg_glay"</td>
</tr>
<tr>
<td class="bg_blue">class="bg_blue"</td>
<td class="bg_green">class="bg_green"</td>
<td class="bg_orange">class="bg_orange"</td>
</tr>
<tr class="bg_pink">
<td>trにclassを</td>
<td>入れると</td>
<td>行単位で色が変わる</td>
</tr>
</tbody>
</table>
セル内の配置
| 指定なし | センター | 左寄せ | 右寄せ |
|---|---|---|---|
| 指定なし | class="center" | class="left" | class="right" |
| trに入れると | 行単位で | 配置が | 変わります |
| でも | 部分で入れれば | そこだけ | 変わります |
<table class="table1">
<tbody>
<tr>
<th>指定なし</th>
<th>センター</th>
<th>左寄せ</th>
<th>右寄せ</th>
</tr>
<tr>
<td>指定なし</td>
<td class="center">class="center"</td>
<td class="left">class="left"</td>
<td class="right">class="right"</td>
</tr>
<tr class="right">
<td>trに入れると</td>
<td>行単位で</td>
<td>配置が</td>
<td>変わります</td>
</tr>
<tr class="right">
<td>でも</td>
<td>部分で入れれば</td>
<td class="left">そこだけ</td>
<td>変わります</td>
</tr>
</tbody>
</table>
表を横スクロールさせる（スマホ時）
table要素のclass属性に「scroll」を追加します。
| 蛋白質 | 脂肪 | 炭水化物 | カルシウム | リン | ナトリウム | カリウム | マグネシウム | 鉄 | 銅 | マンガン | 亜鉛 |
|---|---|---|---|---|---|---|---|---|---|---|---|
| 餌の28%以上 | 9%以上 | 40%以下 | 1g | 0.8g | 0.2g | 0.4g | 0.05g | 10mg | 0.5mg | 1.0mg | 4.0mg |
<table class="table1 scroll">
注）PC版では幅が大きすぎる表は右側にはみ出す場合があります。（セルの内容が長めの数字、長めの英単語の場合に発生しやすいです）
幅の大きな表は向きを変えることができないか検討してみてください。どうしてもスクロールさせたい場合はご相談ください。
セル内で改行しない（スマホ時）
セル（tdやth）、行（tr）にclass="text-nowrap"を追加するとセル内のテキストを改行しません。
<tr class="text-nowrap">
<th class="text-nowrap">テキスト</th>
<td class="text-nowrap">テキスト</td>
サンプルとして上の表では項目の行、「餌の28%以上」のセルに入れてあります。
セル内で強制改行する
セル内（tdやth）にclass="text-break"を追加するとセル内の長い英文字（URL、ハイフンやスペースのない英文字）を強制改行します。
<th class="text-break">http://example.com/hogefugapiyo/hogefugapiyo/</th>
<td class="text-break">http://example.com/hogefugapiyo/hogefugapiyo/</td>
表をスクロールする機能（tableにclass="table1 scroll"）を使っているときは動作しません。
表の中は特定の条件でないと英文字は自動的に改行せず突き抜けてしまいますので長い英文字（URLなど）を入れる場合はこれを使ってください。
2列の表組を1列表示にする（スマホ時）
table要素のclass属性に「tlist」を追加します。1列表示にすることでスマホ版で見やすくなる場合があります。
| イカ、タコ、エビ、カニ、貝等の一部の魚介類 | イカなどに含まれる酵素であるチアミナーゼ（サイアミナーゼ）はビタミンB1を破壊するため、長期にわたって摂取した場合、背骨の変形を引き起こすなどし、寿命も短縮される。 |
|---|---|
| アワビ、サザエ、ノリ | 死亡する危険はないが、春先のアワビのツノワタ（内臓）を食べさせるとネコの耳が腐れ落ちると東北地方でいわれている。 |
| 塩分・味の濃い食品 | 塩分は生体機能を維持するために必要であるが、ヒト向けに味付けされた食品の塩分量では一般に多すぎる。発汗に伴って多量の塩分を失うヒトに対し、ネコはほとんど汗をかかないことによる。 |
<table class="table1 tlist">
この機能を使う場合はその表の中で前項の「セル内で改行しない」を使用しないようにしてください。セル内のテキスト長さによっては表示崩れが発生することがあります。
画像
画像のみ
<div class="source"><img src="画像のURLを入れる" alt="画像の説明を入れる"></div>
<div class="source"><img src="" alt=""></div>
引用リンクつき画像
<div class="source">
<img src="画像のURL" alt="画像の説明">
<p>出典：<a href="出典リンクURL" target="_blank" rel="nofollow noopener">出典名</a></p>
</div>
<div class="source">
<img src="" alt="">
<p>出典：<a href="" target="_blank" rel="nofollow noopener">出典名</a></p>
</div>
キャプションつき画像
これはかわいい猫です
<div class="source"><img src="画像のURL" alt="画像の説明"><p class="img-caption">キャプションのテキスト</p></div>
<div class="source"><img src="" alt=""><p class="img-caption"></p></div>
今日のねこちゃんリンクつき画像
今日のねこちゃんより：弦之介 / ♂ / 1歳 / ブリティッシュショートヘア / 5kg
<div class="source"><img src="画像のURL" alt="弦之介"></div>
<p class="source_link-todaycat">今日のねこちゃんより：<a href="/photo/detail/16" target="_blank">弦之介 / ♂ / 1歳 / ブリティッシュショートヘア / 5kg</a></p>
引用
テキストの引用
天の川の西の岸にすぎなの胞子ほどの小さな二つの星が見えます。あれはチュンセ童子とポウセ童子という双子のお星さまの住んでいる小さな水精のお宮です。
出典：双子の星
<div class="bq1">
<blockquote>
ここに引用テキストを入れる
</blockquote>
<p class="quote">出典：<a href="出典リンクURL" target="_blank" rel="nofollow noopener">出典名</a></p>
</div>
<div class="bq1">
<blockquote>
</blockquote>
<p class="quote">出典：<a href="" target="_blank" rel="nofollow noopener">出典名</a></p>
</div>
関連記事
サムネイルつき
%%LINK-A-21%%
※数字は記事IDです。
テキストのみ
%%LINK-B-21%%
※数字は記事IDです。
専門家のコメント
写真入りのコメント
<div class="supervision_comment">
<div class="supervision_comment_content">
<div class="supervision_comment_title">補足タイトル</div>
<p>補足本文</p>
%%KANSHU-番号%%
</div>
<!-- / .supervision_comment -->
</div>
写真なしコメント（監修者と同じ人の場合）
監修獣医師による補足
天の川の西の岸にすぎなの胞子ほどの小さな二つの星が見えます。あれはチュンセ童子とポウセ童子という双子のお星さまの住んでいる小さな水精のお宮です。
獣医師：平松育子
<div class="supervision_comment">
<div class="supervision_comment_content">
<div class="supervision_comment_title">監修獣医師による補足</div>
<p>
★テキスト★
</p>
<div class="supervision_comment_name">獣医師：平松育子</div>
</div>
</div>
天の川の西の岸にすぎなの胞子ほどの小さな二つの星が見えます。あれはチュンセ童子とポウセ童子という双子のお星さまの住んでいる小さな水精のお宮です。
よろしくジョバンニは、せわしくいろいろのことを考えながら、さまざまの灯や木の枝で、すっかりきれいに飾られた街を通って行きました。時計屋の店には明るくネオン燈がついて、一秒ごとに石でこさえたふくろうの赤い眼が、くるっくるっとうごいたり
リンクタグ