Simplicityの基本的な文章装飾スタイルを使う方法まとめ

Simplicityでは、デフォルト状態で、文字装飾に使えるCSSの拡張クラスをいくつか用意しています。

以下では、それら拡張クラスの使い方について説明したいと思います。

文字装飾

まずは、文字装飾用に以下のようなクラスがあります。

太字

文字を<span class="bold">太字</span>にします。

文字を太字にします。

赤字

文字を<span class="red">赤字</span>にします。

文字を赤字にします。

太い赤字

文字を<span class="bold-red">太い赤字</span>にします。

文字を太い赤字にします。

赤のアンダーライン

文字に<span class="red-under">赤のアンダーライン</span>を引きます。

文字に赤のアンダーラインを引きます。

※Simplicity2.1.0より

黄色のマーカー

文字に<span class="marker">黄色のマーカー</span>を引きます。

文字に黄色のマーカーを引きます。

黄色のアンダーラインマーカー

<span class="marker-under">黄色のアンダーラインマーカー</span>を引きます。

文字に黄色のアンダーラインマーカーを引きます。

※Simplicity2.1.0より

打ち消し線

文字に<span class="strike">打ち消し線</span>を引きます。

文字に打ち消し線を引きます。

参考情報用のバッジ

参照情報用のバッジは、sankou、sanko、feffer、refのどれを利用しても同じです。

<span class="sankou">参考</span> 参考情報のリンク

<span class="sanko">引用</span> 引用元のリンク

<span class="reffer">サイト</span> サイトへのリンク

<span class="ref">出典</span> 出典元のリンク

参考 参考情報のリンク

引用 引用元のリンク

サイト サイトへのリンク

出典 出典元のリンク

キーボードキー

コピーをするには<span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">C</span>を押します。

貼り付けをするには<span class="keyboard-key">Ctrl</span> + <span class="keyboard-key">V</span>を押します。

コピーをするにはCtrl + Cを押します。

貼り付けをするにはCtrl + Vを押します。

メッセージ表示用装飾

メッセージ表示用装飾としては、以下のようなものがあります。

補足情報を表示

<div class="information">補足説明を入力する。</div>

<div class="question">疑問を持たれそうな内容に関する補足説明を入力する。</div>

<div class="alert">注意文を入力する。</div>
補足説明を入力する。
疑問を持たれそうな内容に関する補足説明を入力する。
注意文を入力する。

詳細は以下を参照してください。

補足情報を表示させるための拡張クラスの使い方|Simplicity
Simplicityに、以下のような足説明(補足情報補)用のスタイルを適用した拡張クラスを追加しました。 以下のような補足説明用のスタイル...

Bootstrap風メッセージ

Bootstrapのメッセージ表示欄のような5つのスタイルに対応したクラスがあります。

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

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

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

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

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

.sp-primaryクラスを使用

.sp-successクラスを使用

.sp-infoクラスを使用

.sp-warningクラスを使用

.sp-dangerクラスを使用

詳しくは以下を参照してください。

SimplicityにBootstrap風の案内メッセージを表示する方法
Simplicity20140828より、Simplicityに、Bootstrap風の案内を表示するためのCSSクラスを追加しました。...

メインカラムの2カラム化

本文内を、半分ずつに分けるときに利用します。

<div class="half-half cf">
  <div class="half-l">吾輩は猫である。名前はまだ無い。
  どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</div>
  <div class="half-r">私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。</div>
</div>
吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。

ボタン

コンバージョン用のリンクボタンなどに。

この他にもいろいろな色が用意してあります。

詳しくは以下を参照してください。

Simplicity文字装飾のボタン拡張クラスの使い方
Simplicity2.2.1からボタン拡張クラスを追加しました。 以下では、ボタン拡張クラスの使用例を紹介します。 様々な色のボタン ボ...

検索フォーム風

検索案内用のクラスです。

<div class="search-form">
  <div class="sform">キーワード</div>
  <div class="sbtn">検索</div>
</div>
キーワード
検索

詳しくは以下を参照してください。

Simplicity文字装飾の「検索を促す検索フォーム表示」の使い方
Simplicity2.2.1から検索フォームを表示を追加しました。 検索案内用のクラスです。 <div clas...

LINE風メッセージ

一応、以下のようなLINE風スタイルもあります。

<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="right_balloon">南でまた2つの国が腐海にのまれてしまった<img alt="" src="https://wp-simplicity.com/wp-content/uploads/2014/12/1724.png" /></p>
   
  <div class="clear_balloon"></div>
 
  <div class="clear_balloon"></div>
</div>

負うた子に助けられたか

この谷はいい、いつ来ても心が和む

今度の旅はどうじゃった?

うーん ひどいものだ

南でまた2つの国が腐海にのまれてしまった

詳しくは以下を参照してください。

SimplicityでLINE風の会話文を表示する方法
Simplicityの拡張クラスを使って、本文記事にLINEぽい会話文を表示する方法を紹介します。 尚、この機能はSimpli...

まとめ

これらの、拡張クラウスを利用すれば、より見やすく文章を書くことができるかもしれません。

そして、WordpressプラグインのAddQuicktagに登録して利用することにより、より手軽に利用できるかと思います。

というわけで、これまで拡張クラスの利用方法を書こう書こうと思っていつつも、面倒くさくて書いていなかったのをようやく書くことができました。

Ptengine
初心者でも見やすいアクセス解析「Ptengine」。無料から使えて、Simplicityから手軽に設定することも可能です。
スポンサーリンク
アドセンス(大)
アドセンス(大)

Simplicityの基本的な文章装飾スタイルを使う方法まとめ
最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク
アドセンス(大)

コメント

  1. 匿名 より:

    要望

    CSSコードは便利で多様しています。メモ帳にコピーして貼り付ける形で使っていますが数が増えていくとなにかと不便です。functions.phpに追加する方法もあるようですが、カスタマイズの場所で簡単にCSSコードを登録できれば便利だと思いました。

  2. わいひら わいひら より:

    「カスタマイズの場所」というのはどこでしょう?
    AddQuicktagで登録するのではダメでしょうか。
    AddQuicktagによく使うタグを登録して記事作成の効率を上げよう
    AddQuicktagの設定方法と使い方【プラグイン】 ≫ 使い方・方法まとめサイト – usedoor

    よかったらそのfunctions.phpに追加する方法が書かれたページを教えていただけると幸いです。

  3. 匿名 より:

    AddQuicktag こんな便利なプラグインがあったとは!
    これですこれ!こういう感じです!すごくスムーズに記事がかけるようになりました。わいひらさん教えていただきありがとうございます!

  4. いのぽん より:

    「functions.phpに追加する方法が書かれたページ」はこれかなと思います。
    WordPressの投稿画面にプラグインを使わずに自作のクイックタグを追加する方法
    私はプラグインをあまり使いたくないので、この方法でカスタマイズしてます。

  5. わいひら わいひら より:

    ありがとうございます!
    次の機能追加は、これにしようと思っていたので調べる手間が省けました。
    今ちょっと、体調不良なもので、回復したら記事を読んで試してみたいと思います。

  6. いのぽん より:

    お大事に!
    寝ログには特に検索でたどりつくことが多く、いつも助けられてます。
    ありがとうございます。