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>
詳細は以下を参照してください。
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クラスを使用
詳しくは以下を参照してください。
メインカラムの2カラム化
本文内を、半分ずつに分けるときに利用します。
<div class="half-half cf"> <div class="half-l">吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。</div> <div class="half-r">私はその人を常に先生と呼んでいた。だからここでもただ先生と書くだけで本名は打ち明けない。これは世間を憚かる遠慮というよりも、その方が私にとって自然だからである。私はその人の記憶を呼び起すごとに、すぐ「先生」といいたくなる。筆を執っても心持は同じ事である。よそよそしい頭文字などはとても使う気にならない。</div> </div>
ボタン
コンバージョン用のリンクボタンなどに。
この他にもいろいろな色が用意してあります。
詳しくは以下を参照してください。
検索フォーム風
検索案内用のクラスです。
<div class="search-form"> <div class="sform">キーワード</div> <div class="sbtn">検索</div> </div>
詳しくは以下を参照してください。
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">南でまた２つの国が腐海にのまれてしまった<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>
負うた子に助けられたか
この谷はいい、いつ来ても心が和む
今度の旅はどうじゃった？
うーん ひどいものだ
南でまた２つの国が腐海にのまれてしまった
詳しくは以下を参照してください。
まとめ
これらの、拡張クラスを利用すれば、より見やすく文章を書くことができるかもしれません。
そして、WordpressプラグインのAddQuicktagに登録して利用することにより、より手軽に利用できるかと思います。
というわけで、これまで拡張クラスの利用方法を書こう書こうと思っていつつも、面倒くさくて書いていなかったのをようやく書くことができました。
コメント
要望
ＣＳＳコードは便利で多様しています。メモ帳にコピーして貼り付ける形で使っていますが数が増えていくとなにかと不便です。functions.phpに追加する方法もあるようですが、カスタマイズの場所で簡単にＣＳＳコードを登録できれば便利だと思いました。
「カスタマイズの場所」というのはどこでしょう？
AddQuicktagで登録するのではダメでしょうか。
AddQuicktagによく使うタグを登録して記事作成の効率を上げよう
AddQuicktagの設定方法と使い方【プラグイン】 ≫ 使い方・方法まとめサイト – usedoor
よかったらそのfunctions.phpに追加する方法が書かれたページを教えていただけると幸いです。
AddQuicktag こんな便利なプラグインがあったとは！
これですこれ！こういう感じです！すごくスムーズに記事がかけるようになりました。わいひらさん教えていただきありがとうございます！
「functions.phpに追加する方法が書かれたページ」はこれかなと思います。
WordPressの投稿画面にプラグインを使わずに自作のクイックタグを追加する方法
私はプラグインをあまり使いたくないので、この方法でカスタマイズしてます。
ありがとうございます！
次の機能追加は、これにしようと思っていたので調べる手間が省けました。
今ちょっと、体調不良なもので、回復したら記事を読んで試してみたいと思います。
お大事に！
寝ログには特に検索でたどりつくことが多く、いつも助けられてます。
ありがとうございます。
わいひらさん、いつもお世話になっております
この記事何回も見ていて勉強させて貰ってます。
赤色マーカーが欲しいんですが、以下をcssに追加すれば良いのでしょうか?
.marker{
background-color:#E50202;
}
実際に試してみるのが最も手っ取り早いかと思います。
ただ、背景色をその色にすると、黒色の文字に対して濃い赤色で文字が読みにくくなりますが、それで良いのであれば多分大丈夫かと思います
わいひらさん、申し訳ないです。
質問だしたあとに、出来る限りフォーラムの方にお願いします。
の文章をみました。
やってみたのですが、出来なかったのでもう少し頑張ってみます。次回はフォーラムに書き込みます
フォーラムに書き込むと、タイトルが付くので、同様の問題を抱えた方が、サイト内検索で見つけやすくなるので、そのようにお願いしています。あと、答え手が多いほうがいいかなと思いまして。
ただ、関連記事のコメントであれば、全然お答えはしようと思っています。
でも、上記コードでなんでうまくいかなかったんだろう。僕がデベロッパーツールで試した限りではうまくいったんですが。
わいひらさん、すいません。
たった今、こちらのコメント見つけました。
マーカーは、出来たのですが、赤のマーカーラインは結構時間かかりました(*_*)
.がなかったり、たったちょっとのことなんですね!
わいひらさんの記事で、F12を押してキャッシュをクリア―、とても便利です。
助かります。fierfoxにも、そんなのがあればいいですけどね。
今度から、質問はフォーラムに書き込みます。
プログラムコードは、一文字違うだけでも動作しなくなることが多々あるので注意が必要です。
なので、ソースコードを編集する際には、記入ミスを見つけやすい、シンタックスハイライト機能のある（コードが文法によって色分けで表示される）テキストエディターを利用することをおすすめします。
わいひらさん、教えて頂いて大変助かります。
以下の記事発見しました。
https://wp-simplicity.com/highlight-js/
Simplicityでソースコードをハイライト表示する方法
IE11では、色が出てなかったので? だったのですが、隣のPCのchromeだとちゃんと色が出てました。
で、自分でやってみたら、ちゃんと出来ました!
と で囲めばいいんですね!
ありがとうございます
そうではなくて、Wordpress関係のソースコードを編集するのだったら、FTPソフトと”テキストエディタ”を使用した方が良いという趣旨のことを言いたかったのでした。
無料のWindowsソフトとかだったら、サクラエディタとか、TeraPadとかEmEditor Freeです。
こういうのを利用すると、入力ミスに気づきやすいと言いたかっただけです。
わいひらさん、理解が悪くて何度もすいません
そういう意味だったのですね。
何度もついでに、もう一つだけ教えて下さい。
ちなみに、わいひらさんは何のエディタをお使いなんでしょうか?
僕は、Sublime Text3を利用しています。ただ、Sublime Textはデフォルトが英語なので、個人的にはBracketsがおすすめです。
ただ、上に挙げたエディターは、プログラマー向けのものなので、少しややこしいかもしれません。
なので、まず最初に使うエディターとして利用するなら、前回のレスで挙げたものあたりが使いやすいかもしれません。
僕のお勧めとしては、導入しやすいものならTeraPad、プログラムコードも編集するならBracketsが初期に使うものとしては扱いやすいかと思います。
わいひらさん、こんにちは。
お答いただき、ありがとうございます。
無料で日本語化も出来ている、Bracketsを導入しました。
拡張機能も、記事を見てほぼ、いれてみました。
色々とご指導ありがとうございました
こんにちは。
プログラム用に無料で利用できるものなら、Bracketsは最高のエディターの一つだと思います。
デフォルトで、黒背景で目にもやさしいですし。
Bracketsのハイライト表示なら、入力ミスも見つけやすくなるかと思います。
こんにちわ。初心者なので容量の得ない質問でしたら申し訳ありません。タイトルとタイトルの下に来るキャッチフレーズの文字の大きさ、色などを変更するにはどうしたらいいですか？それにともないヘッダー画像の大きさも変更出来ないんでしょうか？何度もこのサイトを読み返しているのですが、初めて聞く単語も多く困っているもんで…申し訳ないですが教えていただけませんか？
サイトはまだ作成中です。よろしくお願いします。
こんにちは。
申し訳ないですが記事との関連性の薄いSimplicityに関する質問は、できればフォーラムの方に書き込んでいただいてよろしいでしょうか。
質問ごとに、トピックをたてていただけると助かります。
トピックの案内はこちら。
https://wp-simplicity.com/suport/topic/first-time/