テンプレート
- 見出し
- テキストの色
- フォントサイズ
- 強調、フォントサイズ、色のミックス
- 段落
- 箇条書き
- 横揃え
- 装飾
- 画像
- テキストボタン
- 罫線
- ボックス
- 注釈ボックス
- iOS / Android切り替え
- アコーディオン
見出し
h1見出し：iOS8以下のサポート終了のお知らせ
h2サブ見出し：iOS8以下のサポート終了のお知らせ
h3サブサブ見出し：iOS8以下のサポート終了のお知らせ
<h1>h1見出し：iOS8以下のサポート終了のお知らせ</h1>
<h2>h2サブ見出し：iOS8以下のサポート終了のお知らせ</h2>
<h3>h3サブサブ見出し：iOS8以下のサポート終了のお知らせ</h3>
<h2>h2サブ見出し：iOS8以下のサポート終了のお知らせ</h2>
<h3>h3サブサブ見出し：iOS8以下のサポート終了のお知らせ</h3>
テキストの色
赤：日頃よりご愛顧いただきまして。
青：日頃よりご愛顧いただきまして。
緑：日頃よりご愛顧いただきまして。
オレンジ：日頃よりご愛顧いただきまして。
灰色：日頃よりご愛顧いただきまして。
赤：日頃よりご愛顧いただきまして。
青：日頃よりご愛顧いただきまして。
緑：日頃よりご愛顧いただきまして。
オレンジ：日頃よりご愛顧いただきまして。
灰色：日頃よりご愛顧いただきまして。
<p class="red">赤：日頃よりご愛顧いただきまして。</p>
<p class="blue">青：日頃よりご愛顧いただきまして。</p>
<p class="green">緑：日頃よりご愛顧いただきまして。</p>
<p class="orange">オレンジ：日頃よりご愛顧いただきまして。</p>
<p class="gray">灰色：日頃よりご愛顧いただきまして。</p>
<p>赤：<span class=”red”>日頃よりご愛顧</span>いただきまして。</p>
<p>青：<span class=”blue”>日頃よりご愛顧</span>いただきまして。</p>
<p>緑：<span class=”green”>日頃よりご愛顧</span>いただきまして。</p>
<p>オレンジ：<span class=”orange”>日頃よりご愛顧</span>いただきまして。</p>
<p>灰色：<span class=”gray”>日頃よりご愛顧</span>いただきまして。</p>
<p class="blue">青：日頃よりご愛顧いただきまして。</p>
<p class="green">緑：日頃よりご愛顧いただきまして。</p>
<p class="orange">オレンジ：日頃よりご愛顧いただきまして。</p>
<p class="gray">灰色：日頃よりご愛顧いただきまして。</p>
<p>赤：<span class=”red”>日頃よりご愛顧</span>いただきまして。</p>
<p>青：<span class=”blue”>日頃よりご愛顧</span>いただきまして。</p>
<p>緑：<span class=”green”>日頃よりご愛顧</span>いただきまして。</p>
<p>オレンジ：<span class=”orange”>日頃よりご愛顧</span>いただきまして。</p>
<p>灰色：<span class=”gray”>日頃よりご愛顧</span>いただきまして。</p>
フォントサイズ
すごい大きいフォント
大きいフォント
少しだけ大きなフォント
通常の大きさ
少しだけ小さなフォント
小さいフォント
すごい小さいフォント
<p><span class="xx-large">すごい大きいフォント</span></p>
<p><span class="x-large">大きいフォント</span></p>
<p><span class="large">少しだけ大きなフォント</span></p>
<p>通常の大きさ</p>
<p><span class=”small”>少しだけ小さなフォント</span></p>
<p><span class=”x-small”>小さいフォント</span></p>
<p><span class=”xx-small”>すごい小さいフォント</span></p>
<p><span class="x-large">大きいフォント</span></p>
<p><span class="large">少しだけ大きなフォント</span></p>
<p>通常の大きさ</p>
<p><span class=”small”>少しだけ小さなフォント</span></p>
<p><span class=”x-small”>小さいフォント</span></p>
<p><span class=”xx-small”>すごい小さいフォント</span></p>
強調、フォントサイズ、色のミックス
強調＋すごい大きいフォント＋赤
強調＋大きいフォント＋青
強調＋少しだけ大きいフォント＋緑
強調＋すごい大きいフォント
強調＋大きいフォント
強調＋少しだけ大きいフォント
強調
強調＋少しだけ小さなフォント
強調＋小さいフォント
強調＋すごい小さいフォント
<p><strong class="xx-large red">強調＋すごい大きいフォント＋赤</strong></p>
<p><strong class="x-large blue">強調＋大きいフォント＋青</strong></p>
<p><strong class="large green">強調＋少しだけ大きいフォント＋緑</strong></p>
<p><strong class="xx-large">強調＋すごい大きいフォント</strong></p>
<p><strong class="x-large">強調＋大きいフォント</strong></p>
<p><strong class="large">強調＋少しだけ大きいフォント</strong></p>
<p><strong>強調</strong></p>
<p><strong class="small">強調＋少しだけ小さなフォント</strong></p>
<p><strong class="x-small">強調＋小さいフォント</strong></p>
<p><strong class="xx-small">強調＋すごい小さいフォント</strong></p>
<p><strong class="x-large blue">強調＋大きいフォント＋青</strong></p>
<p><strong class="large green">強調＋少しだけ大きいフォント＋緑</strong></p>
<p><strong class="xx-large">強調＋すごい大きいフォント</strong></p>
<p><strong class="x-large">強調＋大きいフォント</strong></p>
<p><strong class="large">強調＋少しだけ大きいフォント</strong></p>
<p><strong>強調</strong></p>
<p><strong class="small">強調＋少しだけ小さなフォント</strong></p>
<p><strong class="x-small">強調＋小さいフォント</strong></p>
<p><strong class="xx-small">強調＋すごい小さいフォント</strong></p>
段落
通常のPタグになります。上下左右にマージンがつきます。
Pタグに「.margin0」を設定しています。上下左右にマージンがつきません。
<p>通常のPタグになります。上下左右にマージンがつきます。</p>
<p class="margin0">Pタグに「.margin0」を設定しています。上下左右にマージンがつきません。</p>
<p class="margin0">Pタグに「.margin0」を設定しています。上下左右にマージンがつきません。</p>
箇条書き
- 中黒リスト1
- 中黒リスト2
- 中黒リスト3
- 番号リスト1
- 番号リスト2
- 番号リスト3
<ul>
<li>中黒リスト1</li>
<li>中黒リスト2</li>
<li>中黒リスト3</li>
</ul>
<ol>
<li>番号リスト1</li>
<li>番号リスト2</li>
<li>番号リスト3</li>
</ol>
<li>中黒リスト1</li>
<li>中黒リスト2</li>
<li>中黒リスト3</li>
</ul>
<ol>
<li>番号リスト1</li>
<li>番号リスト2</li>
<li>番号リスト3</li>
</ol>
横揃え
中央揃え中央揃え(上下マージン含む)
右揃え右揃え(上下マージン含む)
左揃え左揃え(上下マージン含む)
<p class="center">中央揃え中央揃え</p>
<p class="right">右揃え右揃え</p>
<p>左揃え左揃え</p>
<p class="right">右揃え右揃え</p>
<p>左揃え左揃え</p>
装飾
日付
2月16日 更新
<div class="box type1">
<p class="date">2月16日 更新</p>
</div>
<p class="date">2月16日 更新</p>
</div>
画像
横幅100% (未指定の場合は横幅100%で表示します)
親要素にpタグを囲む必要はありません。
<img src="dummy_img100_1.png" alt=""><br>
<img src="dummy_img100_2.png">
<img src="dummy_img100_2.png">
通常のサイズ(.dafault付与)
※.dafaultを付与しない場合、横幅100%で表示します。
<img src="img/dummy_icon.png" alt="" class="default" >
通常のサイズ (.dafault付与 + 中央揃え)
※.dafaultを付与しない場合、横幅100%で表示します。
<p class="center"><a href="#"><img src="dummy_icon.png" alt="" class="default"></a></p>
通常のサイズ (.dafault付与 + 右揃え)
※.dafaultを付与しない場合、横幅100%で表示します。
<p class="right"><a href="#"><img src="dummy_icon.png" alt="" class="default"></a></p>
テキストボタン
<p><a href="#" class="button">ダウンロード</a></p>
テキストボタン＋中央揃え
<p class="center"><a href="#" class="button">ダウンロード</a></p>
テキストボタン＋右揃え
<p class="right"><a href="#" class="button">ダウンロード</a></p>
罫線
<hr>
ボックス
ポール・ゴーギャン
株式仲買人としての仕事を始めた1873年頃から、ゴーギャンは、余暇に絵を描くようになった。
ポール・ゴーギャン
株式仲買人としての仕事を始めた1873年頃から。
<div class="media">
<div class="media-image"><img src="https://sweetdaysinfo.com/wp-content/uploads/2018/03/dummy_icon.png" alt="" class="default"></div>
<div class="media-body">
<h3>ポール・ゴーギャン</h3>
<p>株式仲買人としての仕事を始めた1873年頃から、ゴーギャンは、余暇に絵を描くようになった。</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3>ポール・ゴーギャン</h3>
<p>株式仲買人としての仕事を始めた1873年頃から。</p>
</div>
<div class="media-image"><img src="https://sweetdaysinfo.com/wp-content/uploads/2018/03/dummy_icon.png" alt="" class="default"></div>
</div>
<div class="media-image"><img src="https://sweetdaysinfo.com/wp-content/uploads/2018/03/dummy_icon.png" alt="" class="default"></div>
![https://sweetdaysinfo.com/wp-content/uploads/2018/03/dummy_icon.png"](https://sweetdaysinfo.com/wp-content/uploads/2018/03/dummy_icon.png"){kind=link}
<div class="media-body">
<h3>ポール・ゴーギャン</h3>
<p>株式仲買人としての仕事を始めた1873年頃から、ゴーギャンは、余暇に絵を描くようになった。</p>
</div>
</div>
<div class="media">
<div class="media-body">
<h3>ポール・ゴーギャン</h3>
<p>株式仲買人としての仕事を始めた1873年頃から。</p>
</div>
<div class="media-image"><img src="https://sweetdaysinfo.com/wp-content/uploads/2018/03/dummy_icon.png" alt="" class="default"></div>
</div>
注釈ボックス
【今回からの変更点】
アイテムの交換開始日が発売「1ヶ月後」 → 「2週間後」に変更
以前よりも、早く交換できるようになりました！
<div class=”box type2″>
<h2>【今回からの変更点】</h2>
<p>アイテムの交換開始日が発売「1ヶ月後」 → 「2週間後」に変更<br>
以前よりも、早く交換できるようになりました！</p>
</div>
<h2>【今回からの変更点】</h2>
<p>アイテムの交換開始日が発売「1ヶ月後」 → 「2週間後」に変更<br>
以前よりも、早く交換できるようになりました！</p>
</div>
iOS / Android切り替え
このテキストはiOSの環境のみで表示されています。
このテキストはAndroidの環境のみで表示されます。
※PC環境は、どちらのデバイスも表示します
<p class="ios">このテキストはiOSの環境のみで表示されます。</p>
<p class="android">このテキストはAndroidのみで環境のみ表示されます。</p>
<p class="android">このテキストはAndroidのみで環境のみ表示されます。</p>
アコーディオン
1月29日（月）16:30頃にアップデート(Ver 2.1.51)を実施しました。アップデート内容は以下となります。
詳細
- プロフィールからウィッシュが送れるようになりました。
- アイテムの不具合を修正しました。
1月24日（水）11:00頃にアップデート(Ver 2.1.49)を実施しました。アップデート内容は以下となります。
詳細
- ハウスのコーデ帳機能が追加されました。
- ハウスを保存した時にコーデ帳に登録できます。
- 新しいイベントが始まります。
12月31日（日）13:00頃にアップデート(Ver 2.1.46)を実施しました。アップデート内容は以下となります。
詳細
- ファッションのコーデ帳機能が追加されました。
- ファッションを保存した時にコーデ帳に登録できます。
- デコドールのメイクに新色が追加されました。
- 遊具やお風呂でリトルを遊ばせると固まる不具合を修正いたしました。
- 「設定＞データ容量の最適化」で期限が過ぎても表示されるお知らせポップアップが表示されなくなります。
ご利用の端末でApp Storeを開き、右下の「アップデート」タブよりアプリをアップデートしてください。
<div class="accordion">
<section id="ver-2151">
<div class="accordion-title"><a href="#ver-2151">Ver 2.1.51リリース<span class="date">2018年1月29日</span></a></div>
<div class="accordion-body">
<p>1月29日（月）16:30頃にアップデート(Ver 2.1.51)を実施しました。アップデート内容は以下となります。</p>
<h3>詳細</h3>
<ul>
<li>プロフィールからウィッシュが送れるようになりました。</li>
<li>アイテムの不具合を修正しました。</li>
</ul>
</div>
</section>
<section id="ver-2149">
<div class="accordion-title"><a href="#ver-2149">Ver 2.1.49リリース<span class="date">2018年1月24日</span></a></div>
<div class="accordion-body">
<p>1月24日（水）11:00頃にアップデート(Ver 2.1.49)を実施しました。アップデート内容は以下となります。</p>
<h3>詳細</h3>
<ul>
<li>ハウスのコーデ帳機能が追加されました。</li>
<li>ハウスを保存した時にコーデ帳に登録できます。</li>
<li>新しいイベントが始まります。</li>
</ul>
</div>
</section>
<section id="ver-2146">
<div class="accordion-title"><a href="#ver-2146">Ver 2.1.46リリース<span class="date">2017年12月31日</span></a></div>
<div class="accordion-body">
<p>12月31日（日）13:00頃にアップデート(Ver 2.1.46)を実施しました。アップデート内容は以下となります。</p>
<h3>詳細</h3>
<ul>
<li>ファッションのコーデ帳機能が追加されました。</li>
<li>ファッションを保存した時にコーデ帳に登録できます。</li>
<li>デコドールのメイクに新色が追加されました。</li>
<li>遊具やお風呂でリトルを遊ばせると固まる不具合を修正いたしました。</li>
<li>「設定＞データ容量の最適化」で期限が過ぎても表示されるお知らせポップアップが表示されなくなります。</li>
</ul>
<p>ご利用の端末でApp Storeを開き、右下の「アップデート」タブよりアプリをアップデートしてください。</p>
</div>
</section>
</div>
<section id="ver-2151">
<div class="accordion-title"><a href="#ver-2151">Ver 2.1.51リリース<span class="date">2018年1月29日</span></a></div>
<div class="accordion-body">
<p>1月29日（月）16:30頃にアップデート(Ver 2.1.51)を実施しました。アップデート内容は以下となります。</p>
<h3>詳細</h3>
<ul>
<li>プロフィールからウィッシュが送れるようになりました。</li>
<li>アイテムの不具合を修正しました。</li>
</ul>
</div>
</section>
<section id="ver-2149">
<div class="accordion-title"><a href="#ver-2149">Ver 2.1.49リリース<span class="date">2018年1月24日</span></a></div>
<div class="accordion-body">
<p>1月24日（水）11:00頃にアップデート(Ver 2.1.49)を実施しました。アップデート内容は以下となります。</p>
<h3>詳細</h3>
<ul>
<li>ハウスのコーデ帳機能が追加されました。</li>
<li>ハウスを保存した時にコーデ帳に登録できます。</li>
<li>新しいイベントが始まります。</li>
</ul>
</div>
</section>
<section id="ver-2146">
<div class="accordion-title"><a href="#ver-2146">Ver 2.1.46リリース<span class="date">2017年12月31日</span></a></div>
<div class="accordion-body">
<p>12月31日（日）13:00頃にアップデート(Ver 2.1.46)を実施しました。アップデート内容は以下となります。</p>
<h3>詳細</h3>
<ul>
<li>ファッションのコーデ帳機能が追加されました。</li>
<li>ファッションを保存した時にコーデ帳に登録できます。</li>
<li>デコドールのメイクに新色が追加されました。</li>
<li>遊具やお風呂でリトルを遊ばせると固まる不具合を修正いたしました。</li>
<li>「設定＞データ容量の最適化」で期限が過ぎても表示されるお知らせポップアップが表示されなくなります。</li>
</ul>
<p>ご利用の端末でApp Storeを開き、右下の「アップデート」タブよりアプリをアップデートしてください。</p>
</div>
</section>
</div>