記事のレベルを上げる便利なHTMLタグ!&特殊文字!【ワードプレス】

ブログ
スポンサーリンク

記事を装飾したいけどHTMLのタグが分からなくてできない!

こんな疑問に答えます。

 

今回はCSSを使わずコピペしてすぐに使える便利なHTMLタグを集めました。

テーマのテンプレに載っていないものも多く取り扱っていますので、サイトを扱う方には必見です。

スポンサーリンク

記事のレベルを上げるHTMLコード

・チェックボックス
・表(グラフ)
・太字
・イエローマーカー
・文字の色

では、順にみていきましょう。

チェックボックス

これは、チェックをつけたり、外したりできるボックスです。

 

完成形はこちら。☟

チェック

ボックスをクリックするとチェックをつけたり、消したりできますよね。

私は海外旅行の持ち物リストを作る時に活用しました。

 

コードはこちらです。☟

<form action=”example.cgi” method=”post”><input name=”q1″ type=”checkbox” value=”チェック” />チェック</form>

 

これをコピペして、貼り付ければ同じ物が出来上がりです。

「”チェック”」の部分はお好きなワードをお使いください。

 

ボックスを増やしたい時は、「<input name=”q1″ type=”checkbox” value=”チェック” />チェック」を増やします。

チェック
チェック
チェック
チェック

 

コードはこんな感じです。

<div class=”kakomi-box3″><form action=”example.cgi” method=”post”><input name=”q1″ type=”checkbox” value=”チェック” />チェック
<input name=”q1″ type=”checkbox” value=”チェック” />チェック
<input name=”q1″ type=”checkbox” value=”チェック” />チェック
<input name=”q1″ type=”checkbox” value=”チェック” />チェック</form></div>

 

表(グラフ)

これが完成形です。☟

 

コードはこちらです。☟

<table style=”border-collapse: collapse; width: 94.2245%; height: 84px;”>
<tbody>
<tr>
<td style=”width: 50%;”></td>
<td style=”width: 50%;”></td>
</tr>
<tr>
<td style=”width: 50%;”></td>
<td style=”width: 50%;”></td>
</tr>
</tbody>
</table>

 

グラフのセルを増やしたい時は、下記の要素を追加します。

<tr>
<td style=”width: 50%;”></td>
<td style=”width: 50%;”></td>
</tr>

 

グラフは汎用性が高いので、使えると強いですね。

 

「width」の後の「%」をいじると大きさを変更できます。

 

太字

太字は記事を書く上で大切な装飾です。

が、多くのテーマでオプションがついているので、問題なく使えている人が多いかと思います。

 

一応、載せておきますね。

<span class=”bold”>・太字</span> → ・太字

 

イエローマーカー

こちらも同じく記事には、欠かせません。

こちらも多くのテーマでテンプレが用意はされていると思います。

 

一応。コードはこちら。

<span class=”marker-under”>マーカー</span> → マーカー




文字の色を変える

ここでは、文字の色を好きに変えるためのHTMLタグを紹介します。

 

コードはこちらです。

<span style=”color: ここに色のコード;”></span>

 

色にはそれぞれコードが存在します。

具体的にはこんな感じです。

コード
#ff0000
#0000ff
#ffcc00

 

詳しくは下記のサイトに載っています。私もお世話になっているサイトです。

☞https://www.colordic.org/

使える特殊文字

・指矢印
・天気
・その他便利マーク

 

指矢印

記号
HTMLコード
☞(右)
&#9758;
☜(左)&#9756;
☝(上)&#9757;
☟(下)&#9759;

 

天気

天気コード
&#9728;
&#9729;
&#9730;
&#10052;

 

その他便利なマーク

マークコード
(注意マーク)&#9888;
(チェックマーク)&#10004;
(ドクロマーク&#9760;
(笑顔マーク)&#9786;
(音符マーク)&#9834;

 

こちら色を変えて使うとさらに、見栄えが良くなります。

例えば、注意マークは「」よりも「」の方が、より目に止まります。

 

まとめ

記事を書く上で、必須のコードを紹介しましたが、他にもいくつか便利なものがあるので、順に紹介していきます。

少しでも参考になれば幸いです。

コメント

お問い合わせ

お問い合わせは下記に必要事項を記入し送信してください。

タイトルとURLをコピーしました