【ワードプレス制作マニュアル】記事の書き方01 投稿画面と文字装飾の仕方

WordPressマニュアル 投稿画面と文字の装飾の仕方

今回は、ブログ記事を
投稿する手順をご説明します。

一番よく使う所になると思います(*^_^*)

 

投稿画面の開き方

編集画面から、「投稿」をクリックします。

新規投稿メニュー

・新規投稿
・投稿一覧

 

と、出てくるので

新規投稿を選びます。

 

そうすると、Wordのような
文章を書く画面が出てきます。

ブログ投稿画面

ワードプレスのブログ記事は、
無料ブログや、Wordの書類を書くような感覚で
記事を書くことができるようになっています^^

 

上の欄にブログのタイトル、
下の大きな欄へ本文を書きます。

 

ここでは、基本的な操作をご案内していきますね。

 

文字を大きくしたり、色を付ける方法

文字を大きくしたり
太字
にしたり、色を付けたり

装飾してメリハリをつけると
とても読みやすくなりますね。

 

文字を装飾するには、
はじめの設定のままだと
ボタンが少ないので、

「プラグイン」を使って
便利なボタンを増やしておきましょう✨

 

 

【1】 初期のままのボタンが少ない状態

ツールバー初期状態

 

【2】プラグインでボタンが増やしてある状態

ツールバーカスタム状態

 

【1】の、ボタンが初期状態のままの方は、
こちらの手順を見て、まず設定しておいてくださいね。

TinyMCE Advanced 投稿画面を便利にカスタマイズ【プラグイン解説】
https://wp-firststep.com/tinymceadvanced/

 

【2】の状態になれば、OKです。
では操作を説明しますね。

 

文字の大きさを変える方法

文字の大きさを変えるには…

文字を入力して
大きさを変えたい文字を選択します。

文字を選択した画面

 

 

メニューにある「12pt」というところが
文字の大きさを変更するメニューです。

(テーマによって数字は違うことがあります)

文字サイズ変更メニュー

 

12ptというメニューを選択すると、
文字の大きさが
いろいろ選べる選択肢が出てきます。

 

仮に、18pt を選んでみましょう。

文字拡大

 

選択した部分だけが
大きくなりましたね。

文字の大きさは、このように変更します。

 

では続いて、文字の色を変える方法です。

 

文字の色を変える方法

同じように、色を変えたい部分を選択し
右の方にある A のマークを押します。

文字の色変更

Aマーク。

テキスト色変更アイコン

「テキスト色変更ボタン」です。

 

初期状態では、右の方にあります。

 

よく見ると、
右側に▼ボタン
左側にAマーク
2つに分かれています。

 

この、右側の▼ボタンを押してください。

 

すると、いろんな色が出てきます^^

テキスト色変更

 

ここから、好きな色を選ぶと、
先ほどの選択した文字に色を
つけることができますよ。

 

文字色変更後

 

それと同時に、Aマークにも
赤色がついたのが、ご確認いただけるかと思います。

 

テキスト色変更アイコン   文字色アイコン

これは、

「さっき赤を使った」 ということを
記憶してくれている状態です。

 

テキスト色変更2

 

こんなふうに
赤を覚えている状態になると、
今度は、右側の▼ではなく
左側のAマークを押すと

また色を選ばなくても
すぐに赤色に変更することができます。

※でも、また開きなおしたら
元に戻ってしまいます。
あくまで一時的なものです。

 

背景に色をつける方法

では今度は、文字そのものではなく
蛍光ペンを引いたみたいに
文字の背景に色を付ける方法です。

 

こんな状態の事です。

 ↓ ↓

文字の背景に色をつける

 

読みやすく、強調させるには
とても便利な機能です。

 

こちらも同じように、背景に入色を
つけたい部分を選択します。

テキスト背景色変更

次に使うのは

背景色ボタン

「背景色ボタン」です。

このボタンは、自分で追加するものなので
どこにあるか?場所は人によって違うと思います^^

ない方は、こちらの記事を参考に
追加しておいてください。

TinyMCE Advanced 投稿画面を便利にカスタマイズ【プラグイン解説】
https://wp-firststep.com/tinymceadvanced/

 

文字に色を付けるときと同じく、
右側の▼ボタンを押すと
カラーパレットが出てきます。

背景色選択

ここから、背景に選択したい色を選んでください。

すると、選択した部分の色が変わります。

 

文字の色を変えるボタンと
使い方は同じですね^^

 

中間色を選ぶ方法

とはいっても、選べる色、これだけ?

色の選択肢

けっこうはっきりしている色ばかりですよね。
もうちょっと違う色にしたいときは…

カスタムを開いてください。

カスタムカラー

 

すると、色のグラデーションが出てきます。

色のグラデーション

初期状態が赤なので
白と黒をどれくらい混ぜるかで
色を調節することができます。

好きなところをクリックすると
色を選ぶことができます。

色選択

 

右側の虹色のグラデーションを動かすと
色を変えることができますよ。

色相選択

 

このような操作で色をつくるんですが

これで思い通りの色を作るのは
職人技みたいでちょっと大変だと思います。

そんな方にお勧めなのがコチラ

Web色見本
https://www.colordic.org/

Web色見本

いろんな色の見本があるので
この中から選ぶと簡単ですよ。

 

たとえば…このlightblueを使う場合、
よく見ると下に番号が書いてあります。

ライトブルー

#add8e6

これが色番号です。
これをコピーして、

カスタムカラーのメニューに貼ります。

 

カスタムカラー色指定

(#はいらないので、番号だけでOKです)

背景中間色指定例

 

すると、背景が指定した中間色になります^^

もし、いつも同じ中間色を使いたい場合、
その色を登録しておくと便利ですよ。

ご興味のある方は、こちらのプラグインを
使ってみて下さいね。

文字の色設定 中級編 AddQuickTag(アドクイックタグ)【プラグイン解説】
https://wp-firststep.com/addquicktag/

 

 

基本の、投稿画面を開いて
文字を入力する方法についてご説明しました^^

 

次回は、画像の入れ方、リンクの貼り方を
ご説明しますね!

村重 敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。

Pocket