知っておきたい WordPress 基本的なHTMLタグ

0
知っておきたい WordPress  基本的なHTMLタグ

 

ワードプレスWordPress
[HTML]基本的なHTMLタグ

 

WordPress、ブログなどではほぼ使用しないと思いますが。。。 

 

サイト制作で必要なHTMLタグがあります。
ブログなどでも使用できます。
最低限度覚えておいた方がタグ備忘録。

 

HTMLの知識はサイト制作の基本になります。

 

SEOの最適化にもある程度の部分は
HTML知識が必要になります。
覚えておくといいでしょう。

以下はWEBサイトの記事更新などに利用する基本的なHTMLタグです。

改行タグ
<br /> もしくは <br>

段落タグ
<p> もしくは </p>

横線タグ
<hr>

文字を太字
<b>太字</b>

文字を太字+重要な文字と認識
<strong>強調文字</strong>

 

★strongタグは記事テーマに関する文章に使用し
1ページにつき1~2つくらいの使用が適切と言われています。
(重要キーワードが多数あるのもよくないらしい)

 

文字等の位置を指定する

<left>左側</left>
<rigit>右側</right>
<center>中央</center>

 

文字の背景に色を付ける
<span style=”background-color: カラーコード;”>文字</span>

 

文字の色の変更タグ
<font color=*****>テキスト</font>

 

*****の部分に各種カラーコードを指定。

 


 

画像を表示させる為の指定タグ

<img src=”画像ファイル名.拡張子”>

 

画像ファイルで良く使用する拡張子は下記の3つです。
gif、jpg、png

 

※ファイル名のところには画像ファイル名(URL)を記載します。
※ファイル名と拡張子の間にある「.」(ドット)は消さないように注意。

 

画像の高さと幅、画像の代替テキストの指定
<img src=”画像のURL” width=“!!!” height=“!!!” alt=”画像の代替テキスト”>
!!!の部分に画像のサイズを指定。
widthが横幅、heightが縦幅。

 

「画像の代替テキスト」部分に記載したテキストが検索エンジンクローラーが
その画像自体が何かを理解する為に指定するテキストになります。

 

titleタグで表示テキスト指定
<img src=”画像のURL” width=”***” height=”***” title=”画像の表示テキスト”>

 

画像にカーソルを合わせた際にブラウザ上に指定したテキストが表示されます。
画像が表示出来ないブラウザの場合には、指定したテキストのみが表示されます。

 

例、
「お得」という画像であれば「お得」と記載するのが基本です。
カーソルを画像上におくと、その指定したテキストが表示されます。
画像に関連するテキストを指定する事。

 

もし何も指定しない場合には下記のようになります。
<img src=”画像のURL” width=”***” height=”***” title=””>
(titleタグを入れなくてもOK。)

 

リンクの指定方法
画面内で開く場合
<a href=”http://www.yahoo.co.jp/”>Yahoo!JAPAN</a>

 

別窓(新規ウィンドウ)で開く場合
<a href=”http://www.yahoo.co.jp/” target=”_blank”>※表示テキストを記載</a>

 

※http://www.yahoo.co.jp/の部分にリンクしたいURLを記載
※表示テキストを記載

 

「自分の別のページへリンクする際には画面内で開く設定にするのが基本」
「外部サイトへリンクをする際には別窓に開く設定にする事」が良いです。
それにより、元サイトが閉じないのでユーザビリティにも役立ちます。
回遊率アップ!!

 

半角スペースを忘れずに
HTML記述では「半角スペース」が重要な場合が多いです。

 

例えば以下のような記述では、半角スペースが入っています。
<a href=”http://www.yahoo.co.jp/” target=”_blank”>

 

target= の前に半角スペースが入っています。
この半角スペースが入っていないとタグが正しく認識されない場合があるので注意が必要です。

 


 

最終ポイントは、知識が身につくまで

ブックマークして利用する
このような基本的なHTML記述を解説しているページをブックマークしておき、
サイト構築時に開いて参考にするのも便利です。

【Sponsered Link】

Leave a Reply

Name
Name*
Email
Email *
Website
Website

CAPTCHA