テストページ（固定）

これはテストです。通常のＰタグの段落、文字サイズ、行間スペースを確認できます。通常のＰタグの段落、文字サイズ、行間スペースを確認できます。通常のＰタグの段落、文字サイズ、行間スペースを確認できます。

通常のＰタグの段落、文字サイズ、行間スペースを確認できます。通常のＰタグの段落、文字サイズ、行間スペースを確認できます。

続いて、YouTubeの埋め込み画像です。

【『ブレードランナー 2049』の前日譚】「2048：ノーウェア・トゥ・ラン」

続いて、引用元を記載する際に「class=sankou」を利用します。

参考これはテストです。

続いて、ブログカードの利用例です。

ライフプラスサプリメント超活用術

サプリメントを飲んでるけど、役立っているか実感がないと思っているのなら、そのサプリメントを飲むのは今すぐスッパリやめましょう。効果の実感できないサプリメントは、飲み続けることに何の意味もありません！しかし、“サプリメント”そのものが無駄かと

supplement-life.com

続いて、カエレバのテストです。

ファーファラボ無添加超コンパクト洗濯洗剤液体無香料本体 450ml

posted with カエレバ

NSファーファ・ジャパン 2015-03-09

Amazonで探す

楽天市場で探す

Yahooショッピングで探す

続いて、ヨメレバのテストです。

プロとして恥ずかしくない　新・CSSデザインの大原則

posted with ヨメレバ

大藤幹,北川貴清,きむらあつとし,境祐司,高橋としゆき,錦織幸知,長谷川広武,矢野みち子エムディエヌコーポレーション 2015-07-02

Amazonで探す

楽天ブックスで探す

見出し例（Ｈ２の場合）

下に続く画像は、最大幅は６８０となります。

リスト表示の各パターン（Ｈ３の場合）

リスト「ul」表示（通常）

リスト１
リスト２

リスト「ol」表示（通常）

リスト１
リスト２

リスト要素に「class=nolist」の場合

リスト１
リスト２

リスト表示「class=list-star」の場合

リスト１
リスト２あああああああああああああああああああああああああああああああああああああああああああああああああ
リスト３

リスト表示「class=check-square」の場合

リスト１
リスト２
リスト３

リスト表示「class=arrow-circle-right」の場合

リスト１
リスト２
リスト３

情報を単純に明記する場合に、「div class=”dpbox”」を利用します。使用例としては、企業情報としての企業名、所在地、代表者名など。

情報の記載に加え、強調したい場合に、「div class=”pbox”」を利用します。

チェックポイントとして強調したい場合に、以下を利用します。

チェックポイント②

チェックポイントのboxにリストを挿入した場合
チェックポイントのboxにリストを挿入した

段落中で「強調」をしたい場合、強調の程度（４段階）によって、以下のボックスの色で分けます。

ピンク：「class=sp-danger」は、段落途中での強調「最大」で利用します。

肌色：「class=sp-warning」は、段落途中での強調「大」で利用します。

水色：「class=sp-info」は、段落途中での強調「中」で利用します。

薄緑：「class=sp-success」は、段落途中での強調「小」で利用します。主に、段落最後のまとめ記事部分で利用します。

濃紺：「class=sp-primary」は、段落はじめで利用します。主に、ヘルニア闘病記の冒頭の決め台詞で利用します。

段落途中で「注意」や「情報」を強調したい時には、以下を利用します。

注意
「class=caution」を利用して強調します。

「class=information」を利用して強調します。

文字の強調の仕方は以下の通りです。

太字の場合「class=bold」

太赤字の場合「class=bold-red」

ピンクのアンダーライン「class=marker-under-pink」あああああいいいいいううううう黄色のアンダーライン「class=marker-under」

主なルールは以上となります。これらを基準にwebページの作成をすること！

以下はさまざまなフォーマット

div要素にdiv class=”dpbox”:ここに好きな固定記事の内容や写真を挿入できます。また、トップページだけではなく各投稿ページや固定ページの下、ヘッダー横などに好きな文字を入力可能。

div要素にdiv class=”pbox”:ここに好きな固定記事の内容や写真を挿入できます。また、トップページだけではなく各投稿ページや固定ページの下、ヘッダー横などに好きな文字を入力可能。それにより、全ページで伝えたいお知らせやおすすめ等を一括表示も可能です。

ボックスに段落を挿入

dpbox:ここに好きな固定記事の内容や写真を挿入できます。また、トップページだけではなく各投稿ページや固定ページの下、ヘッダー横などに好きな文字を入力可能。

pbox:ここに好きな固定記事の内容や写真を挿入できます。また、トップページだけではなく各投稿ページや固定ページの下、ヘッダー横などに好きな文字を入力可能。

何もない通常のリスト

div class=”dpbox”
リスト表示テストリスト表示テストリスト表示テストリスト表示テストリスト表示テストリスト表示テスト

チェックポイントのリスト

チェック①

チェックポイントのboxにリストを挿入した場合
チェックポイントのboxにリストを挿入した

チェックポイント②

チェックポイントのboxにリストを挿入した場合
チェックポイントのboxにリストを挿入した

チェックポイントのpタグ

チェック③

ここに好きな固定記事の内容や写真を挿入できます。また、トップページだけではなく各投稿ページや固定ページの下、ヘッダー横などに好きな文字を入力可能となります。あああああ。

ボックスにチェックを挿入した場合

div class=”dpbox”
リスト表示テストリスト表示テスト

div要素にリスト要素を入れた場合

div class=”dpbox”
リスト表示テストリスト表示テストリスト表示テストリスト表示テストリスト表示テストリスト表示テスト

div class=”pbox”
リスト表示テスト

div要素にリスト要素を入れ、ul要素にnolistを指定した場合

div class=”dpbox”
リスト表示テストリスト表示テストリスト表示テストリスト表示テストリスト表示テストリスト表示テスト

div class=”pbox”
リスト表示テスト

div要素にdtリストを入れた場合

dtリスト表示テスト: ddリスト表示テスト
dtリスト表示テスト: ddリスト表示テスト

dtリスト表示テスト: ddリスト表示テスト
dtリスト表示テスト: ddリスト表示テスト

あらゆる色、デザインが自由自在。

この文字は見やすいですか？

STINGERではパソコンはもちろん、スマートフォンでも見やすい文字を常に考えています。レスポンシブだからデバイスに応じて最適に変形。

このブログに付け足す機能やカラーは全てあなた次第。記事を書く事に没頭するも良し。STINGERはアナタの記事を最大限に伝え、あらゆる可能性を引き出します。