Simplicityのデフォルト装飾タグの使い方とそのレイアウト見本のまとめ

こんにちは。ノッツです(^o^)/

ブログを書くとき文章に強弱を付けるために、文字の色や太さなどの装飾を意識することがあると思います。

当サイトで使っているテーマであるSimplicityには、その装飾を簡単にするために拡張クラスとして予め多数用意されています。

その拡張クラスの使い方とレイアウト例をまとめてみました。

下記コードをテキストエディタなどにコピペすれば利用できると思います。

追記：クイックタグとしてSimplicityの拡張クラスを登録して効率よく利用できる記事を書きました。あわせてご覧いただければと思います。

クイックタグを使用してテキストエディタでタグを効率よく入力する方法（Simplicityでは拡張クラスを設定すると更に便利に）

こんにちは。ノッツです(^o^)/ 前回、Simplicityに拡張クラスのタグについて説明しました。 この拡張クラスを利用するには、タグをコピペするか入力しなければなりません...

ichigoichielab.com

2015.07.09

参考・参照

他のサイトを引用するなどに便利な装飾です。

<span class="sankou">.sankouクラスを使用</span>

.sankouクラスを使用

以下のようにしても使用できます。

<span class="sanko">.sankoクラスを使用</span>

<span class="reffer">.refferクラスを使用</span>

<span class="ref">.refクラスを使用</span>

.sankoクラスを使用

.refferクラスを使用

.refクラスを使用

スタイルシートでそれぞれのクラスに対して背景色などを変えることで、参考、参照などで色を変えることもできるので便利かもしれません。

背景色とフォントサイズは、例えば以下のように子テーマのスタイルシートにコピペすると変えることができます。

.sankou {
  background-color: #8DF04A;
  font-size: 14px;
}

なお、クラス名”sankou”を当サイトでは以下のようにスタイルシートでカスタマイズしているので、フォントサイズなどデフォルトとは異なっています。

.sankou {
  margin-right: 5px;
  padding: 1px;
  font-size: 14px;
}

文字の装飾

文書に強弱をつけたいときなどに便利な装飾です。

太字

<span class="bold">.boldクラス</span>

.boldクラス

赤色

<span class="red">.redクラス</span>

.redクラス

太字で赤色

<span class="bold-red">.bold-redクラス</span>

.bold-redクラス

マーカーの黄色のような色

<span class="marker">.markerクラス</span>

.markerクラス

マーカの色は、例えば以下のように子テーマのスタイルシートにコピペすると変えることができます。

.marker {
  background-color: #F9EB14;
}

打ち消し線

<span class="strike">.strikeクラス</span>

.strikeクラス

使用例

ブログを書いていて、<span class="bold-red">文章に強弱</span>を付けるために、文字の<span class="red">色</span>や<span class="bold">太さ</span>などの装飾を意識することがあると思います。当サイトで使っているテーマである<span class="bold">Simplicity</span>には、その装飾を簡単にするために<span class="red">拡張クラス</span>として予め多数用意されています。その<span class="marker">拡張クラスの使い方とレイアウト例</span>をまとめ<span class="strike">てみ</span>たいと思います。

ブログを書いていて、文章に強弱を付けるために、文字の色や太さなどの装飾を意識することがあると思います。当サイトで使っているテーマであるSimplicityには、その装飾を簡単にするために拡張クラスとして予め多数用意されています。その拡張クラスの使い方とレイアウト例をまとめてみたいと思います。

キーボードキー風

キーボードのキーを使って説明したいときなどに便利な装飾です。

<span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">X</span>

<span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">V</span>

<span class="keyboard-key">Enter</span>

Ctrl + X

Ctrl + V

Enter

なお、当サイトでは以下のようにスタイルシートでカスタマイズしているので、影が消えておりデフォルトとは異なっています。

.keyboard-key {
  box-shadow: none;
}

Bootstrap風の案内メッセージ

Bootstrap風の案内メッセージが5つ用意されています。

注意事項などを書くときなどに便利な装飾です。

例では<p>タグを使用していますが、<div>タグでも使用できます。

spは、Simplicityの短縮形とのことです。

この使い方は、Simplicity公式サイトにも書かれています。

SimplicityにBootstrap風の案内メッセージを表示する方法

Simplicity20140828より、Simplicityに、Bootstrap風の案内を表示するためのCSSクラスを追加しました。ブートストラップのデザインをそのままパク参考にさせていただきました。以下のようにして使用します。例ではp

wp-simplicity.com

.sp-primaryクラス

<p class="sp-primary">.sp-primaryクラスを使用</p>

.sp-primaryクラスを使用

.sp-successクラス

<p class="sp-success">.sp-successクラスを使用</p>

.sp-successクラスを使用

.sp-infoクラス

<p class="sp-info">.sp-infoクラスを使用</p>

.sp-infoクラスを使用

.sp-warningクラス

<p class="sp-warning">.sp-warningクラスを使用</p>

.sp-warningクラスを使用

.sp-dangerクラス

<p class="sp-danger">.sp-dangerクラスを使用</p>

.sp-dangerクラスを使用

LINE風の会話文

LINEの会話などを引用するときなどに便利な装飾です。

この使い方は、Simplicity公式サイトにも書かれています。

SimplicityでLINE風の会話文を表示する方法

Simplicityの拡張クラスを使って、本文記事にLINEぽい会話文を表示する方法を紹介します。尚、この機能はSimplicity1.3.8からの実装ですので、これよりもバージョンが低い場合は、アップデートする必要があります。LINE風会

wp-simplicity.com

LINEの再現の場合はキャプチャ画像でもよいかもしれませんが、この方法だと検索エンジンにも内容を理解してもらえるという利点があるとのことです。

会話のみ

左のときは、.left_balloonクラスを使用します。

<p class="left_balloon">こんにちは。</p>

<div class="clear_balloon"></div>

こんにちは。

右のときは、.right_balloonクラスを使用します。

<p class="right_balloon">こんにちは。</p>

<div class="clear_balloon"></div>

こんにちは。

例えばこんな感じで利用できます。

<p class="left_balloon">こんにちは。</p>

<p class="right_balloon">こんにちは。</p>

<p class="left_balloon">今度どこかに旅行に行きませんか？</p>

<p class="right_balloon">いいですね。</p>

<p class="left_balloon">どこがいいですか？</p>

<p class="left_balloon">旅行先考えてみますね。</p>

<div class="clear_balloon"></div>

こんにちは。

こんにちは。

今度どこかに旅行に行きませんか？

いいですね。

どこがいいですか？

旅行先考えてみますね。

会話表示を終えたいときは、<div class=”clear_balloon”></div>または<div class=”clear-balloon”></div>のような、回り込みのリセットを行うためのクラスを利用する必要があります。

これを行わないとその後の文章表示が崩れます。

以下のように「-（ハイフン）」で使ってもOKです。

<p class="right-balloon">こんにちは<p>

<p class="left-balloon">こんにちは<p>

<div class="clear-balloon"></div>

こんにちは

こんにちは

背景色をつける

<div class=”line_back”></div>または<div class=”line-back”></div>タグを用いることで、背景色も設定できます。

<div class="line_back">

  <p class="left_balloon">こんにちは。</p>

  <p class="right_balloon">こんにちは。</p>

  <p class="left_balloon">今度どこかに旅行に行きませんか？</p>

  <p class="right_balloon">いいですね。</p>

  <p class="left_balloon">どこがいいですか？</p>

  <p class="left_balloon">旅行先考えてみますね。</p>

<div class="clear_balloon"></div>

</div>

工夫すれば、吹出しの先に写真なども追加することができるので、さらにLINE風にできると思います。

さいごに

Simplicityには隠れ？拡張クラスが用意されています。

これらの拡張クラスを使うことによって、文章を簡単に装飾できるのでとても便利です。

是非使ってみてください。