|

html学ぼう

今回は、初心者がワードプレス上で、タグを使用して、ブログ執筆できるようにするために、HTMLを紹介していきます。ワードプレスのブログを書くには、まずHTMLを知らなければならなりません!これを読めばワードプレスで自由にブログを書くことができるでしょう!

HTMLとは

htmlはHyperText Markup Languageという意味で、
Hyper Text : 文書と文書をリンクで結びつけている
Markup : タグの形になっている
Language : 言語です。
ブラウザでcssを非表示にして見るのも理解しやすいかもしれません。

TAGの種類

TAGの種類は100個以上ありますが、それを全部使うわけではありません。ですので、全部覚える必要はないので、心配しないでください。以下は、よく使われているTAGをまとめてみました。ここから始めれば問題ありません。

ざっくりみると35個程度ですが、この中でも使わない場合もあるのでどこに使うTAGかみてみましょう。
簡単に例としてコードを書きます。

!DOCTYPE html,html,head,meta,title,link,bodyは、ほぼ決まっているルールなのでこの形のままコピーしてもいいでしょう。もちろんmeta,linkは他にも種類がありますが、それは後ほど紹介します!

head: htmlファイルの情報を宣言
meta : charset, description,keywordなど
title : サイト名
link : cssなどファイルリンク

div : 何かを囲む
header : コンテンツのヘッダー
h : 見出し
a : リンク
article : 記事など内容が異なる
ul li : リスト
figure img : 画像
p : 文章
footer : コンテンツのフッター

上記の説明だけ見て、理解するのは不可能に近いので、こういうものがあるんだと思うだけで十分です。

HTML ブロック、インライン要素

HTMLはブロック要素とインライン要素があります。
ブロック要素は<div> , <h> , <p>などがあります。
このTAGはその行を全部ブロックの形になります。
インライン要素は <a> <img> <span>などがあります。
このTAGは文字、文章のみブロックの形になります。

例えば

<div>ブロック要素divです。</div>
<h1>ブロック要素h1です。</h1>
<a>インライン要素aです。</a>
<span>インライン要素spanです。</span>

block

HTML TAG 形

<タグ名 属性=”属性値”>内容など</タグ名>
例 A :

ここにはテキストです。

例 B :
<figure>
<img src=“URL” />
</figure>

次はTAGの形です。
今回はblogの書き込むためなのでhtmlのみ、説明します。
例A,BのようにTAGの形はタグ名で初めてタグ名で閉じます。

ワードプレスに書き込む

wowrdpress content

見出しはhタグ、文章はpタグ、画像はimgタグ、改行はbrタグを利用して書き込みます。
簡単にHTMLを利用してかけるようにしましょう。

見出しは
<h1>〜<h5>
文章は

テキスト強調(文字が太くなる)
<strong>

これはの文章です。

画像は
<img src=“URL” />
改行
</br>

全体的な例

MC

MC株式会社が運営しているウェブサービスです。自分のウェブをもっとたくさんのお客さんにみてほしい!そこそこのクリックでそこそこ利益もでているが、今後もこのままの運用で利益を出し続けられるのか不安。。といったお客さまに最適なソリューションを提供致します。

ワードプレスのブログは上のタグのみでも問題ないとお思いますので慣れてからどんどん他のタグに進んでもいいと思います。今回紹介したタグを使用するだけでも、簡単にワードプレス上でブログが書けてしまいます。最初は慣れずに少し難しいと感じるかもしれませんが、まずは使ってみてください。これぞ「習うより慣れろ!」ですね!

シェアする