スタイル
2025/11/26
【001】囲み枠 H3
外部のスピーカーから音楽を流す2つの方法とは
<h3 class="square"><span>外部のスピーカーから音楽を流す2つの方法とは</span></h3>
【002】吹き出し見出し小
AVケーブルはこのようなやつ
<h3 class="balloon"><span>AVケーブルはこのようなやつ</span></h3>
【002】吹き出し見出し小 色違い
AVケーブルはこのようなやつ
<h3 class="balloon pink"><span>AVケーブルはこのようなやつ</span></h3>
【003】ステップスタイル
<div class="point1">Bluetoothスピーカーのペアリングモードをオンにする</div>
<div class="point2">Alexaアプリでデバイスを選択</div>
<div class="point3">Bluetoothデバイスを選択</div>
【004】チェックスタイル
Bluetoothスピーカーのペアリングモードをオンにする
Alexaアプリでデバイスを選択
Bluetoothデバイスを選択
<h3 class="style003"><span><div class="point"><span>1</span></div>Bluetoothスピーカーのペアリングモードをオンにする</span></h3>
<h3 class="style003"><span><div class="point"><span>2</span></div>Alexaアプリでデバイスを選択</span></h3>
<h3 class="style003"><span><div class="point"><span>3</span></div>Bluetoothデバイスを選択</span></h3>
【005】記事抜粋のスタイル 画像と見出し、説明のスタイル
- Amazon Echo 3種類の違いと、おすすめの Alexa 対応製品
- Amazon Echo の日本における販売は、2017年11月から開始されました。
販売開始当初は、購入するために招待メールを受け取る手続きが必要で、誰もが買える状態で…
<dl class="extract">
<dt><img src="https://via.placeholder.com/600x600" /></dt>
<dd class="title"><a href="#">Amazon Echo 3種類の違いと、おすすめの Alexa 対応製品</a></dd>
<dd class="text">Amazon Echo の日本における販売は、2017年11月から開始されました。<br />
<p>販売開始当初は、購入するために招待メールを受け取る手続きが必要で、誰もが買える状態で…</dd></p>
</dl>
【006】囲み線 自由に項目見出しありリス
製品構成
- Amazon Echo 本体
- AC アダプター
- 説明書
- 使い方の例
<div class="boxed">
<h4 class="title">製品構成</h4>
<ul>
<li>Amazon Echo 本体</li>
<li>AC アダプター</li>
<li>説明書</li>
<li>使い方の例</li>
</ul>
</div>
【007】囲み線 項目見出しなしリスト
- Amazon Echo 本体
- AC アダプター
- 説明書
- 使い方の例
<div class="boxed">
<ul>
<li>Amazon Echo 本体</li>
<li>AC アダプター</li>
<li>説明書</li>
<li>使い方の例</li>
</ul>
</div>
【008】囲み線 登録スミ「注意事項」
画面の注意書きにある通り、Wi-Fi の接続先リストに該当の SSID が表示されるまで、しばらく時間がかかることがあります。
<div class="boxed remarks">
<p>画面の注意書きにある通り、Wi-Fi の接続先リストに該当の SSID が表示されるまで、しばらく時間がかかることがあります。</p>
</div>
【009】囲み線 登録スミ「Information」
Amazon Echo には電源ボタンが存在しません。アダプターの抜き差しが電源の ON / OFF を担っています。
<div class="boxed info">
<p>Amazon Echo には電源ボタンが存在しません。アダプターの抜き差しが電源の ON / OFF を担っています。<p>
</div>
【010】囲み線 見出し部分を文字入力できる
ポイント
各部屋もしくは各場所に置かれたEchoを使って、音楽を同時に再生することが出来る機能です。
<div class="boxed check">
<h4 class="title">ポイント</h4>
<p>各部屋もしくは各場所に置かれたEchoを使って、音楽を同時に再生することが出来る機能です。<p>
</div>
囲み線背景ブルー
ポイント
各部屋もしくは各場所に置かれたEchoを使って、音楽を同時に再生することが出来る機能です。
【011】メモのリスト
メモ
- 目覚ましなどの呼びかけに使えそう
- パーティシーンで活躍しそう
- 家族で別の部屋にいても一緒の曲が使える
<div class="memo">
<h4 class="title">メモ</h4>
<ul>
<li>目覚ましなどの<strong>呼びかけ</strong>に使えそう</li>
<li><strong>パーティシーン</strong>で活躍しそう</li>
<li>家族で<strong>別の部屋にいても一緒の曲</strong>が使える</li>
</ul>
</div>
【012】おすすめリンク
<p class="osusume-link"><a href="">おすすめりんくテスト</a></p>
【012-2】おすすめリンク複数行(リンク2つ以上)
<div class="emphasize-link">
<p><a href="リンク先URL1">リンク先タイトル1</a></p>
<p><a href="リンク先URL2">リンク先タイトル2</a></p>
</div>
【013】箇条書き 強調スタイル
- ブログで集客し、商品が売れるようになりたい。
- 記事のネタ切れが起こりやすいので、解消したい。
- ブログの方向性が定まらない。
<div class="su-box su-box-style-default" style="border-color:#1a5abd;border-radius:3px">
<div class="su-box-title" style="background-color:#2071ec;color:#ffffff;border-top-left-radius:1px;border-top-right-radius:1px">このプログラムの対象者はこんな方です!</div>
<div class="su-box-content su-clearfix" style="border-bottom-left-radius:1px;border-bottom-right-radius:1px">
<ul>
<li>ブログで集客し、商品が売れるようになりたい。</li>
<li>記事のネタ切れが起こりやすいので、解消したい。</li>
<li>ブログの方向性が定まらない。</li>
</ul>
</div>
</div>
【014】2・人物アニメの吹き出し(コンセプトとターゲットは・の部分)
html版
コンセプトとターゲットは、どちらかだけではなく、両方が反映しあえる関係性にあります。
<div class="user3 left">
<p>コンセプトとターゲットは、どちらかだけではなく、両方が反映しあえる関係性にあります。</p>
</div>
【015】3・黄色い背景コントラスト部分
html版
また、その悩みを解決したいと思った方が”解決策を知っても行動できない理由が何か考えて下さい。
<div class="aside-normal gray"><span><i class="fa fa-comments-o" aria-hidden="true"></i></span> どういった方の悩みにこたえる事ができるのか?<br>
<p>また、その悩みを解決したいと思った方が”解決策を知っても行動できない理由が何か考えて下さい。</p></div>
<br />
また、その悩みを解決したいと思った方が”解決策を知っても行動できない理由が何か考えて下さい。
<div class="aside-normal orange"><span><i class="fa fa-comments-o" aria-hidden="true"></i></span> どういった方の悩みにこたえる事ができるのか?<br>
<p>また、その悩みを解決したいと思った方が”解決策を知っても行動できない理由が何か考えて下さい。</p></div>
また、その悩みを解決したいと思った方が”解決策を知っても行動できない理由が何か考えて下さい。
<div class="aside-normal blue"><span><i class="fa fa-comments-o" aria-hidden="true"></i></span> どういった方の悩みにこたえる事ができるのか?<br>
<p>また、その悩みを解決したいと思った方が”解決策を知っても行動できない理由が何か考えて下さい。</p></div>
【016】4 3の下の 「併せて活用しましょう」のオレンジ色の枠と、その中の文、リンクのスタイル
<div class="sc_frame ">
<div class="sc_frame_text">補助シートもありますので、整理してみましょう!</div>
<div>⇒<a href="">コンセプト設定シートをダウンロードする(Exel形式)</a></div>
</div>
<div class="sc_frame pink">
<div class="sc_frame_text">補助シートもありますので、整理してみましょう!</div>
<div>⇒<a href="">コンセプト設定シートをダウンロードする(Exel形式)</a></div>
</div>
<div class="sc_frame gray">
<div class="sc_frame_text">補助シートもありますので、整理してみましょう!</div>
<div>⇒<a href="">コンセプト設定シートをダウンロードする(Exel形式)</a></div>
</div>
<div class="sc_frame orange">
<div class="sc_frame_text">補助シートもありますので、整理してみましょう!</div>
<div>⇒<a href="">コンセプト設定シートをダウンロードする(Exel形式)</a></div>
</div>
<div class="sc_frame blue">
<div class="sc_frame_text">補助シートもありますので、整理してみましょう!</div>
<div>⇒<a href="">コンセプト設定シートをダウンロードする(Exel形式)</a></div>
</div>
背景ブルー
<div class="dottbox graybg">
<div class="sc_frameblue">
<div class="sc_frame_text">補助シートもありますので、整理してみましょう!</div>
<div>⇒<a href="">コンセプト設定シートをダウンロードする(Exel形式)</a></div>
</div>
</div>
・見出し入力可能バージョン?
終わったら、次はこれをやりましょう!
考えたら、ターゲット決めをして行きましょう!
⇒【ワーク】集客ブログ構築に必要なターゲット(ペルソナ)の設定方法
<div class="sc_frame_wrap inline pink">
<div class="sc_frame_title">
<div class="sc_frame_icon"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></div>
<p><span>終わったら、次はこれをやりましょう!</span></p>
</div>
<div class="sc_frame ">
<div class="sc_frame_text">
<p>考えたら、ターゲット決めをして行きましょう!</p>
<p>⇒<a href="https://up-blog.com/blog-master-book/howtoset-plesona/">【ワーク】集客ブログ構築に必要なターゲット(ペルソナ)の設定方法</a></p>
</div>
</div>
</div>
終わったら、次はこれをやりましょう!
考えたら、ターゲット決めをして行きましょう!
⇒【ワーク】集客ブログ構築に必要なターゲット(ペルソナ)の設定方法
<div class="sc_frame_wrap inline gray">
<div class="sc_frame_title">
<div class="sc_frame_icon"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></div>
<p><span>終わったら、次はこれをやりましょう!</span></p>
</div>
<div class="sc_frame ">
<div class="sc_frame_text">
<p>考えたら、ターゲット決めをして行きましょう!</p>
<p>⇒<a href="https://up-blog.com/blog-master-book/howtoset-plesona/">【ワーク】集客ブログ構築に必要なターゲット(ペルソナ)の設定方法</a></p>
</div>
</div>
</div>
終わったら、次はこれをやりましょう!
考えたら、ターゲット決めをして行きましょう!
⇒【ワーク】集客ブログ構築に必要なターゲット(ペルソナ)の設定方法
<div class="sc_frame_wrap inline orange">
<div class="sc_frame_title">
<div class="sc_frame_icon"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></div>
<p><span>終わったら、次はこれをやりましょう!</span></p>
</div>
<div class="sc_frame ">
<div class="sc_frame_text">
<p>考えたら、ターゲット決めをして行きましょう!</p>
<p>⇒<a href="https://up-blog.com/blog-master-book/howtoset-plesona/">【ワーク】集客ブログ構築に必要なターゲット(ペルソナ)の設定方法</a></p>
</div>
</div>
</div>
終わったら、次はこれをやりましょう!
考えたら、ターゲット決めをして行きましょう!
⇒【ワーク】集客ブログ構築に必要なターゲット(ペルソナ)の設定方法
<div class="sc_frame_wrap inline blue">
<div class="sc_frame_title">
<div class="sc_frame_icon"><i class="fa fa-arrow-circle-right" aria-hidden="true"></i></div>
<p><span>終わったら、次はこれをやりましょう!</span></p>
</div>
<div class="sc_frame ">
<div class="sc_frame_text">
<p>考えたら、ターゲット決めをして行きましょう!</p>
<p>⇒<a href="https://up-blog.com/blog-master-book/howtoset-plesona/">【ワーク】集客ブログ構築に必要なターゲット(ペルソナ)の設定方法</a></p>
</div>
</div>
</div>
【017】5 H3の見出しスタイル (ここから、参考スタイルシートは別ブログ)
html版
iPhone SEからiPhone 8/7に乗り換えるメリット
<h6>html版</h6>
<h3 class="c-header pink">iPhone SEからiPhone 8/7に乗り換えるメリット</h3>
iPhone SEからiPhone 8/7に乗り換えるメリット
<h6>html版</h6>
<h3 class="c-header gray">iPhone SEからiPhone 8/7に乗り換えるメリット</h3>
iPhone SEからiPhone 8/7に乗り換えるメリット
<h3 class="c-header orange">iPhone SEからiPhone 8/7に乗り換えるメリット</h3>
iPhone SEからiPhone 8/7に乗り換えるメリット
<h3 class="c-header blue">iPhone SEからiPhone 8/7に乗り換えるメリット</h3>
【018】小見出し&コントラストリスト
- 画面が大きく見やすい
<div class="list-title-box"><span class="list-title">iPhoneSEにはないiPhone 7/8のメリット</span></div>
<ul>
<li>画面が大きく見やすい</li>
</ul>
【019】リストコントラスト(数字見出しつき)
- 375 x 667(4.7インチiPhone 6/6s/7/8):43.01%
- 360 x 640(Androidスマホ):12.62%
- 414 x 736(5.5インチiPhone 6/6s/7/8 Plus):9.92%
- 320 x 568(4インチiPhone 5s/SE):9.48%
- 375 x 812(5.8インチiPhone X/XS):9.15%
- 768 x 1024(iPad):6.48%
<ol>
<li>375 x 667(4.7インチiPhone 6/6s/7/8):43.01%</li>
<li>360 x 640(Androidスマホ):12.62%</li>
<li>414 x 736(5.5インチiPhone 6/6s/7/8 Plus):9.92%</li>
<li>320 x 568(4インチiPhone 5s/SE):9.48%</li>
<li>375 x 812(5.8インチiPhone X/XS):9.15%</li>
<li>768 x 1024(iPad):6.48%</li>
</ol>
【020】リンク強調→これは他と被っているのであまり使わないと思ったので、なしでいいです
