■■ねこちゃんホンポ　記事修飾サンプル■■

ねこちゃんホンポ記事内の文字修飾やリスト、表組みのサンプルです。HTMLは多少間違っていてもブラウザが補正してくれちゃうので意外と適当に書いても表示されることが多いのですが、SEOを考慮すると正しい構文（マークアップ）で書くことが大切です。よくわからないことがありましたらお気軽に高橋（秀）に聞いてみてください。

2016年10月03日更新

執筆ライター

あらてすと

タイトル

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>

class="bold2"

どこで生れたかとんと見当がつかぬ。

<p>どこで生れたかとんと<span class="bold2">見当</span>がつかぬ。</p>

<span class="bold2"></span>

明朝体

class="font1"

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

<p class="font1">吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。</p>

class="font2"

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。

<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>

<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>

LINE RSSフィードでの画像判定のためdivの開始タグ <div class="source"> の部分は改変せずに使用してください。
詳細はタスクNECO-712及びWAN-2679を参照のこと

引用リンクつき画像

出典：Pastel Cat World

<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です。

テキストのみ