パーツリスト

太字

<b>ここに文章、太字</b>
ここに文章、太字

赤字

<span class="red">ここに文章、赤字</span>

ここに文章、赤字

大字

<span class="sobig">ここに文章、大きい字</span>

ここに文章、大きい字

蛍光ペンアンダーライン(黄色)

<span class="keiko_yellow">蛍光ペンアンダーライン(黄)</span>

蛍光ペンアンダーライン(黄)

キャプション

<span class="small">キャプションなので、説明書きに使います</span>

キャプションなので、説明書きに使います

box2

[box class="box2"]ここに文章、グレーの枠[/box]
ここに文章、グレーの枠

box11

[box class="box11"]ここに文章、グレーの背景BOX[/box]
ここに文章、グレーの背景BOX

box26

[box class="box26" title="タイトル"]ここに文章、補足BOX[/box]
タイトル
ここに文章、補足BOX

box30

[box class="box30" title="ここにタイトル"] ここに文章、グレーのタイトル付き背景BOX[/box]
ここにタイトル
ここに文章、タイトル付き背景BOX

メモ(補足説明の使い方)

[memo title="MEMO"]ここに文章、補足説明BOX[/memo]
MEMO
ここに文章、補足説明BOX

※「MEMO」は変更可能

[memo title="チェックポイント"]ここに文章、補足説明BOX[/memo]
チェックポイント
ここに文章、補足説明BOX

画像の圧縮

https://tinypng.com/

吹き出し

アイコンに使用する人の画像サイズは【width150px × height150px】に揃える

[say name="名前を入力" img="画像のURL"]ここに文章[/say]

例:[say name="市川" img="https://blog.kaitai-guide.net/blog/wp-content/uploads/2019/02/icon-ichikawa2.jpg"]ここに文章を入力します。しゃべり言葉でOKです。[/say]

市川

ここに文章を入力します。しゃべり言葉でOKです。

外部リンク

他サイトに飛ばすリンクを作成するには、下記URLで紹介されている設定が必要
https://icora-design.com/wp/blog/194/

例:[sanko href="https://keiei.freee.co.jp/" target="_blank" title="経営ハッカー" site="「経営 × テクノロジー」の最先端を切り拓くメディア"] 参考 経営ハッカー「経営 × テクノロジー」の最先端を切り拓くメディア

画像のサイズ変更・タイトル入力

ペイント、Adobe Illustrator、Adobe Photoshopを使用
【widthを680px】に揃える

表の装飾

見出しセル

グレーの背景

<th>グレー</th>

データセル

装飾なし

<td>装飾なし</td>

表のサンプル

<table>
	<tbody>
		<tr>
			<装飾なし>
			<装飾なし>
			<装飾なし>
		</tr>
		<tr>
			<th>グレー</th>
			<装飾なし>
			<装飾なし>
		</tr>
	</tbody>
</table>
グレー 装飾なし 装飾なし
グレー 装飾なし 装飾なし

スマホで表示した時に横スクロール出来る表

<table class="tb-responsive"></table>

スマホの時だけ表示されるテキスト

[mobile]スマホの時だけ表示されます[/mobile]

表のサンプル

[mobile]<span class=”keiko_yellow”><span class=”small”>※画面から文字がはみ出した部分は横にスクロールできます</span></span>[/mobile]
<table class="tb-responsive">
	<tbody>
		<tr>
			<th>グレー</th>
			<td>装飾なし装飾なし</td>
		</tr>
		<tr>
			<th>グレー</th>
			<td>装飾なし装飾なし装飾なし装飾なし</td>
		</tr>
		<tr>
			<th>グレー</th>
			<td>装飾なし装飾なし装飾なし装飾なし装飾なし装飾なし</td>
		</tr>
	</tbody>
</table>
グレー 装飾なし装飾なし
グレー 装飾なし装飾なし装飾なし装飾なし
グレー 装飾なし装飾なし装飾なし装飾なし装飾なし装飾なし

横並び2列


[yoko2 responsive]
[cell]1列目:画像・文章などをここに[/cell]
[cell]2列目:画像・文章などをここに[/cell]
[/yoko2]
2列目:画像・文章などをここに スマホだと下側に配置される

横並び3列


[yoko3 responsive]
[cell]1列目:画像・文章などをここに[/cell]
[cell]2列目:画像・文章などをここに[/cell]
[cell]3列目:画像・文章などをここに[/cell]
[/yoko3]
1列目:画像・文章などをここに スマホだと上側に配置される
3列目:画像・文章などをここに スマホだと下側に配置される

改行をデバイスごとに

PCのみ改行する(スマホは改行しない)

<br class="pc">

PCで表示している時は
ココで改行します。

スマホのみ改行する(PCは改行しない)

<br class="sp">

スマホで表示している時は
ココで改行します。

表の装飾

見出しセル

タイトル表示(PCは若干広めで表示、スマホは若干狭め表示)

<th class="title">タイトル</th>

スマホで表示した時に文字が小さくなる表

<table class="moji"></table>

表のサンプル

<table class="moji">
	<tbody>
		<tr>
			<th class="title">タイトル</th>
			<td>装飾なし</td>
			<td>装飾なし</td>
			<td>装飾なし</td>
		</tr>
		<tr>
			<th class="title">やや長めのタイトル</th>
			<td>装飾なし装飾なし装飾なし</td>
			<td>装飾なし装飾なし装飾なし</td>
			<td>装飾なし装飾なし装飾なし</td>
		</tr>
		<tr>
			<th class="title">そこそこな長さの<br class="pc">タイトル</th>
			<td>装飾なし装飾なし装飾なし装飾なし</td>
			<td>装飾なし装飾なし装飾なし装飾なし</td>
			<td>装飾なし装飾なし装飾なし装飾なし</td>
			<td>装飾なし装飾なし装飾なし装飾なし</td>
		</tr>
		<tr>
			<th class="title">かなりの長さで表示した時のタイトル</th>
			<td>装飾なし装飾なし装飾なし装飾なし装飾なし</td>
			<td>装飾なし装飾なし装飾なし装飾なし装飾なし</td>
			<td>装飾なし装飾なし装飾なし装飾なし装飾なし</td>
			<td>装飾なし装飾なし装飾なし装飾なし装飾なし</td>
		</tr>
	</tbody>
</table>
タイトル 装飾なし 装飾なし 装飾なし
やや長めのタイトル 装飾なし装飾なし装飾なし 装飾なし装飾なし装飾なし 装飾なし装飾なし装飾なし
そこそこな長さの
タイトル
装飾なし装飾なし装飾なし装飾なし 装飾なし装飾なし装飾なし装飾なし 装飾なし装飾なし装飾なし装飾なし
かなりの長さで表示した時のタイトル 装飾なし装飾なし装飾なし装飾なし装飾なし 装飾なし装飾なし装飾なし装飾なし装飾なし 装飾なし装飾なし装飾なし装飾なし装飾なし