このサイトについて

このサイトはソリシティで提供するwebサイト作成維持管理サービスにおけるデモサイトとして公開しています。

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

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

文字装飾

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

太字

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

文字を太字にします。

赤字

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

文字を赤字にします。

太い赤字

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

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

赤のアンダーライン

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

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

黄色のマーカー

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

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

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

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

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

打ち消し線

文字に<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に、以下のような足説明(補足情報補)用のスタイルを適用した拡張クラスを追加しました。 以下のような補足説明用のスタイル…

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クラスを使用

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

Simplicity20140828より、Simplicityに、Bootstrap風の案内を表示するためのCSSクラスを追加しました。…

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

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

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

ボタン

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

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

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

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

検索フォーム風

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

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

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

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ぽい会話文を表示する方法を紹介します。 尚、この機能はSimpli…

まとめ

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

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

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

タイトルとURLをコピーしました