装飾一覧

2018年11月16日

文字サイズ

装飾コード:文字サイズ10
文字サイズ:10ピクセル

装飾コード:文字サイズ12
文字サイズ:12ピクセル

装飾コード:文字サイズ14
文字サイズ:14ピクセル

装飾コード:文字サイズ16
文字サイズ:16ピクセル

装飾コード:文字サイズ18
文字サイズ:18ピクセル

装飾コード:文字サイズ20
文字サイズ:20ピクセル

装飾コード:文字サイズ22
文字サイズ:22ピクセル

装飾コード:文字サイズ24
文字サイズ:24ピクセル

<span class="size10">文字サイズ:10ピクセル</span>
<span class="size12">文字サイズ:12ピクセル</span>
<span class="size14">文字サイズ:14ピクセル</span>
<span class="size16">文字サイズ:16ピクセル</span>
<span class="size18">文字サイズ:18ピクセル</span>
<span class="size20">文字サイズ:20ピクセル</span>
<span class="size22">文字サイズ:22ピクセル</span>
<span class="size24">文字サイズ:24ピクセル</span>

文字色

文字色:赤
文字色:オレンジ
文字色:青
文字色:みどり
文字色:茶

<span class="aka">文字色:赤</span>
<span class="orange">文字色:オレンジ</span>
<span class="ao">文字色:青</span>
<span class="midori">文字色:みどり</span>
<span class="tya">文字色:茶</span>

文字装飾

文章などを強調、太字にする
文章などに下線を引く

<span class="b">文章などを強調、太字にする</span>
<span class="u">文章などに下線を引く</span>

文字装飾の応用

文章に色をつけたり強調したりというのは併用することが可能です。
例えば、赤色で強調させたい場合。

このテキストを赤色にして強調させてみる

<span class="b aka">このテキストを赤色にして強調させてみる</span>

併用したいものを半角スペースを空けて記述すると可能になります。

一行ごとに引くマーカー

装飾コード:マーカー 黄(太)
黄(太)。段落全体の背景に色をつけるような背景色ではなく、一行ごとに蛍光ペンでラインを引くような装飾が可能です。テキストの高さ全体と半分くらいの2種を用意しました。

装飾コード:マーカー 黄(細)
黄(細)

装飾コード:マーカー 緑(太)
緑(太)

装飾コード:マーカー 緑(細)
緑(細)

装飾コード:マーカー 青(太)
青(太)

装飾コード:マーカー 青(細)
青(細)

装飾コード:マーカー ピンク(太)
ピンク(太)

装飾コード:マーカー ピンク(細)
ピンク(細)

黄(太):<span class="marker_yf">●●●●●</span>
黄(細):<span class="marker_yh">●●●●●</span>
緑(太):<span class="marker_mf">●●●●●</span>
緑(細):<span class="marker_mh">●●●●●</span>
青(太):<span class="marker_bf">●●●●●</span>
青(細):<span class="marker_bh">●●●●●</span>
ピンク(太):<span class="marker_pf">●●●●●</span>
ピンク(細):<span class="marker_ph">●●●●●</span>

背景色のみ

装飾コード:背景色 クリーム

一つの段落に背景色をつけるものです。そのため、使用時は「P」タグを使ってください。

ひとまず背景色はこのクリーム色のみ用意しています。他に必要な色が出てきた時はご相談ください。

このサンプルのように複数の段落に設定したい場合は「div」タグで囲って使用してください。

----------------------------
一つの段落に背景色を設定
----------------------------
<p class="bg-cr">クリーム色</p>
----------------------------
複数の段落に背景色を設定
----------------------------
<div class="bg-cr">
<p>●●●●●</p>
<p>●●●●●</p>
</div>

枠線(線)

装飾コード:枠線
枠線の色はCSS内で用意している設定のみになります。
色の変更や設定追加が必要な場合はご相談ください。

使い方はクラス名が違うだけで「背景色」と同じ使い方になります。つまり、一つの段落のみを枠線で囲うならPタグを使用することになります。

複数の段落に設定したい場合は「div」タグで囲って使用することになります。

中のテキストは段落の有無にかかわらず、Pタグで囲ってください。

  • 見出しリストタグも使えるようにしてあります。
  • 見出しリストタグも使えるようにしてあります。
  • リストタグも使えるようにしてあります。
----------------------------
一つの段落に枠線を設定
----------------------------
<p class="waku">●●●●●</p>
----------------------------
複数の段落に枠線を設定
----------------------------
<div class="waku">
<p>●●●●●</p>
<p>●●●●●</p>
</div>
----------------------------
枠内でリストタグを使う場合
----------------------------
<div class="waku">
<ul>
<li><span class="midashi">見出し</span>●●●●●</li>
<li><span class="midashi">見出し</span>●●●●●</li>
<li>●●●●●</li>
</ul>
</div>
※「見出し」部分は不要であれば削除してください。

枠線(破線)

装飾コード:枠破線
枠線の色はCSS内で用意している設定のみになります。
色の変更や設定追加が必要な場合はご相談ください。

使い方はクラス名が違うだけで「背景色」と同じ使い方になります。つまり、一つの段落のみを枠線で囲うならPタグを使用することになります。

複数の段落に設定したい場合は「div」タグで囲って使用することになります。

中のテキストは段落の有無にかかわらず、Pタグで囲ってください。

  • 見出しリストタグも使えるようにしてあります。
  • 見出しリストタグも使えるようにしてあります。
  • リストタグも使えるようにしてあります。
----------------------------
一つの段落に枠線を設定
----------------------------
<p class="waku-hasen">●●●●●</p>
----------------------------
複数の段落に枠線を設定
----------------------------
<div class="waku-hasen">
<p>●●●●●</p>
<p>●●●●●</p>
</div>
----------------------------
枠内でリストタグを使う場合
----------------------------
<div class="waku-hasen">
<ul>
<li><span class="midashi">見出し</span>●●●●●</li>
<li><span class="midashi">見出し</span>●●●●●</li>
<li>●●●●●</li>
</ul>
</div>
※「見出し」部分は不要であれば削除してください。

『TablePress』使用時のテーブル

●見出しなし [クラス名:midashi-no]

店舗01 店舗01はとても素敵 店舗01はとても可憐
店舗02 店舗02はとても端麗 店舗02はとても豪快

●見出しあり 左端背景色あり [クラス名:midashi]

店舗名 良いところ 悪いところ
店舗01 見た目がとても容姿端麗 店内がとても豪放磊落

●見出しあり 左端背景色なし [クラス名:midashi-bgno]

店舗01 店舗02 店舗03
窮鼠猫を噛む 青天の霹靂 取らぬ狸の皮算用

※クラス名は、TablePressの「追加のCSSクラス」に入力してください。
※セルの幅設定はしていません。
※必要な時はショートコード記載時に希望幅の設定を行ってください。
[table id=●● column_widths=”30%|30%|40%”]
[]のソースサンプルは全角になっています。
正しくは半角ですのでコピペの際はご注意ください。

テーブルやリスト、枠で囲った時の見出し

テーブル上の見出し

店舗名 良いところ 悪いところ
店舗01 見た目がとても容姿端麗 店内がとても豪放磊落

枠線上の見出し

枠線がある場合もテーブルと同じ設定のものを使用することになります。


枠線なしのリストの見出し:

  • 枠線なしのリストの時に使用する見出し設定
  • 枠線があるなしでマージンの数値が違うので別設定になります。

普通テキスト上部の見出し

テーブルや枠線がなく、Pタグの上にタイトルが必要な場合に使用する。

色や文字サイズの変更は不可です。

----------------------------------------
テーブルや枠線の上部用
----------------------------------------
<p class="tit-tsume">●●●●●</p>
----------------------------------------
上記以外の上部用
----------------------------------------
<p class="tit-tsume-mn">●●●●●</p>

センター寄せにする

画像でもテキストでも強制的に中央寄せにしたい時に。

ただ、場合によっては中央寄せにならない場合もあり得ます。その時はご相談ください。

複数の段落がある場合は「div」タグで囲ってください。

----------------------------
一つの段落を中央寄せにする
----------------------------
<p class="center">●●●●●</p>
----------------------------
複数の段落を中央寄せにする
----------------------------
<div class="center">
<p>●●●●●</p>
<p>●●●●●</p>
</div>

引用:マークあり

装飾コード:引用マーク外

引用マークありで、引用元が枠の外にあるタイプになります。

テキストはPタグで囲って書くことで段落設定が可能になっています。

引用元:引用元URL

<div class="bq-mark">
<blockquote>
<p>●●●●●●●●●●</p>
<p>●●●●●●●●●●</p>
</blockquote>
<span class="bq-name">引用元:<a href="引用元URL">引用元URL</a></span>
</div>

装飾コード:引用マーク内

引用マークありで、引用元が枠の中にあるタイプになります。

テキストはPタグで囲って書くことで段落設定が可能になっています。

引用元:引用元URL

<div class="bq-mark-in">
<blockquote>
<p>●●●●●●●●●●</p>
<p>●●●●●●●●●●</p>
<span class="bq-name">引用元:<a href="引用元URL">引用元URL</a></span>
</blockquote>
</div>

装飾コード:引用マーク画像外

バイセル

応用編として、上の二つの仕様に画像があった場合のサンプル。

引用に画像とテキストを同時に記載というのはそうはないかも知れませんが、対応可能です。

下記のサンプルのように画像のみでも使用していただけます。

引用元:引用元URL

<div class="bq-mark">
<blockquote>
<p><img src="画像URL" alt="画像の説明" class="aligncenter"></p>
<p>●●●●●●●●●●</p>
<p>●●●●●●●●●●</p>
</blockquote>
<span class="bq-name">引用元:<a href="引用元URL">引用元URL</a></span>
</div>

装飾コード:引用マーク画像内

バイセル

引用元:引用元URL

<div class="bq-mark-in">
<blockquote>
<p><img src="画像URL" alt="画像の説明" class="aligncenter"></p>
<span class="bq-name">引用元:<a href="引用元URL">引用元URL</a></span>
</blockquote>
</div>

引用:マークなし(枠のみ)

装飾コード:引用枠外

引用マークなしで、引用元が枠の外にあるタイプになります。

テキストはPタグで囲って書くことで段落設定が可能になっています。

引用元:引用元URL

<div class="bq-waku">
<blockquote>
<p>●●●●●●●●●●</p>
<p>●●●●●●●●●●</p>
</blockquote>
<span class="bq-name">引用元:<a href="引用元URL">引用元URL</a></span>
</div>

装飾コード:引用枠内

引用マークなしで、引用元が枠の中にあるタイプになります。

テキストはPタグで囲って書くことで段落設定が可能になっています。

引用元:引用元URL

<div class="bq-waku-in">
<blockquote>
<p>●●●●●●●●●●</p>
<p>●●●●●●●●●●</p>
</blockquote>
<span class="bq-name">引用元:<a href="引用元URL">引用元URL</a></span>
</div>

装飾コード:引用枠画像外

バイセル

引用元:引用元URL

<div class="bq-waku">
<blockquote>
<p><img src="画像URL" alt="画像の説明" class="aligncenter"></p></blockquote>
<span class="bq-name">引用元:<a href="引用元URL">引用元URL</a></span>
</div>

装飾コード:引用枠画像内

バイセル

引用元:引用元URL

<div class="bq-waku-in">
<blockquote>
<p><img src="画像URL" alt="画像の説明" class="aligncenter"></p>
<span class="bq-name">引用元:<a href="引用元URL">引用元URL</a></span>
</blockquote>
</div>