ZeroPlus Gateについて

\ シェア /

FacBook
Twitter
LINE
はてブ
PPocket
ZeroPlus Media > Web制作 > WordPress > 【WordPress】簡単にタグを出力できるQuickTagとは?

【WordPress】簡単にタグを出力できるQuickTagとは?

Web制作

2021/12/24

2023/04/14

今回は、WordPressを使って記事を執筆する方が必ず利用しているQuickTagを紹介します。

QuickTagを利用すると、HTMLのタグを1クリックで追加することができるようになります。

QuickTagを使いこなしている人と、使いこなせていない人では記事の執筆にかかる工数が大きく変わってきます。
今回の記事でQuickTagの基礎を学び、記事執筆の工数を短くしていきましょう。

今回の記事で身につく内容
  • QuickTagの使い方

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

QuickTagとは

QuickTagとはビジュアルエディタとテキストエディタで使用することができる機能です。

ボタン一つでHTMLのタグを出力することができます。

 

ビジュアルエディタのQuickTag

ビジュアルエディタのQuickTag

 

テキストエディタのQuickTag

テキストエディタのQuickTag

標準で設定されているQuickTag

プラグインやfunctions.phpを修正することにより、QuickTagにタグを追加したり削除することも可能です。

今回は、デフォルトで設定されているQuickTagを紹介していきます。

 

b
出力されるタグ: <strong></strong>

表示: 太字になります。

 

i
出力されるタグ: <em></em>

表示: 強勢する(アクセントを付ける)

 

link
出力されるタグ:<a href=""></a>

表示: リンクが設定できます。こちらはZseroPlusMediaへのリンクです。

 

b-quote
出力されるタグ:<blockquote></blockquote>

表示:

引用文を挿入します。

 

del
出力されるタグ:<del datetime="削除時間"></del>

表示:削除された部分に使用します。

 

ins
出力されるタグ:<ins datetime="追加時間"></ins>

表示:追加した要素であることを意味します。

 

img
出力されるタグ:<img src="">

表示:画像が出力されます。

 

ul
出力されるタグ:<ul></ul>

表示:順序のない箇条書きであることを意味します。

 

ol
出力されるタグ:<ol></ol>

表示:順序のある箇条書きであることを意味します。

 

li
出力されるタグ:<li></li>

表示:リストを出力します。

 

code
出力されるタグ:<code></code>

表示:プログラムのソースコードを出力します。

 

more
出力されるタグ:<!--more-->

表示:WordPressに設定されている続きを読む機能を埋め込みます。

ZeroPlusgate50教材の動画

HTML5になってからの変更点

上記に解説したタグでHTML5になってからの変更点をご紹介します。

 

<em>タグ

<em>タグは、強意(意味を強める)を表す要素でした。また斜体を表す際に使用さることが多くありました。 HTML5では強勢する(アクセントを付ける)箇所を表す要素となり、これまでとは意味が変更されています。

 

<del>タグ
<del>タグはHTML5になってから仕様が多少変わり、<del></del>の間に<p> タグを挿入しても良くなりました。

 

<ins>タグ
<ins>タグは<del>タグ同様、<ins></ins>の間に<p> タグを挿入しても良くなりました。

これらの変更点はHTML5になってからブロックレベル要素の概念がなくなったことが理由と考えられます。
ただし、以下のように、段落などの境界を跨いで<ins>を使うことは非推奨となっています。

<!-- 以下のマークアップは非推奨です -->
<ins datetime="">
</p>段落1<p>
段落2
</ins>
<!-- 以下のマークアップが推奨されています -->
<ins datetime="">
</p>段落1<p>
</ins>
<ins datetime="">
段落2
</ins>

以上でQuickTagの紹介を終了します。

今回はデフォルトで設定されているQuickTagを紹介しました。

実際はこれら以外のタグも記事の中でたくさん使用しています。

こちらの記事ではオリジナルのQuickTagを設定する方法を紹介しています。
また、使用しないQuickTagを非表示にする方法なども紹介しているので、1クリックで普段使用しているタグを出力したいと思っている方はぜひ参考にしてみてください。

ZeroPlus Gateについて

プログラミング学習でこのような経験はありませんか?

  1. 目標に向けて何を学べば良いかわからない
  2. 調べても解決策が見つからない
  3. 現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

  1. なんでも相談できる専属メンター
  2. いつでも技術相談ができるプロ講師
  3. 元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

\ 学んだことをSNSでシェアしよう /

この記事の執筆者

ZeroPlus Media変種部

ZeroPlus Media編集部

ZeroPlusは、「フリーランス特化型プログラミングスクール」です。ZeroPlus Mediaでは、フリーランスとして活躍する際に役立つ有益なプログラミングやWeb制作に関する情報を発信しています。

目次

質問について

ZeroPlus Media読者限定で質問対応をおこなっています。以下の2つの方法で質問を受け付けています。

選べる2つの質問方法

1

Google Foam(テキスト)で質問

mail

フォーム送信

メールで解答

formで質問
2

Google meet(オンラインmtg)で質問

meet

日時選択

メールを受け取る

メールからmtgに参加

meetで質問
ZeroPlus Gateについて

あなたの目的に合わせた2つのサービス

あなたの目的に合わせたZeroPlusの2つのサービス
基礎からフリーランスレベルまで本質的な学びを提供しています

完全無料!30日間で学びきれる
プログラミンスクールZeroPlus Gate

  • お金をかけずに、学習を進めたい
  • Webサイトを作れるようになりたい
  • メンターや講師に質問しながら学習したい

詳しくはこちらから

フリーランス特化型
プログラミングスクール ZeroPlus

  • プログラミング学習で悩んでいる
  • 仲間と一緒に学習したい
  • フリーランスとしての総合的な力を養いたい

詳しくはこちらから