WordPress利用マニュアル【04】-エディタの使い方と基本的なHTML-

Publish2015/03/10(火)

WordPress利用マニュアル【04】-エディタの使い方と基本的なHTML-

オンラインマニュアル第4弾はWordPressのエディタの使い方と、使用する基本的なHTMLの説明+おまけです。
HTMLタグは知らなくてもサイトを運用は出来ますが、知っておくともっと便利に、効果的に使う事も出来るので出来れば学習しましょう。

エディタの「ビジュアル」と「テキスト」について

まず、エディタの使い方の前にエディタには2種類ある事を理解しておく必要があります。
WordPressのエディタは「ビジュアル」と「テキスト」があります。
個人の好き嫌いはありますが、Wordのような感覚で使えるのが「ビジュアル」で素人の人からすると取っ付きづらい感じのあるのが「テキスト」です。
「ビジュアル」はいわゆるWYSIWYGエディタとよばれるもので、直感的に色や画像を付けたりといった事が出来るようなものだと考えてください。
対して「テキスト」は、その名前通り文字のみで構成されるエディタです。
これからWordPressを使うという方の場合、多くの方が「ビジュアル」で対応されようとしますが、僕としては「テキスト」の方を推奨しています。
理由としては簡単なんですが、テキストだとHTMLの構造を理解しやすいためです。

サイトは文書なので、文書構造を考えるという事が大切です。
その観点から考えるとビジュアルよりもテキストが適しています。

ということで、今からの説明は全て「テキスト」での場合になります。

よく使うボタンとHTMLの意味

「テキスト」の場合でも画面をよく見ると編集画面上部にボタンのようなものがついています。
このボタンをクリックすることでHTMLのタグを簡単に引き出して使う事が出来ます。
そのため、HTMLを書く事が難しい/書くのがめんどくさいという時に効果が発揮されます。
実際の画面がこちら。

記事編集画面

以下でこのボタンを一つづつ説明します。
ボタンを使うときは、適用させたい範囲の文字列を選択した状態でボタンをクリックすることで、文字列がHTMLタグで囲まれる形になります。

よく使用するタグ

b

bボタンで出力されるのは「strong」タグになります。
strongタグは強調の意味を持つタグになりますので、文書内で強調させたい文字列を囲んでご使用ください。
表示上は太字になりますが、太字にしたいからstrongを使うという事ではなく、意味として強調させるものに対して使うようにしましょう。

link

linkボタンはその名前の通りリンクさせるための「a」タグが出力されるボタンになります。
URLを入力するダイアログが表示されますので、そちらにURLを貼付ければリンクを設定する事が出来ます。

ul、ol、li

ul,ol,liの各ボタンはリスト用のタグを出力するボタンです。
これらのボタンは他と違って組み合わせて使用します。
具体的には、順番は関係ない場合のリストではulの中にliで各要素を囲んで使用し、番号付きのリストの場合はolの中にliで各要素を囲んで使用します。
実際の形だとこうなります。

<ul>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
</ul>

<ol>
<li>ああああ</li>
<li>ああああ</li>
<li>ああああ</li>
</ol>

h2、h3、h4

この3つのボタンは初期状態では存在しません。
後ほど紹介する手順で追加させる事が出来るのですが、意味としてはかなり重要です。
というのも、これらのボタンをクリックして表示されるhタグは見出しタグといいh1からはじまりh2,h3,h4になるに従って重要度が下がっていく見出しのレベルを表示しているタグです。
h1が大見出し、h2が中見出し、h3が小見出しといった感じです。
今回の説明をテキストで紹介しているのも、このhタグを正しく使用しやすいようにという部分が強いです。
h1は記事やサイトのタイトルに自動的に挿入される事が多いので割愛しますが、記事を書く際にhの順番を理解しながら書くようにしましょう。

場合に応じて使用するタグ

i

iボタンでは「i」タグが出力されます。
iタグは斜体の文字を表示させたい時に使用します。
こちらに関しては特に意味を持たせず表示的な意味合いで使ってもらっても特に問題ありません。
本来の意味では

iタグは、声や心の中で思ったことなど、他と区別したいテキストを表す際に使用します。
分類学上の名称、専門用語、他言語の慣用句、思考の内容、船の名前、 その他一般的に印刷される際にイタリック体となるようなテキストです。 その箇所が重要であるという意味や強調する役割はありません。

という意味で使用されます。

b-qoute

b-qouteボタンは「blockquote」タグを出力するボタンです。
blockquoteタグは引用させるためのタグで、他サイトで使用している文字列を使用したりする場合に使用するタグです。
文章のコピペをしないようにするという意味もありますし、この文字が引用されているものであるという事を明示する意味でもきちんと使うようにしましょう。
また、引用の際は出来れば引用元の情報も記載しておく方が好ましいでしょう。

img

imgボタンは画像の挿入ボタンです。
オンラインマニュアル2段で説明したメディアを使用した方法ではなく、画像のURLがすでに分かっている場合に画像の読み出したグを表示させる形で使用します。

覚えておく必要も使い頻度も少ないボタン

code

codeボタンはHTMLのタグなどいわゆるコードを表示させる時に使用するタグになります。
技術的な内容を書くブログ等で使用する事はありますが、通常では使う事はほぼないかと思いますので特に覚えておく必要もないかと思います。

more

moreボタンは続きを読むの部分を調整するタグになりますが、こちらは使用するテンプレートによって使えたり使えなかったりする場合があります。
使用する場合はマニュアル等に記載があったりするはずですので、特に説明がない場合は気にしないでよいかと思います。

delとins

この2つに関しては特に使用するタイミングもないかと思います。
僕自身もこれまでこのボタンを使用するタイミングはありませんでした。
内容を説明する意味もないくらいのものだと思っているので、使わないとだけ覚えておいて問題ないです。

プラグイン「AddQuicktag」を使用してもっと便利に更新する

hタグの箇所でボタンが追加されたものである事は説明しましたが、具体的にどうやって追加するのかを説明します。
追加にはプラグインの「AddQuicktag」を使用します。
以下の手順でご対応ください。

まず、管理画面から「プラグイン」の「新規追加」を選択します。

プラグインの新規追加

次に、検索窓に「AddQuicktag」と入力して検索を行います。

プラグインを検索

検索を行うと該当プラグインが表示されますので、「今すぐインストール」をクリックしてインストールを行います。

AddQuicktag

ダイアログが表示されますので、OKをクリックしてインストールを行います。

インストールの許可

インストールの完了後はプラグインを有効化します。

有効化

次に、設定するファイルを用意しましたので、まずはこちらからファイルをダウンロードしてください。

https://github.com/deroter/deroter.github.com/blob/master/addquicktag.json.zip

jsonファイルをダウンロード

「View Raw」というテキストリンクをクリックするとzipファイルがダウンロードされますので、そのファイルを解凍します。
すると「addquicktag.json」というファイルが表示されます。

次に管理画面の「設定」から「AddQuicktag」を選択します。プラグインの有効化後には「設定」項目に「AddQuicktag」が増えています。

設定から「AddQuicktag」

設定画面の下部に移動すると、「インポート」という項目がありますので、ダウンロードして入手した「addquicktag.json」を選択してアップロードします。

インポート

インポート完了後には「設定を保存」します。

変更を保存

この手順で投稿画面にボタンが追加されています。
ここで勘のいい人なら気付いたかと思いますが、この「AddQuicktag」は自分で指定したタグを編集画面にボタンとして表示させるためのプラグインです。
今回はあらかじめ用意したh2h3h4のタグを追加した形になりますが、慣れてきたらよく使うタグをこちらに設定して対応いただく事も出来るようになります。
インポートした設定の内容を参考に追加してみると、さらに効率化を行う事は可能です。

まとめ

編集画面のボタンの機能を知っておく事とボタンを自分で追加できるという事を知っておくと、文章を書くのがすごく楽になってきます。
更新作業を効率化すると、その分記事の内容に向き合う時間を作る事が出来るようになりますので、出来る限り覚えてやってみましょう。

記事の著者:ふにすでぐち

ふにすでぐち

1978年生まれ。企業のWeb活用をテーマに、Webサイトの運用を中心とした戦略的な企画立案、Web運用サポート、Webサイトの構築などを行っています。
5年間のWeb制作会社勤務後、2年間のフリーランスで「フニス」として活動後に法人化し、2012年7月「ふにす株式会社」を設立。
Web活用の情報や考え方などを発信するブログ「ふにろぐ」を不定期更新中です。
2015年11月より大阪府高槻市に「ふにすWeb相談所」を開設。
地域の方々に気軽にWebのことを相談できる場所として、より多くのWeb運用の問題解決をするために活動しています。
サイトの運用や活用にお困りの方、Web運用やブログ更新などの講演のご依頼など、お気軽にご相談ください。
お問い合わせはこちら

LINEでWebに関する質問にお答えしています。

ふにすでは、LINEでWebに関するご質問にお答えしています。Webに関するあんなことやこんなこと、今さら聞けない疑問などなんでもご相談ください。LINEアプリでQRコードを読み取ると友達登録のリンクが表示されますので、試しに登録してみてください。

関連記事

  • サイトからのお問い合わせをTwitterDMで。その効果と使用メリット、手順など。サイトからのお問い合わせをTwitterDMで。その効果と使用メリット、手順など。 昨日こんなニュースを見たので、早速やってみてこれはいいなと思ったので紹介です。 そのニュースがこちら。 Twitter、Webサイトに貼れるDM(ダイレクトメッセージ)ボタンの提供を開始 サイトのお問い合わせの新しい選択肢Twitterの「Message […]
  • インラインSVGの管理にSketchを使用するときのポイントインラインSVGの管理にSketchを使用するときのポイント インラインSVGはSketchのファイルで管理した方がいいと思っている理由を書きました。Sketchへの要望も書いています。
  • Webサイトの運用にかかせないテスト環境構築のススメWebサイトの運用にかかせないテスト環境構築のススメ 今日は、サイト運用をより効果的に行うための方法の一つとして僕も実践している「テスト環境を作成する」ことについて書きます。 Webサイトのテスト環境を作る理由とメリット まず、テスト環境を作るというと、「そんなのめんどくさい」とか、「作る側の人だけでしといてくれたらいい」とか、そういう意見をいただくこともあるのですが、テスト環境は作成して使っていくことで多くのメリッ […]
  • カード型UIという手法の紹介。カード型UIの考察と実例。カード型UIという手法の紹介。カード型UIの考察と実例。 今日はカード型UIを紹介して、ついでにカード型UIがどういう考え方で使われているのかという部分と、実際の使用例から紹介してみようと思います。 カード型のUIとは? デザインをしている人であれば、カード型UIといえば「ああ、あんな感じのやつやね」というのがイメージできると思いますが、あまり普段意識しない人からすると「カード型のUI」と言われてもピンとこないと思います […]
  • Webサイトにアクセス流入を増やすための2つの考え方Webサイトにアクセス流入を増やすための2つの考え方 今日は「アクセスを増やす」というのはどう考えるといいのかということを代表的な2つの考え方から探ってみます。 前置き まず、サイトの運用を考える上で「サイトのアクセスを増やす」ということは当たり前に考えるわけですが、ではそのために何をすればいいのかと考えようとすると、とてもたくさん手段があって、今のタイミンングで何を行うべきかという部分がわかりづらいということがよく […]
  • クラウドにファイルを置いて作業するという概念が初心者にはわかりにくいと思うので図解で書いてみた。クラウドにファイルを置いて作業するという概念が初心者にはわかりにくいと思うので図解で書いてみた。 今日は「クラウド上のファイルを変更する」という概念について書きます。 先日Webの事を全く分からない人と話をしていて、「そもそも仕組みとしてどういう形になっているのかイメージできないから、何をしていいのかも分からない。」というような内容の事を聞きました。 それを聞いて、「なるほど。確かに今自分がしていることが何なのかわからなかったら、何かをしようという気にすらならないな」 […]

よく見られている記事

ふにろぐナビ

About

ふにろぐとは?

ふにろぐは「ふにす株式会社」の「でぐち」が書いているブログです。
このブログでは主にサイトの運営をしている企業のご担当者様向けに、「サイトの運営に役立つTips」や「今更人に聞けないような初歩的なこと」を中心に情報を配信しています。
その他には僕自身の考え方なども書いています。

このブログについて

ふにすのお仕事

このブログを書いている「でぐち」がしている「ふにす株式会社」は大阪と京都の間にある高槻という街で、Webの運用サポートを中心に活動しています。
Webサイトの制作とかもしてますが、ブログを続けるためのサポートとか、会社をどうやってPRすればいいんだろうとか、そういうふわっとした事を相談してください。
どういう内容を相談できるのかをまとめましたので、参考にしていただければと思います。

ふにすにはどんな仕事が頼めるの?

ソーシャルとか。

NewEntry

はてブで人気の記事

PickUP

Webサイトの運用に関する情報

ふにろぐで取り上げたWebサイトの運用に関する記事のまとめです。ツールや運用ノウハウなど、知っていると便利になる情報ですので、まずはこちらをご覧ください。

Category

Month