HTML

賢威7のWordPress版に用意されているCSSのスタイルを適用して記事のテキストを装飾する方法を紹介します。賢威7の標準機能の説明です。

必要に応じてテキストを装飾すると、文章の中の強調したい部分が目立つようになります。

CSSのスタイルを利用する際は、下記のサンプルコードをコピー&ペーストして利用してください。表示例のサンプルコードを用意していますので参考にしてください。

見出し

記事の見出し

記事の先頭に表示する見出しのCSSが用意されています。

見出し
<h1 class="section-title">記事の見出し(H1)</h1>
<h2 class="section-title">記事の見出し(H2)</h2>

大見出し

大見出し用のCSSが用意されています。見出しの背景色にはテンプレートのカラーが適用されます。

大見出し
<h1>大見出し</h1>
<h2>大見出し</h2>

小見出し

各種の見出し用のCSSが用意されています。見出しにはテンプレートのカラーが適用されます。

小見出し
<h3>H3の見出し</h3>
<h4>H4の見出し</h4>
<h5>H5の見出し</h5>
<h6>H6の見出し</h6>

文字の装飾

文字に色をつける

文字に色をつけることができます。様々な色が用意されています。

文字色を水色に変更できます。

文字色を赤色に変更できます。

文字色をオレンジ色に変更できます。

文字色をピンク色に変更できます。

文字色を紫色に変更できます。

文字色を緑色に変更できます。

文字色を青色に変更できます。

文字色を黄色に変更できます。

文字色をオリーブ色に変更できます。

文字色をライム色に変更できます。

文字色を黒色に変更できます。

文字色を灰色に変更できます。

文字色を白色に変更できます。

文字色を茶色に変更できます。

<p class="navy">文字色を紺色に変更できます。</p>
<p class="aqua">文字色を水色に変更できます。</p>
<p class="red">文字色を赤色に変更できます。</p>
<p class="orange">文字色をオレンジ色に変更できます。</p>
<p class="pink">文字色をピンク色に変更できます。</p>
<p class="purple">文字色を紫色に変更できます。</p>
<p class="green">文字色を緑色に変更できます。</p>
<p class="blue">文字色を青色に変更できます。</p>
<p class="yellow">文字色を黄色に変更できます。</p>
<p class="olive">文字色をオリーブ色に変更できます。</p>
<p class="lime">文字色をライム色に変更できます。</p>
<p class="black">文字色を黒色に変更できます。</p>
<p class="gray">文字色を灰色に変更できます。</p>
<p class="white">文字色を白色に変更できます。</p>
<p class="brown">文字色を茶色に変更できます。</p>

マーカーをつける

文字にマーカーを引くことができます。蛍光ペンのような背景色がつきます。

文字にオレンジ色の背景色をつけることができます。

文字にピンク色の背景色をつけることができます。

文字に黄色の背景色をつけることができます。

文字にライム色の背景色をつけることができます。

文字に灰色の背景色をつけることができます。

<p>文字に<span class="box-orange">オレンジ色の背景色</span>をつけることができます。</p>
<p>文字に<span class="box-pink">ピンク色の背景色</span>をつけることができます。</p>
<p>文字に<span class="box-yellow">黄色の背景色</span>をつけることができます。</p>
<p>文字に<span class="box-lime">ライム色の背景色</span>をつけることができます。</p>
<p>文字に<span class="box-gray">灰色の背景色</span>をつけることができます。</p>

文字サイズを変更する

よく利用される文字の表示サイズを指定するCSSが用意されています。

文字サイズをBIG(1.2em)に変更する。

文字サイズをBIG2(1.5em)に変更する。

文字サイズをBIG3(1.8em)に変更する。

文字サイズをSMALL(0.8em)に変更する。

<p class="big">文字サイズをBIG(1.2em)に変更する。</p>
<p class="big2">文字サイズをBIG2(1.5em)に変更する。</p>
<p class="big3">文字サイズをBIG3(1.8em)に変更する。</p>
<p class="small">文字サイズをSMALL(0.8em)に変更する。</p>

文字サイズを変更する(em)

文字の表示サイズを1文字分の長さ(em)を基準に指定できます。1emが標準の文字サイズです。

文字サイズを「0.8em」に変更する。

文字サイズを「0.9em」に変更する。

文字サイズを「1em」に変更する。

文字サイズを「1.1em」に変更する。

文字サイズを「1.2em」に変更する。

文字サイズを「1.3em」に変更する。

文字サイズを「1.4em」に変更する。

文字サイズを「1.5em」に変更する。

文字サイズを「1.6em」に変更する。

文字サイズを「1.7em」に変更する。

文字サイズを「1.8em」に変更する。

文字サイズを「1.9em」に変更する。

文字サイズを「2em」に変更する。

<p class="f08em">文字サイズを「0.8em」に変更する。</p>
<p class="f09em">文字サイズを「0.9em」に変更する。</p>
<p class="f10em">文字サイズを「1em」に変更する。</p>
<p class="f11em">文字サイズを「1.1em」に変更する。</p>
<p class="f12em">文字サイズを「1.2em」に変更する。</p>
<p class="f13em">文字サイズを「1.3em」に変更する。</p>
<p class="f14em">文字サイズを「1.4em」に変更する。</p>
<p class="f15em">文字サイズを「1.5em」に変更する。</p>
<p class="f16em">文字サイズを「1.6em」に変更する。</p>
<p class="f17em">文字サイズを「1.7em」に変更する。</p>
<p class="f18em">文字サイズを「1.8em」に変更する。</p>
<p class="f19em">文字サイズを「1.9em」に変更する。</p>
<p class="f20em">文字サイズを「2em」に変更する。</p>
<p class="f21em">文字サイズを「2.1em」に変更する。</p>
<p class="f22em">文字サイズを「2.2em」に変更する。</p>
<p class="f23em">文字サイズを「2.3em」に変更する。</p>
<p class="f24em">文字サイズを「2.4em」に変更する。</p>
<p class="f25em">文字サイズを「2.5em」に変更する。</p>
<p class="f26em">文字サイズを「2.6em」に変更する。</p>
<p class="f27em">文字サイズを「2.7em」に変更する。</p>
<p class="f28em">文字サイズを「2.8em」に変更する。</p>
<p class="f29em">文字サイズを「2.9em」に変更する。</p>
<p class="f30em">文字サイズを「3em」に変更する。</p>

文字サイズを変更する(pt)

文字の表示サイズをポイント(pt)で指定できます。

文字サイズを「8pt」に変更する。

文字サイズを「9pt」に変更する。

文字サイズを「10pt」に変更する。

文字サイズを「11pt」に変更する。

文字サイズを「12pt」に変更する。

文字サイズを「13pt」に変更する。

文字サイズを「14pt」に変更する。

文字サイズを「15pt」に変更する。

文字サイズを「16pt」に変更する。

文字サイズを「17pt」に変更する。

文字サイズを「18pt」に変更する。

文字サイズを「19pt」に変更する。

文字サイズを「20pt」に変更する。

<p class="f8pt">文字サイズを「8pt」に変更する。</p>
<p class="f9pt">文字サイズを「9pt」に変更する。</p>
<p class="f10pt">文字サイズを「10pt」に変更する。</p>
<p class="f11pt">文字サイズを「11pt」に変更する。</p>
<p class="f12pt">文字サイズを「12pt」に変更する。</p>
<p class="f13pt">文字サイズを「13pt」に変更する。</p>
<p class="f14pt">文字サイズを「14pt」に変更する。</p>
<p class="f15pt">文字サイズを「15pt」に変更する。</p>
<p class="f16pt">文字サイズを「16pt」に変更する。</p>
<p class="f17pt">文字サイズを「17pt」に変更する。</p>
<p class="f18pt">文字サイズを「18pt」に変更する。</p>
<p class="f19pt">文字サイズを「19pt」に変更する。</p>
<p class="f20pt">文字サイズを「20pt」に変更する。</p>
<p class="f21pt">文字サイズを「21pt」に変更する。</p>
<p class="f22pt">文字サイズを「22pt」に変更する。</p>
<p class="f23pt">文字サイズを「23pt」に変更する。</p>
<p class="f24pt">文字サイズを「24pt」に変更する。</p>

文字に線を引く

文字にアンダーラインや取り消し線を付けることができます。

文字にアンダーライン(下線)を付ける。

文字に取り消し線を付ける。

<p class="underline">文字にアンダーライン(下線)を付ける。</p>
<p class="del">文字に取り消し線を付ける。</p>

HTMLタグで文字を装飾する

様々なHTMLタグで文字を装飾することができます。

em要素: 強勢する(アクセントを付ける)箇所を表す

strong要素: 強い重要性を表す

small要素: 免責・警告・著作権などの注釈や細目を表す

s要素: すでに正確ではなくなった内容を表すテキストが入ります。

abbr要素: HTML等の略語

<p>em要素: <em>強勢する(アクセントを付ける)箇所を表す</em></p>
<p>strong要素: <strong>強い重要性を表す</strong></p>
<p>small要素: <small>免責・警告・著作権などの注釈や細目を表す</small></p>
<p>s要素: <s>すでに正確ではなくなった内容を表す</s>テキストが入ります。</p>
<p>abbr要素: <abbr title="HyperText Markup Language">HTML</abbr>等の略語</p>

文字を太字にする

文字を太字にすることができます。

テキストを太字にします。

テキストの太字を解除します。

<p>テキストを<span class="b">太字</span>にします。</p>
<p class="b">テキストの<span class="normal">太字を解除</span>します。</p>

文字に傍点をつける

文字に傍点をつけることができます。

テキスト上にを打ちます。

<p>テキスト上に<span class="dot">傍</span><span class="dot">点</span>を打ちます。</p>

注意書き

注釈や注記を書く場合に利用できるCSSが用意されています。

※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。

<p class="note"><small>※注釈・注記です。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。最初の一文字だけ飛び出て、それ以降の文字がぶら下がります。</small></p>

文字の配置

文字の横位置

文字の横方向の表示位置を指定できます。

テキストの配置を左寄せにする。

テキストの配置を右寄せにする。

テキストの配置を中央寄せにする。

<p class="al-l">テキストの配置を左寄せにする。</p>
<p class="al-r">テキストの配置を右寄せにする。</p>
<p class="al-c">テキストの配置を中央寄せにする。</p>

文字の縦位置

文字の縦方向の表示位置を指定できます。

上寄せ これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。
中央寄せ これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。
下寄せ これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。
<table>
<tr>
<th class="w20 vl-t">上寄せ</th>
<td class="w80">これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</td>
</tr>
<tr>
<th class="vl-c">中央寄せ</th>
<td>これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</td>
</tr>
<tr>
<th class="vl-b">下寄せ</th>
<td>これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。これは見本のテキストです。</td>
</tr>
</table>

ボタン

リンクボタン 矢印あり

リンクボタンのCSSが用意されています。SPANタグを付ければ矢印も表示されます。

<p><a href="#" class="btn btn-green"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-blue"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-orange"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-red"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn"><span>リンクボタン</span></a></p>

リンクボタン 矢印なし

リンクボタンのCSSが用意されています。SPANタグを外せば矢印は表示されません。

<p><a href="#" class="btn btn-green">リンクボタン</a></p>
<p><a href="#" class="btn btn-blue">リンクボタン</a></p>
<p><a href="#" class="btn btn-orange">リンクボタン</a></p>
<p><a href="#" class="btn btn-red">リンクボタン</a></p>
<p><a href="#" class="btn">リンクボタン</a></p>

角丸のボタン RC50

リンクボタンに角丸を設定できます。必要に応じて活用しましょう。

<p><a href="#" class="btn btn-green rc50"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-blue rc50"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-orange rc50"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-red rc50"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn rc50"><span>リンクボタン</span></a></p>

角丸のボタン RC12

リンクボタンに角丸を設定できます。角丸が中くらいのバージョンです。必要に応じて活用しましょう。

<p><a href="#" class="btn btn-green rc12"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-blue rc12"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-orange rc12"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-red rc12"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn rc12"><span>リンクボタン</span></a></p>

角丸のボタン RC4

リンクボタンに角丸を設定できます。角丸が小さいバージョンです。必要に応じて活用しましょう。

<p><a href="#" class="btn btn-green rc4"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-blue rc4"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-orange rc4"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn btn-red rc4"><span>リンクボタン</span></a></p>
<p><a href="#" class="btn rc4"><span>リンクボタン</span></a></p>

リスト

リスト(ul)

箇条書きのリストを利用できます。

  • リスト項目です。
  • リスト項目です。
  • リスト項目です。
<ul>
<li>リスト項目です。</li>
<li>リスト項目です。</li>
<li>リスト項目です。</li>
</ul>

リスト(ol)

数字のリストを利用できます。

  1. リスト項目です。
  2. リスト項目です。
  3. リスト項目です。
<ol>
<li>リスト項目です。</li>
<li>リスト項目です。</li>
<li>リスト項目です。</li>
</ol>

リスト横並び

横並びのリストを利用できます。先頭の点は非表示になっています。

  • 横並びのリスト項目です。
  • 横並びのリスト項目です。
  • 横並びのリスト項目です。
<ul class="inline">
<li>横並びのリスト項目です。</li>
<li>横並びのリスト項目です。</li>
<li>横並びのリスト項目です。</li>
</ul>

リストの先頭の点を非表示

箇条書きリストの先頭の点を非表示にできます。必要に応じて活用しましょう。

  • リスト項目です。
  • リスト項目です。
  • リスト項目です。
<ul class="none">
<li>リスト項目です。</li>
<li>リスト項目です。</li>
<li>リスト項目です。</li>
</ul>

記述リスト

記述リスト 標準

記述リストを利用できます。標準はシンプルになっています。

項目
本文の説明が入ります。本文の説明が入ります。
項目
本文の説明が入ります。本文の説明が入ります。
<dl>
<dt>項目</dt>
<dd>本文の説明が入ります。本文の説明が入ります。</dd>
<dt>項目</dt>
<dd>本文の説明が入ります。本文の説明が入ります。</dd>
</dl>

記述リスト デザイン1

「記述リスト デザイン1」は下に点線がつきます。

記述リストのデザイン1
要素が横に並びます。要素が横に並びます。
記述リストのデザイン1
要素が横に並びます。要素が横に並びます。
<dl class="dl-style01">
<dt>記述リストのデザイン1</dt>
<dd>要素が横に並びます。要素が横に並びます。</dd>
<dt>記述リストのデザイン1</dt>
<dd>要素が横に並びます。要素が横に並びます。</dd>
</dl>

記述リスト デザイン2

「記述リスト デザイン2」はテンプレートのカラーが適用されます。

記述リストのデザイン2
要素が縦に並びます。要素が縦に並びます。
記述リストのデザイン2
要素が縦に並びます。要素が縦に並びます。
<dl class="dl-style02">
<dt>記述リストのデザイン2</dt>
<dd>要素が縦に並びます。要素が縦に並びます。</dd>
<dt>記述リストのデザイン2</dt>
<dd>要素が縦に並びます。要素が縦に並びます。</dd>
</dl>

引用

blockquote

blockquoteタグは文章が引用文であることを表す装飾タグです。外部から文章を引用する場合に利用します。

ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。

リンクあり

ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。

<blockquote>
<p>ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。</p>
</blockquote>
<blockquote>
<p>ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。ここに引用文が入ります。</p>
<p class="link-ref"><cite>引用元: <a class="outbound" href="https://www.google.co.jp/" target="_blank">参照記事のタイトル</a></cite></p>
</blockquote>

q

qタグは文章の一部が引用文であることを表す装飾タグです。

ここにテキストが入ります。文章中に出てくる短文の引用部分への装飾です。ここにテキストが入ります。

<p>ここにテキストが入ります。<q>文章中に出てくる短文の引用部分への装飾です。</q>ここにテキストが入ります。</p>

チェックリスト

小さなチェックリスト

チェックリスト用のCSSが用意されています。必要に応じて活用しましょう。

  • これはチェックリストの項目です。
  • これはチェックリストの項目です。
  • これはチェックリストの項目です。
<ul class="check-list">
<li>これはチェックリストの項目です。</li>
<li>これはチェックリストの項目です。</li>
<li>これはチェックリストの項目です。</li>
</ul>

大きなチェックリスト

チェックリスト用のCSSが用意されています。大きいサイズのチェックリストです。必要に応じて活用しましょう。

  • これはチェックリストの項目です。
  • これはチェックリストの項目です。
  • これはチェックリストの項目です。
<ul class="check-list-l">
<li>これはチェックリストの項目です。</li>
<li>これはチェックリストの項目です。</li>
<li>これはチェックリストの項目です。</li>
</ul>

Q&A(質問と回答)

Q&A(質問と回答)のCSSが用意されています。必要に応じて活用しましょう。

これは質問文です。
これは質問に対する回答文です。これは質問に対する回答文です。これは質問に対する回答文です。
これは質問文です。
これは質問に対する回答文です。これは質問に対する回答文です。これは質問に対する回答文です。
<dl class="qa-list">
<dt>これは質問文です。</dt>
<dd>これは質問に対する回答文です。これは質問に対する回答文です。これは質問に対する回答文です。</dd>
<dt>これは質問文です。</dt>
<dd>これは質問に対する回答文です。これは質問に対する回答文です。これは質問に対する回答文です。</dd>
</dl>

以上

カスタマイズ方法を探す

スポンサーリンク

賢威7

ネタワンは「賢威7」を利用して運営しています。オススメのWPテーマです。

賢威7 詳細&レビュー

スポンサーリンク