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

装飾

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

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

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

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

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

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

クイックタグを使用してテキストエディタでタグを効率よく入力する方法(Simplicityでは拡張クラスを設定すると更に便利に)
こんにちは。ノッツです(^o^)/ 前回、Simplicityに拡張クラスのタグについて説明しました。 この拡張クラスを利用するには、タグをコピペするか入力しなければなりません。 ...
スポンサーリンク

参考・参照

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

.sankouクラスを使用

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

.sankoクラスを使用

.refferクラスを使用

.refクラスを使用

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

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

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

スポンサーリンク

文字の装飾

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

太字

.boldクラス

赤色

.redクラス

太字で赤色

.bold-redクラス

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

.markerクラス

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

打ち消し線

.strikeクラス

使用例

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

キーボードキー風

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

Ctrl + X

Ctrl + V

Enter

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

Bootstrap風の案内メッセージ

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

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

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

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

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

.sp-primaryクラス

.sp-primaryクラスを使用

.sp-successクラス

.sp-successクラスを使用

.sp-infoクラス

.sp-infoクラスを使用

.sp-warningクラス

.sp-warningクラスを使用

.sp-dangerクラス

.sp-dangerクラスを使用

LINE風の会話文

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

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

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

会話のみ

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

こんにちは。

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

こんにちは。

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

こんにちは。

こんにちは。

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

いいですね。

どこがいいですか?

旅行先考えてみますね。

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

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

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

こんにちは

こんにちは

背景色をつける

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

こんにちは。

こんにちは。

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

いいですね。

どこがいいですか?

旅行先考えてみますね。

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

さいごに

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

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

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

コメント

  1. ひかる より:

    初心者なのでかなり役に立ちました!試してみたいと思います(^^)/

    • ノッツ より:

      >ひかるさん
      コメントありがとうございます。
      お役に立てたようで、とても嬉しく思います^^