スポンサーリンク
タグ挿入ボタンをカスタマイズできるaddQuicktag
マテリアル２では、記事を装飾する為のスタイル（css）が初めから定義されています。
例えば、字を赤くしたければ、redというclassを付けます。
|
1 |
簡単に<span class="red">赤い字</span>にすることもできる |
↓↓↓
簡単に赤い字にすることもできる
しかし、いちいち<span class=”red”>なんてタグ書くのは面倒です。が、WordPressにはタグをワンクリックで挿入できるタグ挿入ボタンがついています。
タグ挿入ボタンの使い方
タグ挿入ボタンは非常に便利です。
例えば、赤字にしたい文字があるとすると、その文字を選択した状態で、span.redというタグ挿入ボタンをクリックするだけです。
すると、その選択していた文字を囲む形で、タグが挿入されます。
ちなみに、span.redというボタンは普通はありません。これはマテリアル２仕様です。
タグ挿入ボタンをマテリアル２仕様にするには、AddQuicktagプラグインを使えば簡単です。
AddQuicktagプラグインの設定画面から、マテリアル２専用のaddQuicktag用jsonファイルをインポートするだけで、マテリアル２で用意されている記事装飾用のタグを全てワンクリックで挿入できるようになります。
マテリアル２の記事装飾用タグ
マテリアル２のデフォルトで設定されている記事装飾タグをご紹介します。
文字色
赤字です
|
1 |
<span class="red">赤字です</span> |
青字です
|
1 |
<span class="blue">青字です</span> |
緑字です
|
1 |
<span class="green">緑字です</span> |
薄い字です
|
1 |
<span class="gray">薄字です</span> |
文字の大きさ
太字です
|
1 |
<span class="b">太字です</span> |
やや大きい字です
|
1 |
<span class="l">やや大きい字です</span> |
かなり大きい字です
|
1 |
<span class="ll">かなり大きい字です</span> |
やや小さい字です
|
1 |
<span class="s">やや小さい字です</span> |
かなり小さい字です
|
1 |
<span class="ss">かなり小さい字です</span> |
合わせ技
かなり大きい赤字です
|
1 |
<span class="red ll">かなり大きい赤字です</span> |
合せ技に関しては、タグ挿入ボタンで一発というわけにはいきませんが、classを複数適用すれば、いろんな装飾を混ぜ合わせることも可能です。
背景色
強調したいところを赤い背景に出来ます。
|
1 |
強調したいところを<span class="back-red">赤い背景</span>に出来ます。 |
強調したいところを青い背景に出来ます。
|
1 |
強調したいところを<span class="back-blue">青い背景</span>に出来ます。 |
引用文
どこかから文を引用する時はblockquoteタグで囲いましょう
|
1 2 3 |
<blockquote> どこかから文を引用する時はblockquoteタグで囲いましょう。 </blockquote> |
普通のリスト
- りんご
- バナナ
- いちご
|
1 2 3 4 5 |
<ul> <li>りんご</li> <li>バナナ</li> <li>いちご</li> </ul> |
番号付きリスト
- りんご
- バナナ
- いちご
|
1 2 3 4 5 |
<ol> <li>りんご</li> <li>バナナ</li> <li>いちご</li> </ol> |
説明つきリスト
- りんご
- りんごはりんごの木になっています。甘くておいしいのでニュートン先生もりんごが大好きです。
- バナナ
- バナナはフィリピンでいっぱいとれます。サッカーで曲がるシュートのことをバナナシュートと言います。いや最近は言いません。
- いちご
- いちごは甘くてすっぱいかわいい果物です。ショートケーキの上に乗っています。高いものだと一つ500円ぐらいするそうです。
|
1 2 3 4 5 6 7 8 |
<dl> <dt>りんご</dt> <dd>りんごはりんごの木になっています。甘くておいしいのでニュートン先生もりんごが大好きです。</dd> <dt>バナナ</dt> <dd>バナナはフィリピンでいっぱいとれます。サッカーで曲がるシュートのことをバナナシュートと言います。いや最近は言いません。</dd> <dt>いちご</dt> <dd>いちごは甘くてすっぱいかわいい果物です。ショートケーキの上に乗っています。高いものだと一つ500円ぐらいするそうです。</dd> </dl> |
バッジ
注意マテリアル２もあります
|
1 |
<span class="badge-red">参考</span>マテリアル２もあります |
|
1 |
<span class="badge-green">参考</span><a href="">マテリアル２のサイドバー哲学</a> |
表
| 春 | 3月～5月 | 花がたくさん咲きます |
|---|---|---|
| 夏 | 6月～8月 | 暑いです |
| 秋 | 9月～11月 | 涼しくなります |
| 冬 | 12月～2月 | 寒いです |
|
1 2 3 4 5 6 7 |
<table> <caption>日本の四季</caption> <tr><th>春</th><td>3月～5月</td><td>花がたくさん咲きます</td></tr> <tr><th>夏</th><td>6月～8月</td><td>暑いです</td></tr> <tr><th>秋</th><td>9月～11月</td><td>涼しくなります</td></tr> <tr><th>冬</th><td>12月～2月</td><td>寒いです</td></tr> </table> |
下の余白をなくす
pタグはデフォルトでは、下にマージンが設定されています。
そのおかげで、このように段落ごとにスペースが空くわけですが、スペースを空けたくない場合がたまにあります。例えば、リストの表題のような使い方です。
好きな果物
- りんご
- バナナ
- いちご
↑この「好きな果物」の下に余白が無いのが分かると思います。これはp.no_marginを使うことで出来ます。
|
1 2 3 4 5 6 |
<p class="no_margin">好きな果物</p> <ul> <li>りんご</li> <li>バナナ</li> <li>いちご</li> </ul> |
枠
枠を付けることも出来ます。
枠の中にpタグ
強調したい文章を囲う枠を付ける事ができます。
何か強調したい文章などを枠で囲うことができます。枠には赤と緑があります。いろんな使い方ができると思うので、お試しください。さようなら。
|
1 2 3 |
<div class="waku_red"> <p> 何か強調したい文章などを枠で囲うことができます。枠には赤と緑があります。いろんな使い方ができると思うので、お試しください。さようなら。</p> </div> |
注意ただし、divタグの中の文字には自動でpタグが付かないので、自分でpタグを付けましょう。
枠の中にリスト
枠の中にリストを入れるのことも可能です。
好きなサッカーチーム
- FCバルセロナ
- バイエルン・ミュンヘン
- マンチェスター・シティ
|
1 2 3 4 5 6 7 8 |
<div class="waku_green"> <p class="no_margin">好きなサッカーチーム</p> <ul> <li>FCバルセロナ</li> <li>バイエルン・ミュンヘン</li> <li>マンチェスター・シティ</li> </ul> </div> |
↑p.no_marginも使っています。
こんなところです。いろいろ使ってみて下さい。
コメント
コメントはありません。