WordPressブログ管理画面の操作方法(テキストエディタ編)

20170512B

こんにちは、名畑です。

今回はブログ投稿で必要な基本的なツールの紹介をしていきます。

※画像はテキストエディタプラグインを使用しています。なおWordPressのバージョンによって表示が異なります。

※この記事は2014年7月16日に公開したものに2017年5月12日にアンカーリンクの機能を追記したものになります。
※2019年1月17日にリンクとテーブルについて追記いたしました。

WordPressブログ管理画面の操作方法(テキストエディタ編)

ツールバーはどこ?

書式を簡単に変える為にはツールバーは必要です。

wpt_00
まず記事の作成画面を開きます。

wpt_01
最初ツールバーが隠れているので右のアイコンをクリックすると…

wpt_02
このように隠れていたツールバーが出てきます!
ツールバーが出てきたところで色々なツールを使ってみましょう。(`・ω・´)

テキスト装飾

よく使うテキストの装飾について説明していきます。

太文字

テキストの装飾で強調したい時に使うツールです。
まず文字を入力します。

wpt_03
太文字にしたい箇所をドラッグで選択します。

wpt_04
選択したらツールバーのBのマークをクリックします。

wpt_05
すると選択した文字が太文字になりました!
このように文字を入力し、選択してからツールを使用していきます。
それでは他のツールも使ってみましょう!

テキストサイズ

次は文字の大きさを変えていきます。

wpt_06
先ほどと同じように文字を入力し、文字サイズを変えたい場所を選択します。

wpt_07
今回は36ptを選択してみます。

wpt_08
かなり大きくなりました。
他のサイズの大きさはこのようになります。

wpt_09
普段のサイズは10ptになります。
基本は文字を読みやすく大きさを変更する必要はありませんが、用途に分けて文字サイズを変えると読みやすい記事になります。

テキストカラー

文字の色を変えていきます。

wpt_10
文字の色を変えたい場所を選択して右側のアイコンの逆三角マークをクリックします。

wpt_11
変えたい色をクリックすると

こんにちは

簡単に色を変えられます。
また文字の背景色も変えてみましょう。

wpt_12
ここでも逆三角マークをクリックします。

wpt_13
背景色にしたい色をクリックします。

こんにちは

選択した文字の背景の色が変わりました。
色の組み合わせを色々試すのも面白いです(´ω`*)

テキストの書式を変えたけどやり直したい!

文字サイズやカラーを変えて試しているとこんなことになっていませんか?

にちは

普通こんなことにはなりませんが…
サイズも色もバラバラで元に戻したい場合はまず文字を選択して

wpt_14

上の消しゴムっぽいマークを押すだけで元に戻ります。

段落・見出し

フォントサイズの横にある段落は最初何だろう…と思いませんか?

wpt_15
これは既に文字の装飾が出来上がっているものなのでブログの見出しとして使います。
見出しを効果的に使うことによって検索でひっかかりやすくなります。
ここでも文字を選択してから見出しの種類を選んでいきます。

wpt_16

記事にそれぞれ入力してみると文字の大きさが変わるだけで大したことありません。
この見出し文字をプレビューで見てみると…

wpt_17

このように見出しを書くのにピッタリな装飾となっております♪
記事を読みやすくするのに是非使ってみてください!

リンク

ブログ内にリンクを貼る場合のやり方です。

リンクを貼る

wpt_18

リンクを繋げたい箇所を選択し鎖のようなアイコンをクリックします。

wpt_19

するとこのような画面が出てきます。

①URL:リンクしたいサイトのURLを貼付けます。
②タイトル:サイト名を記入(省略可)
③リンクを新ウィンドウ又はタブで開きたい場合チェックを入れる
④同ブログ内で他記事にリンクを繋げたい場合クリックし、記事を選択する。

リンクをした後はプレビューでしっかりリンク先へとぶか確認しましょう!

リンクを貼る際注意すること

アメブロやSNSでリンクさせたいURLを貼ると自動的にリンクが繋がりますよね(URLの前後に半角以上のスペースをとらなければなりませんが)
WordPressではそれができません。リンクを繋げたい場合はURLに上記で説明したようにリンクを設定するようにしましょう。

また、リンク先がWordPressの場合、URLを貼付けするだけで自動でサムネイル付きのリンクが生成されます。
自動で生成されてしまう場合は、テキストタブで貼付け、リンクを設定するようにしましょう。

試しにURLを貼ってみます。

▼テキストにリンクを貼付けした場合

https://www.infact1.co.jp/staff_blog/webmarketing/38072/

▼リンクを貼付けしなかった場合

Word(ワード)で書いた記事をWordPress(ワードプレス)に貼り付ける方法

 

リンクの解除

リンクを繋げたけれど解除したいという場合

wpt_20
リンクの隣のアイコンをクリックするとリンクが解除されます。

アンカーリンク

アンカーリンクとはページ内ジャンプのことで、ページが長い場合クリックすると指定した場所に飛ぶことができます。
長いブログ記事やランディングページ等によく使用されるリンクです。
ツールが表示されていれば簡単に設定ができます。

リンクさせたいテキストを選択します。
20170512b01

ツールバーからリンクのアイコンをクリックします。
20170512b02

歯車マークをクリックします。
20170512b08

URLの部分に「#link01」と入力して「更新」をクリックします。
20170512b09

この「#link01」というのは下の位置にページを移動させる際に指定するID番号です。
さらに増やしたい場合は、分かりやすいように「#link02」「#link03」と「#+英数字」を指定しましょう。

次に移動させたい位置をクリックします。
20170512b04

ツールバーのリボンがたれているようなアイコンをクリックします。
20170512b05

テキスト入力欄に先程設定したIDの「#」をぬいた英数字を入力します。
今回は「#link01」と指定したので「link01」と入力します。
20170512b06

移動したい位置の上にアンカーマークが表示されたら設定完了です。
20170512b07

引用

ブログを書いていて他から文章を引用した場合、どこが引用した文章かはっきりさせる必要があります。

wpt_21
引用のツールアイコンは上記となります。

wpt_22
引用したい部分を選択し、引用アイコンをクリックします。
プレビューしてみると

wpt_23
このようにどこが引用された文章か分かりやすくなっています。
文章を引用する場合はこのツールを使いましょう!

テーブル

記事内で簡単な表を作成したい場合にテーブルで表を作成することができます。

縦3×横2の表を作成したい場合、ツールバーのテーブルから作成したいマスをクリックすると表が生成されます。

生成されたら、あとはテキストを入力するだけで表が作成できます。

予約投稿の仕方

書いてすぐ公開する場合は、右上の「公開」ボタンを押します。

公開したい日時を指定して自動投稿できるように設定できます。それを「予約投稿」と言います。やり方は、↓です。

投稿の編集_‹_スタッフブログ|インファクト WEBマーケティングで企業のプロモーション・集客・販促のお手伝い_—_WordPress

 

また、「プレビュー」ボタンを押すと、公開されたときにどう見えるかが確認できます。読みやすい表記になっているか、確認してから公開するようにしましょう!

おわりに

長くなってしまいましたが以上となります。
まだまだ便利な機能がありますが紹介したものは最低限使えるようにしましょう。

インファクトのお客様には目次が簡単に作成できる機能もありますので是非活用してくださいね!

ブログの本文に目次を付けて見やすくしよう
https://www.infact1.co.jp/staff_blog/webmarketing/blog-use/31201/

  • シェア
  • twitter
The following two tabs change content below.
名畑かなえ
株式会社インファクトのディレクターです。
フロントエンジニアだった知識を活かしてお客様のためになるような情報発信、制作を行なっております。また日本だけでなくベトナムスタッフとも連携して業務をとりまとめております。
好きなことは、自分で1から考えるものづくり。本の装丁が気になったり布ものやお菓子を自分でデザインして注文するのが好きです。
やっぱりはちみつなしでは生きてゆけない。
  • twitter
  • このエントリーをはてなブックマークに追加
  • Pocket
PAGE TOP
LINE it!