WordPressの運用

ビジュアルエディタを使わずHTMLタグでWordPressを更新する

2017.08.20

htmlの本

私はブログ記事の更新はHTMLで行っておりビジュアルエディタを使いません。慣れているからと言ってしまえばそれまでなのですが大きく分けると以下2つの理由があります。

  • 思った通りにレイアウトにできる
  • SEOとの相性が良好

思った通りにレイアウトできる

ビジュアルエディタはHTMLタグを意識せず直感的に記事を作成できるのですが、出力されたページを見て「なんか違う・・・・」と感じることが多々ありました。

自動で出力されるタグが思ったようにうまくいかない

それは自動で出力されるタグが思ったように出力されていないからでした。作成中の原稿を修正した時や改行時に空タグが生成されることが多く、原稿が仕上がってから全体を調整するのは手間のかかる作業です。

使い方が悪いと指摘されるかもしれませんが、それでは直感的に入力できるメリットがありません。

HTMLタグなら思ったようにレイアウトできる

その点HTMLタグを直接入力する方法なら不要な空タグが入って変な改行ができてしまうなんて心配もいりません。

それにHTMLタグであろうがビジュアルエディタであろうが文章構造を適正に保ち、効果的にコンテンツを運用するのであれば、必ず何かしらの入力ルールを覚える必要があります。

HTMLの直接入力でも覚えるタグは、幾つかに絞られますので、ビジュアルエディタを使いこなすための学習コストとなんら変わらないように感じます。

SEOとの相性が良好

前述のとおりHTMLを直接入力することにより、意図していないタグが出力されることを防ぐことが可能になります。

そして幾つかタグの使い方を覚えればSEO的に相性の良い構造化された文章構造で記事を構成することができますので、ブログ運営で最良の結果を得ようと考えるならHTMLタグを直接入力したほうが、より効果的なのです。

HTMLタグで投稿する方法

まずHTMLタグでWordPressの更新が行いやすいようにセッティングします。

ビジュアルリッチエディターを使用しない

ビジュアルエディタを使わずに記事を投稿するにはまず、ユーザーナビゲーションから記事を投稿するユーザーを選択し、ビジュアルリッチエディターを使用しないにチェックを入れプロフィールを更新します。

このチェックを入れていないと意図しないタグが出力されることがありますので、要注意です。

投稿で使うHTMLを覚える

記事の投稿で使うHTMLで、文章構造に関わる部分だけ覚えてしまいます。覚えなければならないhtmlタグはh1h6pbrです。

もっと端折るとh1タグは記事タイトルで使用されていることが濃厚なので割愛します。実用面で考えてh5h6も覚えなくてもいいでしょう。なので覚えるべきタグを整理すると

  • h2(大見出し)
  • h3(中見出し)
  • h4(小見出し)
  • p(段落)
  • br(改行)

まずこの5つのタグを覚えてしまいましょう。

タグの使い方

この5つのタグの使い方の用例です。

<h2>大見出しが入ります</h2>
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>

<h3>中見出しが入ります</h3>
<p>テキストが入ります。<br>
テキストが入ります。テキストが入ります。</p>

<h4>小見出しが入ります</h4>
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>

<br>以外のタグは開始タグと閉じタグが必要です。pを例にすると、開始タグ<p>閉じタグ</p>になります。例のようにタグの間に文章を入れ込みます。

見出しタグを使うには順番のルールがあって若い番号順に使わなければなりません。見た目でチョイスしてはダメです。

ダメな例
<h3>中見出しが入ります</h3>
<p>テキストが入ります。<br>
テキストが入ります。テキストが入ります。</p>

<h2>大見出しが入ります</h2>
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>
OKな例
<h2>大見出しが入ります</h2>
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>

<h3>中見出しが入ります</h3>
<p>テキストが入ります。<br>
テキストが入ります。テキストが入ります。</p>

<h4>小見出しが入ります</h4>
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>

<h3>中見出しが入ります</h3>
<p>テキストが入ります。<br>
テキストが入ります。テキストが入ります。</p>

<h4>小見出しが入ります</h4>
<p>テキストが入ります。テキストが入ります。テキストが入ります。</p>

もっと簡単にHTMLタグ入力するには?

タグを直接記入しなくても外部エディタやプラグインを使えばもっと簡単にHTMLタグを入力することができます。私も使っています。

  • MWeb(マークダウンエディタ有料)
  • Atom(テキストエディタ無料)
  • AddQuicktag(プラグイン)

私は上記を投稿の内容によって使い分けています。メインはマークダウンエディタで投稿ページにコピペです。外部エディタを使うと万が一データが飛んでしまってもバックアップ代わりになります。

ビジュアルエディタに変わるものという観点ではAddQuicktagがお手軽でオススメです。AddQuicktagはあらかじめタグを登録しておき投稿時にワンクリックで呼び出すことができます。

覚える手間は同じ

ビジュアルエディタであろうが外部エディタであろうが記事の投稿方法を覚える学習コストは同じぐらいです。であれば何かと取り回しの良いビジュアルエディタ以外の投稿方法をオススメします。

WEBSITE DESIGN REQUEST

ホームページ制作依頼について

W・D・Sでホームページ制作をご希望の方はお気軽にご相談ください。
制作内容、ご予算、納期をお知らせいただくとスムーズです。

ホームページ制作を相談する