HTML / CSS 入門

HTML入門編(1)(WordPress で HTML を使ってみよう!)


コーヒーを飲みながらノートパソコンを見てほほ笑む女性

WordPress を使って記事を書いていく中で、よく聞く「HTML で記述する」ということについて漠然と理解している方もいると思います。

「HTML を使うことでできること」、そして、「そもそも HTML とは何か?」から紹介します。

ポイント

HTML を使いこなしてさらに表現豊かな記事を書けるようになる「知識と方法」を、連載記事で初心者にもわかりやすく丁寧に紹介させていただきます。

WordPress で HTML を使ってみる

基本的に WordPrsss の基本機能と、テーマがあれば、サイト(記事)を作ることには困りませんが、細かいことをやりたいときに「HTML で記述する」方法があります。

「HTMLとは何か?」はいったん置いておいて、とりあえず、実際に簡単に使ってみましょう。

■ HTML を使って文字を装飾してみよう

Step.1 「カスタムHTML」ブロックを使う

WordPress の記事エディタにて、「カスタム HTML」ブロックを選択します。

Step.2 HTML つきで文章を記載する

HTML つきの文字列を書きこみます。サンプルとして次の文字を入力してください。

<b> ~ </b> で文字をくくっているところがポイントです。

ここに、<b>太字にしたい文字</b> を書きます。

Step.3 完成です

<b> ~ </b> で括ったところを太文字(ボールド)で表示します。この、「<b> ~ </b>」が HTML で表記するというサンプルです。

「太文字で表示してね」と指示しています。

ポイント

ここに、太字にしたい文字 を書きます。

太文字(ボールド)であれば、WordPress の記事エディタで 太文字にするボタン がありますが、アンダーライン(下線)はありません。

アンダーライン(下線)を引く場合は、<u> ~ </u> で括ります。

ここに、<u>アンダーラインを引きたい文字</u> を書きます。

ポイント

ここに、アンダーラインを引きたい文字 を書きます。

■ HTML を使って文字をセンタリングしてみよう

文字をセンタリング(中央配置)してみます。

Step.1 「カスタムHTML」ブロックを使う

WordPress の記事エディタにて、「カスタム HTML」ブロックを選択します。

Step.2 HTML つきで文章を記載する

HTML つきの文字列を書きこみます。サンプルとして次の文字を入力してください。

<center> ~ </center> で文字をくくっているところがポイントです。

ここに、

<center>センタリングにしたい文字</center>

を書きます。

Step.3 完成です

<center> ~ </center> で括ったところをセンタリング(中央配置)で表示します。

ポイント

ここに、
センタリングにしたい文字
を書きます。

HTML とは?

■ HTML とは?

HTML とは、ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language)の略であり、インターネットのページ(記事やトップページなど)を書く時の、記述する方法(言語)のことです。

(※ この正式名称は無理して覚える必要はありません)

HTML では、「〇〇書式で書いてたら、〇〇の表示方法でブラウザ上で表示するよ」、というルールがあります。

ここに、<b>太字にしたい文字</b> を書きます。

正確には、「ここに、<b>太字にしたい文字</b> を書きます。」の全文が [HTML 形式で書いたもの] であり、<b> と </b> が 「太文字で表示してね」、というルールです。

■ 「HTML タグ」とは?

HTML で書いた文章中に埋め込まれた 表現方法を指定する文字列(例:<b> ~ </b>)を、「HTML タグ」と呼びます。

■ 「HTML タグ」の基本的な書き方

「HTML タグ」は基本的な書き方の 決まり があります。

  • 「HTML タグ」は < > (尖ったかっこ)で指定する
  • 「HTML タグ」は <xxx> (例:<b>)で始めて、スラッシュ付きの、</xxx>(例:</b>)で閉じる

まとめ

WordPress で記事を書いていく中で、WordPress の標準のボタンでは表現できない細かい装飾は直接 HTML を利用して表現することが可能です。

ポイント

HTML とは、インターネットのページ(記事やトップページなど)を書く時の、記述する方法(言語)のことであり、表示する文章と、表示方法を指定する 「HTML タグ」を組み合わせて記述します。

HTML は「カスタム HTML」ブロックを用いることで書くことができます。

HTML も覚えて、より楽しい記事をたくさん書いてくださいね。

WordPress のおすすめテーマ



  • SEO に強く【集客力強化】が望める
  • かっこいい(かわいい)ホームページを作りやすい
  • 初心者でも使えて、上級者になっても満足できる


本気でブログアフィリエイトを戦うなら、使うテーマは「AFFINGER」!

WordPress ブログの最上級おすすめテーマ「AFFINGER」をお試しください。



AFFINGER の紹介はこちら




AFFINGER(アフィンガー)テーマは「ここ」がすごい!【WordPress 初心者必見!】

AFFINGER テーマを使うと「オシャレなサイト」を作りやすくなります。オシャレなサイトは、ユーザーの滞在時間が増え、サイト評価があがり、サイトの露出が増えて、さらにユーザ(読者)を呼び込む好循環を実現します。WordPressのテーマ「AFFINGER」を徹底紹介します。

続きを見る


「WordPress で HTML / CSS を使う」一覧はこちらをクリック!










ブログランキング・にほんブログ村へ  




Presented By Irojiro Haraguro .Com