Home » マテリアルの使い方 » AddQuicktagプラグインでタグ挿入ボタンをマテリアル仕様に

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

time 2015/04/28

folder マテリアルの使い方

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

タグ挿入ボタン

　WordPressの記事編集ページには、タグ挿入ボタンがついています。
addquicktag

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

AddQuicktag

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

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

“AddQuicktag用 jsonファイル” をダウンロード addquicktag_material_2.0.json_.zip – 3050 回のダウンロード – 2 KB

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

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

赤字

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

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

赤字です

青字

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

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

青字です

緑字

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

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

緑字です

薄い字

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

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

薄い字です

やや大きい字

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

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

やや大きい字です

かなり大きい字

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

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

かなり大きい字です

やや小さい字

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

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

やや小さい字です

かなり小さい字

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

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

かなり小さい字です

太字

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

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

太字です

合わせ技

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

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

かなり大きい赤字です

赤背景

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

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

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

青背景

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

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

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

引用文

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

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

</blockquote>

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

普通のリスト

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

<ul>

</ul>

りんご
バナナ
いちご

番号付きリスト

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

<ol>

</ol>

りんご
バナナ
いちご

説明つきリスト

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

<dl>

<dd>りんごはりんごの木になっています。甘くておいしいのでニュートン先生もりんごが大好きです。</dd>

<dd>バナナはフィリピンでいっぱいとれます。サッカーで曲がるシュートのことをバナナシュートと言います。いや最近は言いません。</dd>

<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>

<caption>日本の四季</caption>

<tr><th>春</th><td>3月～5月</td><td>花がたくさん咲きます</td></tr>

<tr><th>秋</th><td>9月～11月</td><td>涼しくなります</td></tr>

</table>

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

フォローする

twitter

facebook

google

feed

line

畏れ入ります。お忙しい中申し訳ありません。

マテリアルインストールさせていただいたのですが、
さらにこちらのjsonもインストールさせていただいているのですが、
タグは入るものの、色がぜんぜん反映されません。
感じとしてはCSSがない・・・？感じがします。
何か手順が抜けているのでしょうか・・・。
wp_material-2.13.0.zip
↓
wp_material_child-1.1.zip
↓
子テーマ適用
↓
AddQuicktagインストール
↓
addquicktag_material_2.0.json　インポート

by 清水っ子 2017年5月24日 12:45 AM
すみません。
一つわかりました。
子テーマだとダメなようです。
親テーマを反映したところ、ちゃんと色がつきました。

by 清水っ子 2017年5月24日 12:51 AM
お騒がせしました。
なぜか色がつくようになりました・・・。

by 清水っ子 2017年5月24日 1:04 AM
はじめまして。初心者でサイトを作成奮闘中です。今一つ。嫌、もう全てが大変。教えて頂きたいです。ホームの中にボタンを設定したいのです。よく、地図クリックすれば地図が出る、みたいな。やっと、メニューの中に文字が反映されました。内容も入力したいのにどこで設定すればよいのやら。全くの素人です。ごめんなさい。嫌にならず教えていただけませんか。
worldpress,テーマ.マテリアルです。

by masumi 2018年8月30日 10:19 PM