Quantcast
Viewing latest article 4
Browse Latest Browse All 4

AddQuicktagプラグインでタグ挿入ボタンをマテリアル仕様に

 AddQuicktagプラグインで、タグ挿入ボタンをマテリアル仕様にカスタマイズすると、記事を簡単に装飾することが出来ます。

タグ挿入ボタン

 WordPressの記事編集ページには、タグ挿入ボタンがついています。
Image may be NSFW.
Clik here to view.
addquicktag

 このタグ挿入ボタンをカスタマイズ出来るのがAddQuicktagプラグインです。

AddQuicktag

 マテリアルでは記事を書く際に、よく使うであろう文字装飾等はデフォルトでcssを当てています。

 AddQuicktagプラグインをインストールして、↓こちらのjsonファイルをaddquicktagの設定画面からインポートすると、以下のタグが全てワンクリックで入力出来るようになります。

Download1101 downloads

マテリアルのデフォルトcss

※マテリアル1.5.7で微調整しましたので、それ以前のバージョンをお使いの場合、同じように表示されないものもあります。

赤字

<span class="red">赤字です</span>

赤字です

青字

<span class="blue">青字です</span>

青字です

緑字

<span class="green">緑字です</span>

緑字です

薄い字

<span class="gray">薄字です</span>

薄い字です

やや大きい字

<span class="l">やや大きい字です</span>

やや大きい字です

かなり大きい字

<span class="ll">かなり大きい字です</span>

かなり大きい字です

やや小さい字

<span class="s">やや小さい字です</span>

やや小さい字です

かなり小さい字

<span class="ss">かなり小さい字です</span>

かなり小さい字です

太字

<span class="b">太字です</span>

太字です

合わせ技

<span class="red ll">かなり大きい赤字です</span>

かなり大きい赤字です

赤背景

<p>強調したいところを<span class="back-red">赤い背景です</span>に出来ます。</p>

強調したいところを赤い背景に出来ます。

青背景

<p>強調したいところを<span class="back-blue">青い背景です</span>に出来ます。</p>

強調したいところを青い背景に出来ます。

引用文

<blockquote>
どこかから文を引用する時はblockquoteタグで囲いましょう。
</blockquote>

どこかから文を引用する時はblockquoteタグで囲いましょう

普通のリスト

<ul>
<li>りんご</li>
<li>バナナ</li>
<li>いちご</li>
</ul>

  • りんご
  • バナナ
  • いちご

番号付きリスト

<ol>
<li>りんご</li>
<li>バナナ</li>
<li>いちご</li>
</ol>

  1. りんご
  2. バナナ
  3. いちご

説明つきリスト

<dl>
<dt>りんご</dt>
<dd>りんごはりんごの木になっています。甘くておいしいのでニュートン先生もりんごが大好きです。</dd>
<dt>バナナ</dt>
<dd>バナナはフィリピンでいっぱいとれます。サッカーで曲がるシュートのことをバナナシュートと言います。いや最近は言いません。</dd>
<dt>いちご</dt>
<dd>いちごは甘くてすっぱいかわいい果物です。ショートケーキの上に乗っています。高いものだと一つ500円ぐらいするそうです。</dd>
</dl>

りんご
りんごはりんごの木になっています。甘くておいしいのでニュートン先生もりんごが大好きです。
バナナ
バナナはフィリピンでいっぱいとれます。サッカーで曲がるシュートのことをバナナシュートと言います。いや最近は言いません。
いちご
いちごは甘くてすっぱいかわいい果物です。ショートケーキの上に乗っています。高いものだと一つ500円ぐらいするそうです。

<table class="hyou">
<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>

日本の四季
3月~5月 花がたくさん咲きます
6月~8月 暑いです
9月~11月 涼しくなります
12月~2月 寒いです

Viewing latest article 4
Browse Latest Browse All 4

Trending Articles