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 も覚えて、より楽しい記事をたくさん書いてくださいね。



■ 次の記事に進む

HTML入門編(2)(HTML をもっと使ってみよう!)

WordPress を使って記事を書いていく中で、HTML を使ってさらに表現豊かに記事を書きたいと思っている方へ。第2回では、「HTMLタグ」を使った文字装飾の更なるサンプルと、HTML のいろいろな書き方を紹介します。

続きを見る




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









Presented By Irojiro Haraguro .Com

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