方法、手法

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. 方法、手法

    少しのコツだけで、Excelで作る表をプロの仕上がりに

    Excelで、表を作ったとき、こんな感じに作る人をよく見かけます。別に…

  2. 方法、手法

    ほとんどの電卓で使える、ちょっとした技

    消費税の計算に使えます。「1.08」「××」で、「1.08×」を固定す…

  3. 方法、手法

    わかりやすい相対性理論の話!自由研究にも使える

    時間の流れは一定ではないってことです。例えば、好きなことをしている時間…

  4. 方法、手法

    Googleの検索結果は、あなた専用だったんです。

    私も人に、「“○○ △△”のキーワードで検索したら一番初めに出てくるよ…

  5. 方法、手法

    黒くなったバナナと白菜(ハクサイ)の黒い斑点を救済せよ!

    食材が食卓に並ぶまでの期間には、多くのストレスを受けながら、それに耐え…

  6. 方法、手法

    パック寿司をおいしく食べる方法とお店での基本的な食べ方

    基本的な、お寿司の食べ方。スーパーに打っている…

A language is translated.

笑える記事

役に立つ記事

気になる記事

スポンサードリンク

応援していただける方はポチッと!

follow us in feedly
  1. 考え方

    猫ちゃんからのプレゼント
  2. メモ

    タイの人なら100%所持している「ヤードム」とは
  3. 考え方

    聞き流すだけで英語が話せるわけがない理由
  4. 考え方

    地球温暖化は、それほど悪くない
  5. 考え方

    ヤクルトを1ダース全部、一気飲みする?
PAGE TOP
%d人のブロガーが「いいね」をつけました。