ブログ用WordPressテーマ マテリアル2

記事の装飾とAddQuicktagプラグインについて

calendar

スポンサーリンク

タグ挿入ボタンをカスタマイズできるaddQuicktag

 マテリアル2では、記事を装飾する為のスタイル(css)が初めから定義されています。

 例えば、字を赤くしたければ、redというclassを付けます。

↓↓↓
簡単に赤い字にすることもできる

 しかし、いちいち<span class=”red”>なんてタグ書くのは面倒です。が、WordPressにはタグをワンクリックで挿入できるタグ挿入ボタンがついています。

addquicktg

タグ挿入ボタンの使い方

 タグ挿入ボタンは非常に便利です。

 例えば、赤字にしたい文字があるとすると、その文字を選択した状態で、span.redというタグ挿入ボタンをクリックするだけです。

addquicktag2

 すると、その選択していた文字を囲む形で、タグが挿入されます。

addquicktag3

 ちなみに、span.redというボタンは普通はありません。これはマテリアル2仕様です。
 タグ挿入ボタンをマテリアル2仕様にするには、AddQuicktagプラグインを使えば簡単です。

 AddQuicktagプラグインの設定画面から、マテリアル2専用のaddQuicktag用jsonファイルをインポートするだけで、マテリアル2で用意されている記事装飾用のタグを全てワンクリックで挿入できるようになります。

マテリアル2の記事装飾用タグ

 マテリアル2のデフォルトで設定されている記事装飾タグをご紹介します。

文字色

赤字です

青字です

緑字です

薄い字です

文字の大きさ

太字です

やや大きい字です

かなり大きい字です

やや小さい字です

かなり小さい字です

 

合わせ技

かなり大きい赤字です

 合せ技に関しては、タグ挿入ボタンで一発というわけにはいきませんが、classを複数適用すれば、いろんな装飾を混ぜ合わせることも可能です。

背景色

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

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

引用文

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

普通のリスト

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

番号付きリスト

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

説明つきリスト

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

バッジ

注意マテリアル2もあります

参考マテリアル2のサイドバー哲学

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

下の余白をなくす

 pタグはデフォルトでは、下にマージンが設定されています。

 そのおかげで、このように段落ごとにスペースが空くわけですが、スペースを空けたくない場合がたまにあります。例えば、リストの表題のような使い方です。

好きな果物

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

↑この「好きな果物」の下に余白が無いのが分かると思います。これはp.no_marginを使うことで出来ます。

 枠を付けることも出来ます。

枠の中にpタグ

 強調したい文章を囲う枠を付ける事ができます。

 何か強調したい文章などを枠で囲うことができます。枠には赤と緑があります。いろんな使い方ができると思うので、お試しください。さようなら。

注意ただし、divタグの中の文字には自動でpタグが付かないので、自分でpタグを付けましょう。

枠の中にリスト

 枠の中にリストを入れるのことも可能です。

好きなサッカーチーム

  • FCバルセロナ
  • バイエルン・ミュンヘン
  • マンチェスター・シティ

 ↑p.no_marginも使っています。

 こんなところです。いろいろ使ってみて下さい。

この記事をシェアする

コメント

コメントはありません。

down コメントを残す




関連記事

ウィジェットについて
マテリアル2のサイドバー哲学

No Image

ヘッダー画像について

管理人

Nobuo

Nobuo

WordPressテーマ Principle、マテリアルの作者です。このたび、マテリアル2をリリースしました。多くの方に使っていただけると嬉しいです。

folder 機能解説

No Image

ヘッダー画像について
ウィジェットについて
more...

folder 更新情報

カテゴリーページのSEO強化の為、ページ送り機能を追加

No Image

No Image

more...