方法、手法

addquicktagのカスタムタグ

アドクイックタグ(addquicktag)の追加タグ一覧

WordPressで記事を書くときに、どうしても表現方法がうまく出来ず、困っていました。

デフォルトの飾り文字では物足りなくなり、wordpressのプラグインでaddquicktagをインストールしてエディタをカスタムしました。

私の場合は、見出しではなく、単純に文字の大きさに強弱を付けたり、文字の色を付けたりぐらいは欲しいかなぁと思っていました。

ネットで調べてみて設定しても、思ったようなボタンを作ることが出来ませんでした。

wordpressのプラグインでは、結構ニーズの高いaddquicktgagですが、基本的な情報ばっかりで、肝心のタグ情報がほとんど見当たりませんでしたので苦戦しました。

他にも、困っている人がいるのではと、思い記事にしました。

私が追加した飾り文字とその下に、タグのHTMLを記載しましたので参考にしてください。

これで作ったタグボタンは、組み合わせることも出来るのでとても便利になりました。

例えば、赤文字と大文字と太文字など、どんどん組み合わせることができますのでお試しください。

HTML言語は、もっとスマートなものがあるかもしれませんが、私が成功した事例を紹介しています。

また、紫色や緑色などありますが、ここで紹介している色は私が好きな色にしていますので、オリジナルではないことをご了承ください。

文字の大きさ

8ポイント

<span style=”font-size: xx-small;”>8ポイント</span>

10ポイント

<span style=”font-size: small;”>10ポイント</span>

12ポイント

<span style=”font-size: medium;”>12ポイント</span>

14ポイント

<span style=”font-size: large;”>14ポイント</span>

18ポイント

<span style=”font-size: x-large;”>18ポイント</span>

24ポイント

<span style=”font-size: xx-large;”>24ポイント</span>

36ポイント

<span style=”font-size: 300%;”>36ポイント</span>

文字の色

赤色

<span style=”color: #ff0000;”>赤色</span>

青色

<span style=”color: #0000ff;”>青色</span>

緑色

<span style=”color: #00ff00;”>緑色</span>

黄色

<span style=”color: #ffff00;”>黄色</span>

茶色

<span style=”color: #800000;”>茶色</span>

灰色

<span style=”color: #c0c0c0;”>灰色</span>

水色

<span style=”color: #00ffff;”>水色</span>

紫色

<span style=”color: #ff00ff;”>紫色</span>

白色

<span style=”color: #ffffff;”>白色</span>

文字背景の色

赤色

<span style=”background-color: #ff0000;”>赤色</span>

青色

<span style=”background-color: #0000ff;”>青色</span>

緑色

<span style=”background-color: #008000;”>緑色</span>

黄色

<span style=”background-color: #ffff00;”>黄色</span>

茶色

<span style=”background-color: #800000;”>茶色</span>

灰色

<span style=”background-color: #c0c0c0;”>灰色</span>

水色

<span style=”background-color: #00ffff;”>水色</span>

紫色

<span style=”background-color: #ff00ff;”>紫色</span>

白色

<span style=”background-color: #ffffff;”>白色</span>

見出し文字

見出し1

<h1>見出し1</h1>

見出し2

<h2>見出し文字</h2>

見出し3

<h3>見出し3</h3>

見出し4

<h4>見出し4</h4>

見出し5

<h5>見出し5</h5>

見出し6

<h6>見出し6</h6>

今回の記事のように、HTMLタグをWebに表示するためにはタグを工夫しないと、HTML言語として表示することができませんので<  >を置き換えて入力する必要があります。

<= &lt ;  >= &gt ;

少しのHTML文章なら手間はかかりませんが、量が増えてくればとてもしんどいです。
そこで、Microsoft Word で便利な機能がありますので合わせて紹介します。
WordにHTML言語を貼り付けして、一括置換します。

Wordで一括置換の手順

ホームタブ のリボンの右の方に 編集 がありますのでそれをクリック。
プルダウンしたリストの中から 置換 をクリック。
すると 検索と置換 のウィンドウが開きます。
検索する文字列 に < を入力し、 置換後の文字列 に &lt ; を入力します。
次は、 すべて置換 を押せばWordエディタの < はすべて &lt ; に置き換わります。

Wordがなければ、便利なフリーソフトもありますので検索してみてください。


follow us in feedly

ブログ記事を応援してくれる方はポチッっと下のボタンを押してね

そして、この記事をツイッター投稿してくれるなら下のボタンを押してね

電子レンジを考察前のページ

思い出の紙コップ次のページ

関連記事

  1. 方法、手法

    英単語と英熟語の覚え方

    単語帳を使って、英単語を覚えようとしている人を見かけますが、これは非常…

  2. 方法、手法

    エアコンに頼らず、家を涼しくする方法 冷輻射編

    夏の暑い日に、トンネルの中に入ると、ひんやりと感じること。この涼しさは…

  3. 方法、手法

    壊れてしまったファスナーは簡単に直る!

    手芸が得意な人なら、ファスナーを新品に交換したりするのかもしれませんが…

  4. 方法、手法

    エアコンに頼らず、家を涼しくする方法 熱の移動編

    「体感温度」 = 「実際の温度」 ではないってことです。例えば、冷蔵庫…

  5. 方法、手法

    アウトドアや非常時に炎を手に入れる方法

    火があれば、明かりを灯すことも出来ます。火があれば、調理することも出来…

  6. 方法、手法

    ヘナは天然がゆえに…

    このシリーズはまだ続きますが、なんとなくヘナがヘアカラーよりも安全であ…




役に立つ記事

気になる記事

笑える記事

follow us in feedly
  1. 方法、手法

    オートファジーとは
  2. 方法、手法

    日程調整がめっちゃ楽になる方法
  3. 方法、手法

    サイズが合わない靴でも捨てる必要はありません
  4. 考え方

    予習より復習が大切な理由
  5. 方法、手法

    トイレが詰まったらどうする?(゚д゚)!
PAGE TOP
%d人のブロガーが「いいね」をつけました。