拡張クラス

こちらで「Simplicityの文章を彩る拡張クラス」として5つの記事で紹介されています。

「テキスト・エディター」に編集ボタンが並びます。なお、このデータは「親テーマ」内のフォルダ「css」の「extension.css」にあります。

まとめとしてはこちらの記事で。

プラグインAddQuicktagに登録して「ビジュアル・エディター」でも利用できるようにしておきましょう。

あわせて、別の「拡張クラス」も追加して編集しているところです。追加しているのはプラグインArconix Shortcodesの「トルグやタグ」などです。

なお、SC２を利用している方のプラグイン「TinyMCE Advanced」に任意のスタイルを追加する方法もあります。

「拡張クラス」は、このサイトでも実装覚書をしました。言い換えれば「書式の確認」といったところです。「TinyMCE Advanced」との重複もありますので、ここで確認して、整理してみます。

このページの目次

1 文字装飾
2 メッセージ表示用装飾
- 2.1 補足情報を表示
- 2.2 Bootstrap風メッセージ（５つあります）
3 メインカラムの2カラム化

文字装飾

太字　赤字　赤アンダーライン　黄色マーカー　黄色アンダーラインマーカー打ち消し線

バッジこれは応用があるようで・・・

参考 参考情報のリンク 引用 引用元のリンク サイト サイトへのリンク 出典 出典元のリンク

参考参考情報のリンク引用引用元のリンク

サイトサイトへのリンク出典出典元のリンク

キーボード使い方のサンプルは・・・

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

メッセージ表示用装飾

補足情報を表示

補足説明（i）

補足説明（？）

補足説明（！）

Bootstrap風メッセージ（５つあります）

プライマリー

サクセス

インフォ

ウォーミング

デンジャー

以下、SC2のデフォルトでは、「テキスト・エディター」にボタンは表示されないようです？

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

こちらは、画面の幅が狭くなると「上下2段」になります。

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

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。※この場合はビジュアルでの入力が若干面倒です。

私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。※こちらの２カラムは、画面の幅を小さくすると右カラムは下に移動します。レスポンシブ対応になっています。

★ゆくゆくは、このcssをショートコードにすると良いかもしれません。

こちらは、ASの2カラム用ショートコードです。（one-half）画面の幅が狭くなっても、２カラムのまま文字が小さくなります。

吾輩は犬である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも明るいからっとした所でわんわん泣いていた事だけは記憶している。

こちらの２カラムは、画面の幅を小さくしても右カラムは移動しません。

★

ブログカードを入れ子にすると・・・

ぶろぐかーど１

ぶろぐかーど2

★こちらは、スマホでは左にある画像が右のカラムに重なってしまいます。ので、やはり「上下2段」になる方が良いのですが・・・あれ？

ぶろぐかーど１

ボタン

コンバージョン用（訪問者から見込み顧客への転換）のリンクボタン

<p><a href="#" class="btn btn-red">ボタンテスト</a></p> <p><a href="#" class="btn btn-red btn-m">ボタンテスト</a></p> <p><a href="#" class="btn btn-red btn-l">ボタンテスト</a></p>

ボタンテスト

こちらは、さらに色々の紹介がされています。

Font Awesomeとの組み合わせもあります。