月別アーカイブ: 2018年10月

204_Gutenbergで文字の色を変更するには

Gutenbergでは今までよりもさらに簡単に、テキスト(文字)の色を設定・変更することができます。文字色の変更は何かをアピール(強調)するときに使う機会が多いので覚えておくと良いでしょう。それでは早速確認をしていきます。


まずは【投稿】の【新規追加】をクリックした後、タイトルと本文を入力します。

文章を入力すると右側に【段落】の他に【色設定】があり、色を選択することができます。

【背景色】は文字の背景色、【テキスト色】はそのままテキスト色となります。またその組み合わせの結果、視認性が悪いと注意文が出てきます。

組み合わせを変えることで注意文が出てこなくなりました。

すでに用意されている色以外を選択したい場合はカラーパレットをクリックすることで好きな色を選ぶことができます。

ここでも組み合わせが悪いと注意文が出てくるので参考にしつつ選択しましょう。


いかがでしたか?
今回はテキストの色の変更の方法について説明を行いました。
簡単に変えることが出来ますが、特定の一文字だけ色を変えたい際などはこの方法は使えず、旧エディターを使用するかHTMLの知識が必要になるため一長一短ですね。

203_Gutenbergで文字サイズを修正するには

Gutenbergでは表示するテキスト(文字)のサイズ(大きさ)を簡単に設定・変更することができます。文字サイズの変更は必ず押さえておきたい項目です。それでは早速確認をしていきましょう。

まずは【投稿】の【新規追加】をクリックした後、タイトルと本文を入力します。

文章を入力すると右側に【段落】が表示され、その下に【テキスト設定】があり、サイズを選択することができます。

今回は【小】を選択してみます。
選択をすると『14』という数字が出てきて、この数字がテキストのサイズになります。

『中』であれば16 『大』であれば36 『特大』であれば48がサイズになります。

【カスタムサイズ】のバーや数値を直接編集することでもテキストサイズを変更することができますので見やすいように調整をしていきましょう。


いかがでしたか?
テキストサイズは記事を作る時の基本にもなります。Word感覚で簡単に変更をすることが出来るので、すぐに覚えてしまいましょう。

202_Gutenbergでギャラリーを挿入するには

Gutenbergでも旧エディター同様に画像を並べるギャラリー機能を使うことができます。画像を挿入するように簡単にギャラリーを挿入することができますので確認をしていきましょう。


まずは【投稿】の【新規追加】をクリックした後、タイトルと本文を入力します。

文章を入力する時に右にアイコンが3つ出てくるので一番右のアイコンをクリックします。

アイコンをクリックすると今までのエディタでいう『メディアを追加』と同じ画面が出てくるので今回は【メディアライブラリ】を選択します。

画像を複数選択することが出来るので、画像を好きな枚数選択していき、選択が終わったら【ギャラリーを作成】をクリックします。

ギャラリーが作成されるので、画像の順番等をドラッグ&ドロップで入れ替えたり、不要な画像は『×』ボタンをクリックすることで削除することができます。
調整が終わったら『ギャラリーを挿入』をクリックします。

ギャラリーを挿入することができましたので【プレビュー】をクリックしてみましょう。

管理画面と同じようなレイアウトになっているのがわかります。


いかがでしたか?
今回も基本的な操作方法を紹介いたしました。
ギャラリー機能はあまり使うことはないかもしれませんが、簡単に作ることが出来るので念のため覚えておくと良いでしょう。

201_Gutenbergで見出しを挿入するには

今回は『見出し』と言われるタグの入れ方を紹介していきます。見出しは
H1~H6 を選択することが出来ますが使っているテーマによっては一部のタグ(H1やH6など)はデザイン付けがされていないことがありますので注意をしましょう。

まずは【投稿】の【新規追加】をクリックした後、タイトルと本文を入力します。

文章を入力する時に右にアイコンが3つ出てくるので真ん中の『T』のアイコンをクリックします。

アイコンをクリックすると『H2』や『H3』の他、太字になる『B』や少し斜めになる『I』など選択することができます。
また『H1』~『H6』は右のブロックからも選択をすることができます。今回は【H4】を選択します。

また『左寄せ』や『中央寄せ』等は右のブロックから選択をすることができます。今回は【中央寄せ】を選択します。
実際に【プレビュー】をクリックしてみます。

管理画面と同じようなレイアウトになっているのがわかります。

いかがでしたか?
次回は画像をいくつも並べた『ギャラリー』機能について説明をしていきます。