webgonia

WordPressでブログのHTMLを編集する方法とプラグイン

WordPressでブログのHTMLを編集する方法とプラグイン

HTMLってなんだろ?

HTMLは”Hyper Text Markup Language(ハイパーテキスト マークアップ ランゲージ)”の略でインターネット上で文書を表示させるための言語です。WordPressではビジュアルエディッタでタグを自動生成してくれるので基礎知識を紹介します。

HTMLのタグの書き方

タグは書くときは<タグ>表示させたい文章</タグ>の形が基本になります。

タグを記載する時はテキストエディッタを使用するので投稿の編集画面から「テキスト」を選択しましょう。
編集1赤枠で囲んでいるツールバーは文書を囲んで選択するとタグを生成してくれるので覚えておきましょう。次によく使用するタグを確認していきましょう。

よく使用するHTMLタグ

実際は文書を囲ってツールバーから選択するだけでHTMLコードを記述できるのですが、理解を深めるためによく使用するHTMLタグを紹介しておきます。

文字の強調 <strong>,<b>
強調したい小見出しを<strong>~</strong>で囲うと強調して表示|文字を太くしたい場合は<b>~</b>で囲うと文字を太くして表示。

 

見出し <h>
強調したい見出しを<h数字>~</h数字>で囲うとタグ数字によって見出しを表示。

※見出しの数字は1~6の間で設定されタイトルには<h1>が使用されています。見出しの暗黙のルールが2つあり、重要度の順番に見出しをつけることと多用しすぎないことを気をつけて使用しましょう。

 

改行<br/>
区切って間をあけたい行の後ろに<br/>を挿入することで改行を表示。

 

横ライン <hr/>
文章との間を区切りたい場所に<hr/>を挿入することで横ラインを表示。

 

リンク <a href=””>
リンクしたい文章に<a href=”リンク先のURL”>文章</a>を記述すると文章がリンクカラーに変化してリンクを表示。

 

画像の挿入 <img src=””>
画像を挿入したい場所に<img src=”画像のリンク先”>を記述すると画像を表示。

 

引用 <b-quote>
他サイトの文書を引用したい時に<b-quote>~<b-quote>を囲うとダブルクォーテーションで挟んで背景色が変化して表示。

 

リスト<ul>
リストを生成したい文章を<ul><li>~</li></ul>で囲ってリストを表示。

 

数字入りリスト<ol>
数字入りリストを生成したい文章を<ol><li>~</li></ol>で囲ってリストを表示。

これだけは知っておきたいワードプレスでHTMLの使用方法は以上になります。

はじめは苦手意識があるかもしれませんがHTMLを学習しておいて損なことはないので、基礎知識として覚えておきましょう。

最後までお読みいただきありがとうございます。

Return Top