書式一覧（テキスト・段落）

テキスト装飾

アンダーライン

文章中に強調したいことがあるときに使用。
Wordpressにボタンがあります。

<span class="underline"></span>

まる字

[まる字]という指定で丸囲み文字を作ります。
一応文字数に制限はありませんが、１行で使う前提で組んであるので、２文字×２行の大きな丸にするといったことはできません。ご注意ください。
ア 使用例
イ こんなかんじで
ウ ①②でない文字を囲うことができます

重要ここが重要なポイントです。
みたいな演出にも使えます。

<span class="maruji"></span>

注釈

文章中の用語を説明する※（こめじるし）をつけることができます。
指示するときは

文章◯◯◯◯◯◯◯単語※◯◯◯◯◯◯◯
◯◯◯◯◯◯◯◯◯◯◯◯◯◯
※置きたい場所に単語の解説
◯◯◯◯◯◯◯

といった感じにお願いします。

例としてはこのように表示されます。
文章の流れ的に解説を割り込ませたくないようなときに、※だけ表示しておいてあとから解説するということが可能になります。
薄いグレー文字サイズを小さくしてあるので、目立たせる必要のない用語解説などでの利用を想定しています。
Wordpressにボタンが用意してあります。

<span class="kome">解説したい用語</span>を設定
<span class="tips">解説を設定</span>

フォントサイズ設定

PC版においてフォントサイズを中サイズに設定します。marujiなどと組み合わせ使います。

med未設定
med設定

<span class="med">med設定</span>

フォントウェイト指定

boldとあるものの、実際はフォントの変更です。
丸フォーク M, sans-serifに変更されます。

<span class="bold">フォントの変更</span>

背景色指定

背景色を薄い茶色に文字色も茶色に設定します。
目立たせたくない注釈に使用したり、テーブルの背景色にしたり？

class="extend"

文字寄せ

text-alignでの文字寄せなので、ブロック要素には効果なしなので注意。

右寄せ

左寄せ

左寄せ

上寄せ

<p class="align-right">右寄せ</p>
<p class="align-left">左寄せ</p>
<p class="align-center">左寄せ</p>
<p class="align-top">上寄せ</p>

段落装飾

文字単位ではなく、段落単位で行う装飾です。

チェックポイント

CHECK!

なにか注意を引くような文章を書きたいときに使用します。
複数行対応しています。
幅は文字の量に応じて縮みます。

タイトルの文字数も自由ですが、１６字までにしてください。

タイトルが１６字を超えた場合、この行はスマホでは見えません。
スマホで見るとわかりますが、タイトルが改行されるほど長いものはレイアウトが崩れてしまうので、その場合は見出しをつけて、ひとつの項とすることをおすすめします。あくまでこの装飾のタイトル部分は目を引くためのアイコン程度です。
伝えたいことは本文に書いてください。

dl+ddでワンセットです。
ddを複数設定するとレイアウトが崩れます。

<dl class="Check">
<dt>CHECK!</dt>
<dd></dd>
</dl>

引用

参考文献からの引用を表示します。

<div class="Quote"><p>
引用した文章をここに表示します。
使用頻度が高いため、Wordpressの編集メニューにボタンを用意してあります。</p>
<p class="Source">引用元を示すもの。<a>URL</a>・論文名・公示名など</p>
</div>

緊急のお知らせ

<div class="Temp">
自動でpが入らないため注意
<a>リンク</a>も別の書式を用意しています。
</div>

白抜き強調

<div class="Color_White">
何かを強調する場合の段落です。
すごく目立つので長文には使えません。
内部のpが自動で入らないため注意
</div>

白地強調

<div class="Base_White"><p>
本文でも引用でもない文を書くための段落です。
お客様の証言、過去のやりとりなどで使います。
使用頻度が高いため。Wordpressの編集画面にボタンが用意してあります。
</p></div>

オーバーフロー

設定された要素にoverflow:hiddenを適用。

contents未設定

contents設定

<div class="contents"></div>
<p class="contents"></p>
<span class="contents"></span>

フレキシブルボックス

要素をフレキシブルにする。
記述順が序盤なので上書きされがちな点に注意。

• class=flex-centerを適用。
• 要素２
• 要素３

• flex-sb-cを適用
• 要素２
• 要素３

• flex-sb-cにflex-reverseを適用
• 要素２
• 要素３

class="flex-center"
class="flex-sb-c"
class="flex-reverse"

段落後のスペースを除外

p要素１

p要素２ ※ここに適用

p要素３

<p class="Spaces_none">p要素２ ※ここに適用</p>

段落寄せ

右にブロックとして寄せる。全要素に対応可

<p class="float_right"></p>