こんにちは。ノッツです(^o^)/
ブログを書くとき文章に強弱を付けるために、文字の色や太さなどの装飾を意識することがあると思います。
当サイトで使っているテーマであるSimplicityには、その装飾を簡単にするために拡張クラスとして予め多数用意されています。
その拡張クラスの使い方とレイアウト例をまとめてみました。
下記コードをテキストエディタなどにコピペすれば利用できると思います。
追記：クイックタグとしてSimplicityの拡張クラスを登録して効率よく利用できる記事を書きました。あわせてご覧いただければと思います。
参考・参照
他のサイトを引用するなどに便利な装飾です。
<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公式サイトにも書かれています。
.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公式サイトにも書かれています。
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には隠れ？拡張クラスが用意されています。
これらの拡張クラスを使うことによって、文章を簡単に装飾できるのでとても便利です。
是非使ってみてください。
コメント
初心者なのでかなり役に立ちました！試してみたいと思います(^^)/
＞ひかるさん
コメントありがとうございます。
お役に立てたようで、とても嬉しく思います^^