スタイル

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】ステップスタイル
Bluetoothスピーカーのペアリングモードをオンにする
Alexaアプリでデバイスを選択
Bluetoothデバイスを選択

 

<div class="point1">Bluetoothスピーカーのペアリングモードをオンにする</div>
<div class="point2">Alexaアプリでデバイスを選択</div>
<div class="point3">Bluetoothデバイスを選択</div>

 

【004】チェックスタイル
1

Bluetoothスピーカーのペアリングモードをオンにする

2

Alexaアプリでデバイスを選択

3

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】小見出し&コントラストリスト

 

iPhoneSEにはないiPhone 7/8のメリット
    • 画面が大きく見やすい

 

 

<div class="list-title-box"><span class="list-title">iPhoneSEにはないiPhone 7/8のメリット</span></div>
<ul>
<li>画面が大きく見やすい</li>

 

</ul>

 

【019】リストコントラスト(数字見出しつき)
  1. 375 x 667(4.7インチiPhone 6/6s/7/8):43.01%
  2. 360 x 640(Androidスマホ):12.62%
  3. 414 x 736(5.5インチiPhone 6/6s/7/8 Plus):9.92%
  4. 320 x 568(4インチiPhone 5s/SE):9.48%
  5. 375 x 812(5.8インチiPhone X/XS):9.15%
  6. 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】リンク強調→これは他と被っているのであまり使わないと思ったので、なしでいいです

 

 

TOP