今日はWEBページの主に文章を構成する言語「HTML」において、Wordpressで記事を作成し、サイトを保守・管理していく上で最低知っておくと便利な基礎を一から丁寧に記事と動画(記事下)で解説していきます。
最初にしっかりと学んでおけば、後々Wordpressに起こり得る様々な状況に的確に対応でき、より本格的な記事やサイト創りが可能となりますので、しっかりと学習していきましょう。

Sponsored Link

概要

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web (WWW)において、ウェブページ(1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い)を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出しや段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。引用元:Wikipedia

HTMLは、<タグ>と呼ばれる<山カッコ>でマークアップして挟んだ「要素」と呼ばれる1単位を積み重ねて構成していきます。

HTMLによって書かれたWEBページの情報を、指定したデザインやレイアウトに装飾してから配置するのが前回勉強したCSSです。
今日は、WordpressでWEBサイトを作成するにあたり、知っておきたい最低限のHTMLの知識をこれから説明していきます。

HTMLの基本単位

WEBページのHTML基本形

HTMLの基本構造

開始タグと終了タグ

br, img, hr, meta, input, embed, area, base, col, keygen, link, param, source

段落を作り読みやすい記事にしよう

本文は段落のpタグでまとまりを作ります。

(Pタグで自動で改行される……)

段落は文章の基本

本文は段落のPタグで
まとまりを作ると自動的に一行改行されます。

(Pタグで自動で改行される……)

pタグはWordpressでは自動挿入されませんが、段落を作りたい時に自分で記述して挿入しても良いでしょう。
Wordpressで改行を入れたい場合は、&nbsp; というHTML特殊文字を入れて改行しても良いでしょう。

HTML特殊文字

代表的な特殊文字
No. 文字表記 10進表記 16進表記 文字 コメント
001 &quot; &#34; &#x22; “”” クォーテーション
002 &amp; &#38; &#x26; & アンパサンド
003 &lt; &#60; &#x3C; < 小なり
004 &gt; &#62; &#x3E; > 大なり
005 &nbsp; &#160; &#xA0; 空白
006 &copy; &#169; &#xA9; © コピーライト
注1)文字表記は必ず小文字で記述。

表の参照元:pst.co.jp

 

文字を大きいサイズにする。

文字を太字にする。

文字を斜体にする。

文字に下線を付ける。

文字の色を付ける。

文字の背景に色を付ける。

文字のスタイルを変更する。

文字を大きく、太字に、背景色を付けて、文字色とスタイルを変更する。

 

WordpressでHTMLで画像を挿入する方法

imgでは終了タグは使わないません。そして、貼ることができるのはJPG/PNG/GIF形式の画像だけです。

詳しい情報はコチラから

 

開始タグ内に書く属性の1つに、class、もしくは、idというものがあります。

classやidは、class名やid名をHTMLのタグの中に記述します。次に、CSS(スタイルシート)のセレクタにclass名やid名を記述しておくことで、個別に呼び出して装飾するために使います。

idとclassはどのタグにも書くことができ、半角英数字(先頭に数字は×)で記述します。自分の分かり易い名前を決めて使うことが出来ます。

classとidの違いは、同じclass名は同じHTMLテキスト(1つのページ)で何度も利用できるのに対して、同じid名のものは同じHTMLテキストで1度きりしか使えません。

class属性はCSSのデザインをその都度呼び出す。

 

id属性はcssのデザインをその都度呼び出しますが、

同じIDは、同じページで1度きりしか使えないですが、その代りにCSSやJavaScriptで呼び出す際の処理速度が速いです。

 

divとspanもWordpressで非常に頻繁に見かけるタグです。
簡単に言えば、div(ブロック要素)やspan(インライン要素)はコードにまとまりを作るためのコードです。
まとまりを作れば、まとまりごとにデザインを変えることができるわけです。

divとspanの違いは

divではまとまりの前後にこのように改行が入りますが、

一方で、spanではまとまりの前後に改行が入りません
spanタグ(インライン要素)は前後に改行の入らない為に、文章の一部の文字色を変えたり、線を引いたりするときに便利です。
divタグ(ブロック要素)は、コードをまとめて一つのブロックを作るのに適しており、HTMLで最も使われているタグの一つです。


spanタグは文章の一部の装飾に向いているのに対して、
divタグはこのようにページ内で囲んだ範囲全てを一塊のブロックとして表示し、その範囲内だけにデザインを適用することに向いている。
もちろん、これはClass属性やid属性と組み合わせて使用し、
あらかじめ、class名などを付けてCSSを設定して個別にデザインをする。

spanタグは前後に改行の入らない為に、文章の一部の文字色を変えたり、線を引いたりするときに便利です。

 

html コメントアウトの仕方

この国の未来について考える

現在のように国と国との関係が…………………

(この行に実はHTMLでは、自分用メモが隠されているが表示されていない。でしょ?)

 

 

見出しデザインを実装していない場合のh2見出し

見出しには一般に『大見出し(H1)』『中見出し(H2)』『小見出し(H3)』などがあり、見出し(heading要素)は、
<h1>~<h6>の6つのタグでマークアップしていきます。

このサイトでは、各見出しに対してCSSを適用しているので、装飾された見出しデザインが<h2>タグや<h3>タグを挿入することによって呼び出されて表示されています。

(アニメーションに関しては、Wordpressプラグイン、又はCSSとJavaScriptの両方を連動させて実装しています。)




CSS超簡単入門
保護中: 洗練された見出しデザインをCSSでカスタムしながら実装しよう

📖合わせて読みたい

raptureダウンロード インストール
Gメールを複数取得する方法
独自ドメインメールアドレス取得方法
独自メールアドレスをGmailで送受信するための設定
サイト表示速度を速くする方法

Facebook いいねページ 作成方法
保護中: Facebookページプラグインを取得して記事下に設置してファンを獲得しよう!
Googleの検索エンジンがサイトを評価する普遍的9つの要素
ブログにとって普遍的で最強のSEOとは

保護中: 【WordPress】SEOに強い記事の書き方を実演
コピーライティングで私が心掛けるたった5つのこと
Power Point 使い方 基本操作 YouTube
著作権フリーの画像を検索エンジンから探す方法
著作権フリー画像&動画の見つけ方

Wordpress アニメーション
WoodsPress(ウッズプレス)ワードプレスWEBサイト作成完全動画マニュアル
ViVidWood(ヴィヴィドウッズ)デザイン&画像制作 完全動画マニュアル
WoodsTalk(ウッズトーク)

Thank you
for
reading!
from
IBORC.com