blog担当になったら最初に覚えておくと便利なHTMLタグ

WEB
DSC_0188
スポンサーリンク

blog未経験者が担当になる

営業さんが自社のblog担当になって苦戦してる

blogをやったことは?

読んだりはするけど、書いたことはないらしい

あぁタグとかも知らないだろうし、大変そう・・・頑張れ

ぶっちゃけタグを知らなくてもblogは書ける

無料登録のblogもWordpressも親切で便利な機能がたくさんあるので記事は書けるんです。
でも、多少でもタグを知っていれば、もっと記事投稿もやりやすいのになぁと思ったんです。

ホームページと同じでGoogleさんはブログも巡回します。
ユーザーに有意義なものであるか判断します。

検索等で記事に飛んできた人に読んでほしい、読む意味があるような文面にするのにタグは必要になります。
ただただ書き連ねていたら読みにくいだけで最後まで読んでもらいかもしれません。

というわけで、うちの担当はタグ知らないけど、
知っておいて損はないし便利かも!なタグを紹介します。

タグの基本

HTMLタグって?

文の構造を指定するのに使います。
「見出し」、「段落」、「文字の大きさや色」を変えたり、
画像を表示させたり、表も表示できます。

2セットが基本

<h2> </h2>

同じもので囲み後ろは「/」をつけます。
このタグここまでだよーって感じです。

例外

ただしイメージ画像の配置タグはちょっと違います。

<img src=”img/○○○.jpg” alt=”○○○” width=”100″ height=”100″ />

上記のように</img> とはつけません。

タグの説明

見出し

<h2> 見出しタグ </h2>

文にこれをつけるとテキスト部分が大きく、太文字になるので、
文の構造がよりわかりやすくなり、読者にわかりやすく伝えることができます。
h1~h6まであり、重要度はh1>h6

文字の装飾

太文字

①<b>太文字</b> 
②<strong>太文字</strong>

①bはboldの略。超簡単!

②strongで囲んだキーワードはGoogleさんは重要だとは認識していますので
乱用すると・・・コイツ アヤシクネ? スパムジャネ?と疑います。たぶん。
strongは大事なキーワードの時だけに使った方が良さそう。1記事3つ以内くらいに。

文字の色

①<span class=”red”>赤色</span>
②<span class=”#ff0000″>赤色</span>

①red、blue、green等の指定ができます
②もっと細かく色の指定をしたい時に使います。
#以降の6桁の数字を変えると色が変わります。

色見本としてご紹介したいのがコチラ↓
原色大辞典 さんは和色やパステルなど
素敵な色見本が揃っているので便利です。

文字の背景をマーカー

<span style=”background: #ffff99;”>蛍光ペンマーカー</span>

蛍光ペンマーカー

こちらも#以降の6桁の数字を変えれば文字の背景に蛍光ペンマーカーっぽい線が入ります。

改行

<br>

これをいれるだけで改行されます。

イメージ

<img src=”img/○○○.jpg” alt=”○○○” width=”100″ height=”100″ />

src=”配置したい画像の場所”
alt=”イメージの説明”
width=”幅”
height=”高さ”

width=”幅”とheight=”高さ”は元画像より小さく表示させたい時などこの数値を変えて変更することができます。
もちろん大きくも表示はできますが、オリジナルの大きさより大きくなるので画像が荒くなります。

リンク

<a href=”https://○○○.html” target=”_blank”>リンク</a> 

TOPページを別窓で開く

a href=”飛ばしたいアドレス”
target=”_blank”は別ウィンドウを新規で開く設定ができるので、覚えておいて損はないかと。
同ウィンドウでよければ<a href=”https://○○○.html”>でok!

文章のセンターに表示

<center>真ん中に来る!</center> 

真ん中に来る!

応用で<center>の間にイメージを配置するタグを入れるとイメージが真ん中にきます。

まとめ

いかがでしたか?
この他にもたくさんタグはあるのですが、ひとまず上記のタグを覚えておけば
何かと記事の編集に役に立つので是非覚えてくださいね!
そして素敵なblog記事を書きましょう!

をまつ
膠原病持ちでwebやデザインをしている人

特発性血小板減少性紫斑病と全身性エリテマトーデスを診断され約20年。
事務からPOP・広告・web関連の仕事に右往左往、試行錯誤中。
詳しいプロフィール →

\ をまつをフォロー! /
この記事が気に入ったら
いいね!をお願いします
最新情報をお届けします。
WEB
スポンサーリンク
\ をまつをフォロー! /
をまろぐ-woma2log-

コメント

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