どうもこんにちは、さいほうへいきです！
今回はどっちかというとまあブログ読者向けではない記事ですね。
タイトル通り、WordPressでサクッと使えちゃうHTMLタグをいくつかご紹介していきます！
選定基準は僕がここ卵のブログで使ったことのあるタグなので、すごく偏りはありますがまあ……お見逃しください。
前置き
先に言っておきます。
このページはいつもビジュアルエディタを使ってる人には全く不要です！！
ビジュアルエディタはその名前通り、ただボタンをぽちぽちするだけで自由自在に編集装飾ができるすごい機能ですよね。ここで記事を寄稿してる人は十中八九これを使ってると思います。
めちゃめちゃ簡単なので、普通にそっちのほうが使いやすいですし、僕も推奨しておきます。使ったことはないですが……。
でも、もしプログラミングに興味がある人とかはこういうところでHTMLに触れてみるのも悪くはないと思いますよ。
超個人的な話にはなりますが、僕はビジュアルエディタ系のやつがあまり好きではないので、だいたいどのサイトでもソースで編集しています。ここ然り、Wikipedia然りですね。
というわけでまあ僕、そこはかとなくHTMLの知識があるとは思っているので、もし興味がある人は読んでみてください。
なおここで想定しているのはWordPressですので、ゼロからホームページを作りたい人なんかは他にもいろいろ要ります。全然このページの内容では足りません、タイトルとかCSSとかね……。
そこらへんはご了承を。
HTMLタグの使い方
WordPressの記事編集画面でコード編集を選んでください。ビジュアルエディタじゃなくて、こういう画面になると思います。
では、ここにいろいろ打ち込んでいきましょう。
普通に地の文は何も手を加えずに打ち込んでもらって大丈夫です！
で、試しにプレビューなんかをしてもらうと、とりあえず卵のブログでずらっと文章が出てくると思います。
でもこの文、何の装飾もないから少し読みづらいですよね。とりわけ文章量が多いと、「どこが大事な部分なのか？」とか「どこを読めばいいの？」とか、混乱を招きます。
まあ上から全部読めよって話ですが、時は金なりですからね。重要な部分をしっかり目立たせる工夫をした方が、手軽に読みやすいです。
じゃあ、この記事でもかなり多用している太字を装飾したい！ と思ったらどうするべきか。
編集画面に戻って、太字にしたい文字列をそれぞれ、次のような感じで囲いましょう！
<b>ここがじゅうよう</b>さて、こうすると太字になります。
この時のbというのが、太字を表すんですね。このbを別の文字に変えると、それぞれに応じていろんな装飾が可能になります！
では、さっそくどんな種類があるのか見ていきましょう。
よく使うタグ
見出し(h2～h6)
<h2>、<h3>、<h4>、<h5>、<h6>まであります。
これが見出しですね。
この項目にもあるように、大きな見出しがついてくれるので、何について話しているのかがわかりやすくなります。
h2が大きく、h3がが少し小さく、h4がもっと小さいです。
例を挙げると、『好きな食べ物』『好きな果物』『レモンについて』……のような使い方ができるわけですね。
それから、この記事の一番上にもくじがあるのを見ましたか？
WordPressには便利な機能があり、h2、h3と見出しを付けていると、自動で入れ子構造のもくじをつくってくれるんですね！
ちなみにh1はないの？ と思われたかもしれません。あります。
とはいえ普通は使いません。というのも、h1タグは一番大きい見出しなのですが、基本的に記事タイトルにしか使わないんですね。
太字(b)
<b>丸亀製麺の麺は太い。</b>これは文字をシンプルに太字にします。さっきもチラッと触れましたね。
どこが重要なのか、言いたいことはなんなのかを格段に目立たせてくれます。正直なところ、言いたいことを太字で囲っているだけで見やすさにかなりの差がでます。
しかも一文字だけですから打ちやすいですしね。
bはboldの略で、そのまんま太字、はっきりした、という意味の英語です。
斜体(i)
<i>つっつけば倒せる。</i>こちらは文字を斜体にします。
本を読んでいると、例えば、外国語の単語や引用部分などが斜体になっていたりしますよね。
太字とは使い方がまた異なるのですが、ハッキリ地の文と区切りをつけるのに有用です。
iはitalicで、こちらもそのままイタリック体ということです。
取り消し線(delete)
<del>まあお金ないんだけど</del>なんかちょっと変なことを言っているときなどに、こんなふうに取り消し線を引けます。
なお、deleteというエイリアスも使えるのですが、一部の環境によってはうまく動かないので主にdelがおすすめです。
下線(u)
<u>ばー</u>このタグではこうやってアンダーバーが使えます。
良く目立ちますね。というか、太字などよりもだいぶ目立ちます。
色付け
<span style="color:red;">赤く燃える！</span>やや使い方が複雑ですが、こうすると赤青緑黄灰といろんな色が付けられます。
この辺を詳しく解説するとCSSという別の言語が絡んでくるので、今のところはredを好きな色名やカラーコードに置き換えれば大丈夫です。
青ならblue、緑ならgreen、それ以外にもいろいろあるので、足りなくなったら調べてみてください！
画像(img)
<img src="×××">
画像を挿入してくれるタグですね。
WordPressでは自動でこのタグをつけてくれる『メディアを挿入』という機能があるので使うことはあまりないのですが、例えば外部サイトに保存しておいた画像などを表示するのに使えます。
たとえば直近の例だと、TenorにアップロードしておいたGIFなどがそうですね。
×××の部分を画像のURLに置き換えて使いましょう。
箇条書き(ul、li)
<ul>
<li>その1</li>
<li>その2</li>
</ul>
このタグは箇条書きを作ってくれます。次のような感じになります。
- その1
- その2
単純にものごとを列挙するのに便利です。上記のimgなどと組み合わせると、画像を使うこともできます。
<ul>
<li>その1
<ul>
<li>補足1</li>
<li>補足2</li>
</ul>
</li>
<li>その2</li>
</ul>
ちなみに、こんなふうにすると箇条書きを入れ子にすることもできます。
- その1
- その1
- その2
- その2
ルビを振る(ruby、rt)
<ruby>
鯔<rt>とど</rt>
</ruby>
少し記法が面倒ですが、こうして読み仮名をつけることができます！
『炎槍』のように、魔法のファンタジーなんかでは重宝しそうですね。
文字を格納(details、summary)
<details>
<summary>キャベツの蛇足を読むこちら</summary>
キャベツはおいしいです。なんと、オロルンは大量のキャベツをくれます。
</details>こういうふうに書くと、
キャベツの蛇足を読むにはこちら
キャベツはおいしいです。なんと、オロルンは大量のキャベツをくれます。
というように、長い文章を折りたたんで表示できます。
まさに本筋からはそれてしまう余談などをしまうのに適していますね。
リンク(a)
<a href="https://blog.xn--u9j676hhsp1l4b.net/">ここをクリック</a>他のサイトにジャンプできるリンクを載せることができます！
ダブルクオーテーションの中のリンクを他のページに変えれば、YouTubeやWikipedia、GoogleとRed♪Tubeなどにも飛ばせます。好きなページを入れましょう。
当たり前ですが、ウイルスサイトなどを入れると犯罪になりかねないので絶対に厳禁です！！
埋め込み
最後に、他の記事へのリンクをもっとわかりやすく表示する手段、埋め込みをご紹介します。
こんな感じで記事が置いてあると一目でわかりやすいです。
で、これまでよりちょっと複雑なので難しそうに思えるかもしれませんが、実は一番簡単です。
普通にURLをはっ付ければ終わり。楽勝！！
まとめ
というわけで、今回はすごく雑にざっとHTMLでの装飾記法をご紹介しました。
これ以外にもかなりの数のタグがあり、僕もいろいろなものを使っているのですが、まあそこらへんは必要に応じてで大丈夫でしょう。
もし追加してほしいタグがあればぜひ、コメントなどで教えてください！
アーチャウ茶についての記事はこちらをご覧ください。
また、DREAMスターライトの超最強属性『彁属性』のハロウィン新カードについてはこちらをどうぞ！
では、またどこかでお会いしましょう！
さいほうへいきでした。
コメント