ブログ記事を書くユーザーなら覚えておいて損がないHTMLタグ5選

CMSであるWordPressで記事を書く場合、あまりHTMLを意識しなくても更新出来てしまいますよね。

最初の内はそれでいいと思いますが、どうせならウェブの世界に片足を突っ込んだ訳なので、ウェブの仕組みを覚えておいた方が、取り組みもより有意義になりますよ。

ウェブの仕組みとは、ウェブ構成しているHTMLタグのこと。

ウェブ上の教養みたいなものなので、この存在を知っておくと損することはないです。

今回は、「ブログ記事を書くユーザーなら覚えておいて損がないHTMLタグ5選」をご紹介します。

 <a>タグ(リンクの指定)

<a>タグでは、リンクの指定ができます。

関連記事、外部サイトで紹介したい記事、外部のウェブサービスで作成したページ…etc。

こういったページからページへの移動させる為に、リンクを指定を使います。

<a href=”https://konohaya.com/” target=”_blank”>このは屋のブログ</a>

という記述になります。

href=”https://konohaya.com/”の箇所でURLを指定し、target=”_blank”では別タブで開くようにする指定をしています。

リンク指定したい文字列をタグで囲み、最後に</a>で閉じる形ですね。

よく使うタグなので、覚えておいた損はないです。

<blockquote> タグ(引用文を掲載する際に使用)

<blockquote> タグは、引用文を掲載する際に使用します。

重複コンテンツを避ける為と、著作権コンテンツで後々問題にならないように、引用文にしておく為に使います。

使い方は、<blockquote> 引用文をここに記載</blockquote> といった形式で記述します。

<style>タグ(CSSを直接指定できる)

<style>タグを使うことで、フォントサイズや背景色などを柔軟に指定できます。

<span style=”background-color: #efefef; color: #ffffff; font-size: 25px;”>ここの文字列を記載
</span>

で、指定ができます。

「background-color: #efefef;」で背景をグレイ色にし、「color: #ffffff;」でテキスト色を白にしています。

そして、「font-size: 25px;」でフォントサイズは25pxに指定しています。

こういった柔軟な設定が出来るので、よく使います。

<img>タグ(画像の指定)

<img>タグでは、画像の指定で使います。

<img src=”画像のURL” width=”200″ height=”92″/>

で、指定ができます。

「src=”画像のURL”」の箇所で、表示させたい画像のURLを指定します。

あとは、「width=”300″ height=”100″」で幅と高さの指定が可能です。

これを覚えておくと、画像の大きさの柔軟な変更が出来ますよ。(表示後の確認は必ずしてください。)

<iframe>タグ(外部サイトのコンテンツ表示)

<iframe>タグは、外部サイトのコンテンツを表示させる為に使用します。

<iframe width=”560″ height=”315″ src=”外部サイトのコンテンツURL”></iframe>

といった形式で記述します。

「src=”外部サイトのコンテンツURL”」で、外部サイトのコンテンツURLを指定しますが、多くの場合は、外部サービスに埋め込みコードと呼ばれるものがあり、そのままコピペできるので、この辺はノータッチでOKです。

「width=”560″ height=”315″」で、任意のサイズに変更できるので、ここを覚えておきましょう。

編集後記

今回は、「ブログ記事を書くユーザーなら覚えておいて損がないHTMLタグ5選」についてご紹介しました。

ご紹介したものは、あくまでHTMLタグの一部です。

他にも無数にありますので、気になったら調べてみてください。

CMSを使っていると、ツールバーでなんとかなりますが、HTMLタグを知っておくとブログのカスタマイズ性が上がり、微調整も出来るようになりますよ。

以下、参考になる記事ですので、ご参照ください。

【初心者向け】微調整のためのHTML・CSSのスキル。

記事が気に入ったら
いいね!しよう

このは屋の最新情報をツイッターで