クイックタグの使い方がよくわからないので
WordPressのデフォルトでのクイックタグと
Simplicity2のデフォルトでのクイックタグを整理してみました。
WordPress標準装備のクイックタグ
b (strongタグ)
≪挿入タグ≫
<strong></strong>
≪役割≫
テキストを太字にする
≪補足≫
似たようなHTMLタグに<b>タグがあり、どちらもテキストを太字にするのだが、<strong>タグは太字にするだけでなくそのキーワード自体も強調し、SEO対策にも効果がある。
i (emタグ)
≪挿入タグ≫
<em></em>
≪役割≫
テキストを斜体にする
≪補足≫
テキストを斜体にしてキーワードを強調する。
アクセントをつけたい場合などに使用する。
link (aタグ)
≪挿入タグ≫
<a href=””></a>
≪役割≫
リンクを貼る
≪補足≫
herf=””にリンク先URLを入れる。
b-quote (blockquoteタグ)
≪挿入タグ≫
<blockquote></blockquote>
≪役割≫
タグに囲まれた部分が引用・転載であることを示す
≪補足≫
似たようなHTMLタグに<q>タグがあり、どちらも引用・転載を示すが、<q>タグは改行を伴わないような短い文章、<blockquote>タグは段落全体などの長い文章の引用に用いる。
del (delタグ)
≪挿入タグ≫
<del datetime=””></del>
≪役割≫
テキストに打消し線を引く
≪補足≫
<del>タグは文章の削除を意味する。
似たようなタグに<s>タグがあり、こちらも<del>タグ同様に打消し線が引かれるが、こちらは文章の訂正を意味している。
ins (insタグ)
≪挿入タグ≫
<ins datetime=””></ins>
≪役割≫
追加したことを示す
≪補足≫
<ins>タグで囲まれた部分は後から追加された部分であることを意味する。ブログに追記する時等に使う。
img (imgタグ)
≪挿入タグ≫
<img src=”” alt=””>
≪役割≫
画像を挿入する
≪補足≫
img src=””には表示する画像のファイル名を入力。
alt=””には画像が表示できない時に代わりに表示するテキストを入力。
ul (ulタグ)
≪挿入タグ≫
<ul></ul>
≪役割≫
順序のないリストを表示するときに使用。
≪補足≫
<li>タグと合わせて使用。
ol (olタグ)
≪挿入タグ≫
<ol></ol>
≪役割≫
順序のあるリストを表示するときに使用。
≪補足≫
<li>タグと合わせて使用。
li (liタグ)
≪挿入タグ≫
<li></li>
≪役割≫
リストの項目を表す。
≪補足≫
<ul>や<ol>タグの間に記述。
code (codeタグ)
≪挿入タグ≫
<code<>/code>
≪役割≫
HTMLやJavaScriptなどのコードを示すタグ。
≪補足≫
<code<>/code>で囲まれた部分はプログラムのソースコードであることを意味する。
インデントや改行をしているソースコードを表示したい場合は<pre>タグで囲んで使う。
more (moreタグ)
≪挿入タグ≫
<!–more–>
≪役割≫
WordPressの【続きを読む】の機能を埋め込む。
≪補足≫
記事の「続きを読む」を表示させたいところでmoreタグを挿入すると、
記事一覧では追加した前までの文章しか表示されず、「続きを読む」をクリックすると記事全体が表示される。
記事には「続きを読む」リンクは表示されない。
タグを閉じる
≪挿入タグ≫
<>
≪役割≫
タグを閉じる
≪補足≫
simplicity2標準装備のクイックタグ
pre (preタグ)
≪挿入タグ≫
<pre></pre>
≪役割≫
半角スペースや改行をそのまま表示する際に使用する。
≪補足≫
HTMLソースやプログラムのソースコードをそのまま表示したいときや、 絵文字を表示する場合などに使用出来る。
文字装飾
太字
≪挿入タグ≫
<span class=”bold”></span>
≪役割≫
テキストを太字にする
≪スタイル≫
class=”bold”
赤字
≪挿入タグ≫
<span class=”red”></span>
≪役割≫
テキストを赤字にする
≪スタイル≫
class=”red”
太い赤字
≪挿入タグ≫
<span class=”bold-red”></span>
≪役割≫
テキストを太い赤字にする
≪スタイル≫
class=”bold-red”
赤アンダーライン
≪挿入タグ≫
<span class=”red-under”></span>
≪役割≫
テキストに赤い下線を引く
≪スタイル≫
class=”red-under”
黄色マーカー
≪挿入タグ≫
<span class=”marker”></span>
≪役割≫
テキストに黄色のマーカーを引く
≪スタイル≫
class=”marker”
黄色アンダーラインマーカー
≪挿入タグ≫
<span class=”marker-under”></span>
≪役割≫
テキストに黄色のマーカーで下線を引く
≪スタイル≫
class=”marker-under”
打ち消し線
≪挿入タグ≫
<span class=”strike”></span>
≪役割≫
テキストに打ち消し線を引く
≪スタイル≫
class=”strike”
バッジ/キーボード
バッジ
≪挿入タグ≫
<span class=”ref”>バッジ</span>
≪役割≫
バッジ化したい「参照」「引用」などの文字をマウスでドラッグしてからボタンを押すと、その名前のバッジが作成される。
ドラッグしないでボタンを押すと「バッジ」になるので、「<span class=”ref”>バッジ</span>」の「バッジ」を「参照」「引用」「出典」などに書き換えて使用する。
≪補足≫
参照 参照情報バッジ
引用 引用元バッジ
出典 出典元バッジ
重要 重要バッジ
脚注 脚注バッジ
Pickup Pickupバッジ
サイト サイトリンクバッジ
キーボード
≪挿入タグ≫
<span class=”keyboard-key”>キーボード</span>
≪役割≫
キーボード化したい文字をマウスでドラッグしてからボタンを押すと、その名前のキーボードが作成される。ドラッグしないでボタンを押すと「キーボード」になるので、「<span class=”keyboard-key”>キーボード</span>」の「キーボード」を「Ctrl」「C」「V」などに書き換えて使用する。
≪使用例≫
コピーをするには Ctrl + C を押します。
貼り付けをするには Ctrl + V を押します。
注記(ボタン風にも使える)
リンクページ(ボタンにリンクも付加出来る)
補足情報表示
補足情報(i)
<div class=”information”></div>
≪役割≫
情報やお知らせ文を書く
≪スタイル≫
class=”information”
補足情報(?)
<div class=”question”></div>
≪役割≫
疑問・質問?に対する説明文を書く
≪スタイル≫
class=”question”
補足情報(!)
<div class=”alert”></div>
≪役割≫
注意文を書く
≪スタイル≫
class=”alert”
背景色
primary
<div class=”sp-primary”></div>
≪役割≫
背景がこのサンプル色になる
≪スタイル≫
class=”sp-primary
success
<div class=”sp-success”></div>
≪役割≫
背景がこのサンプル色になる
≪スタイル≫
class=”sp-success
info
<div class=”sp-info”></div>
≪役割≫
背景がこのサンプル色になる
≪スタイル≫
class=”sp-info
warning
<div class=”sp-warning”></div>
≪役割≫
背景がこのサンプル色になる
≪スタイル≫
class=”sp-warning
danger
<div class=”sp-danger”></div>
≪役割≫
背景がこのサンプル色になる
≪スタイル≫
class=”sp-danger