文字色や太さを変えてリンクを貼ってみよう!【Gutenberg超初心者編】

2019年4月7日ブログ管理Gutenberg, WordPress基本設定, ブログ管理, 初心者

Gutenberg補足情報ヘッダー

トリ師匠
トリ師匠
ほい、そんならGutenbergの残りの基本的な項目について追記してみよかの。

ぐず夫
ぐず夫
まだ残ってたんか。
難儀な項目やのう。
トリ師匠
トリ師匠
…自分で書いたもんくらい覚えてへんのか。
さっさと終わらせるで。

ということで、基本的な投稿方法【Gutenberg編】の残り項目(文字色・太さ・リンク・引用・プレビュー)について、1つずつ確認してみましょう!

Gutenbergで初投稿まで残りわずか!

初投稿までもう少し!

トリ師匠
トリ師匠
Gutenbergで「見出し」と「画像の挿入」まで説明したで、残りは基本的な文字の装飾とリンクの貼り方を説明しておしまいやな。

ぐず夫
ぐず夫
Gutenbergやとそんなに違うんか?
トリ師匠
トリ師匠
これまでとちぃと見た目がちゃうからな。一つずつ説明しといた方がええやろ。
ぐず夫
ぐず夫
親切さんやな。
ま、今日は気分がええで付き合ったるわ。
トリ師匠
トリ師匠
(majiか。天変地異の前触れや。みんなも大規模災害に気ぃつけるんやで…)

Gutenbergで文字色を変えてみよう!

トリ師匠
トリ師匠
まずはGutenbergの投稿画面じゃ。見出しの準備が終わったところを基本にするで。なら見出しの下の「文章を入力、または/でブロックを選択」に、マウスを持ってくで。

マウスで選択

トリ師匠
トリ師匠
左側に「+」マークが出てくるで、これをクリックしてな。そしたら使いたいブロックの種類が表示されるで、「段落」を選択するんじゃな。「段落」は一般的なテキスト入力ができるブロックやで覚えとくんやで!

段落

トリ師匠
トリ師匠
そしたらいよいよ文字を入力や。
カーソルが点滅したら、そこにテキストを入力や。最初はブログのベースになってる色の文字が入力されるで!

色を付けたいテキスト入力

トリ師匠
トリ師匠
ここで文字色を変えるで。
文字色を変えたい部分を全部選択したら、欄外の「色設定」てタブを開くんや。そしたら「文字色」て項目があるで、そん中から好きな文字色を選んでやるで。

色を選択

ぐず夫
ぐず夫
おおっ! 文字の色が変わったで!
文字色、赤
文字の色が赤に変更された
トリ師匠
トリ師匠
簡単やろ?
ここで予め文字色を選択しといてやると、続けてその文字色でテキストを入力することもできるで覚えときや。
ぐず夫
ぐず夫
なるへそ。
覚えとくで。
トリ師匠
トリ師匠
(素直すぎて気味悪いで…)
ちなみに好きな色が一覧にない時は、右下のまだらな玉を選択して、自分好みの色を作ってやるとええで。
好みの色を作成
まだら色のカラーを選択すると好きな色を作れます
トリ師匠
トリ師匠
Gutenbergやと、同じようにテキストの背景の色も変えられるで、色々試してみてな。なお、Gutenbergやと個別の文字色は変えられへん。一部だけ文字色を変えたい場合は、クラシックブロックを使うか、旧エディタ(Classicエディタ)を使ったってな。文字色の変更は以上や!

☆クラシックエディタでの文字色変更はコチラ!

Gutenbergで文字の太さ、大きさを変えてみよう!

トリ師匠
トリ師匠
続いては文字の太さや。
引き続きGutenbergの投稿画面じゃ。見出しの準備が終わったところからいくで。下の「文章を入力、または/でブロックを選択」にマウスを持ってってみよか。

マウスで選択

トリ師匠
トリ師匠
左側の「+」マークをクリックして、そし使うブロックの種類を選択するで。ここも一般的なテキスト入力ができる「段落」を使うから覚えとき!

段落

トリ師匠
トリ師匠
そしたら太くしたい文字を入力や。カーソルが点滅したらテキストを入力するで。

テキストベース

トリ師匠
トリ師匠
いよいよ文字を太くするで。
まずは太くしたい部分を全部選択してみるで。そしたら今度は、テキスト入力欄の上に出てる「B」のマークをクリックするんや。

文字を太くする

ぐず夫
ぐず夫
おおっ!
なんとなく文字が太くなったで!
トリ師匠
トリ師匠
ひとまずこれで文字を太くすることができるな。
ぐず夫
ぐず夫
でもあれやな。もっと大きくて太い文字にはでけへんのか?
トリ師匠
トリ師匠
そんな時は文字の大きさを変えるのが便利やな。同じように大きくしたい行にカーソル合わせて、欄外の「テキスト設定」てタブを開くで。すると「文字サイズ」て項目があるから、その一覧から文字のサイズを選んでみよか。

テキストサイズ

ぐず夫
ぐず夫
うほぉ! 文字が大きくなったで!
テキストサイズ決定
例:大を選択した場合
トリ師匠
トリ師匠
こんな感じで文字を大きくしたり太くしたりできるで。自分の好みのサイズがなかったら、「文字サイズ」の隣の空欄に、直接数値を入力すればサイズを変えられるで。ちなみに「リセット」を押せば元のサイズに戻るで安心して使ってな。ただし一点、個別の文字の大きさは変えられへんから気ぃつけてな。こちらも文字色と同じようにクラシックブロックか旧エディタ(Classicエディタ)を使用したってちょ。
ぐず夫
ぐず夫
一部だけ大きくするんは無理なんか。ちょっとだけ不便やな。
トリ師匠
トリ師匠
せやな。ま、そのうちアップデートされて機能が変更されるんちゃうかな。
ひとまず文字サイズと太さは以上や!

☆クラシックエディタでの文字太さ変更はコチラ!

Gutenbergで文字にリンクを貼るぞ!

トリ師匠
トリ師匠
次はリンクの挿入やな。
引き続きGutenbergの投稿画面から。見出しの準備が終わったら、その下の「文章を入力、または/でブロックを選択」「+」マークをクリックして、「段落」を選ぶんやったな。

段落

トリ師匠
トリ師匠
そしたらリンクを貼るための文字を入力や。カーソルが点滅したら好きな文字を入力したってな。

テキストベース

トリ師匠
トリ師匠
いよいよリンク貼るで。
貼りたい文言の部分を選択して、テキスト入力欄の上にある「リンク」のボタンをクリックや。
リンクの貼り方
リンクを貼りたい部分を選択し、「リンク」ボタンをクリック!
トリ師匠
トリ師匠
するとURLの入力欄が出てくるで、繋ぎたいページのURL(http~)を貼ったってちょ。「︙」を押すと、リンクを押した時のページの開き方(新規タブか否か)を変えられるで、好みでチェックしたってな。
URL入力
「︙」ボタンを押すと下のタブ部分が表示される
ぐず夫
ぐず夫
簡単にできるんやな。
トリ師匠
トリ師匠
せやで。そんならリンクの貼り方は以上じゃ!

Gutenbergで引用文を設定してみよう!

トリ師匠
トリ師匠
クラシックエディタでも説明したけど、引用は基本的なルールがあるのは覚えてるな。
ぐず夫
ぐず夫
(ルール? 知らんけどうなずいとこ)
せやったせやった。
トリ師匠
トリ師匠
それを踏まえて、ちゃーんと使うんやで。知らん方は上のリンク先でちゃんと読むんやで。なら早速使い方や。

まずはGutenbergの投稿画面からマウス動かして「文章を入力、または/でブロックを選択」「+」マークをクリックして、一般ブロックの中から「引用」を選ぶんじゃ。

引用ブロック選択
一般ブロックから「引用」を選択
トリ師匠
トリ師匠
そしたらカーソルが点滅するで、引用する文章を「改変せずそのまま記入」したってな。
引用文入力
改変せず確実に入力すること!
トリ師匠
トリ師匠
そしたら次は引用元じゃ。
下に「引用元を入力」という欄が用意されてるで、そこに元となった文言の書かれたページの名前やリンクを貼ったってな。
引用元入力
引用元を入力
リンク先も設定
リンクも追加するとなお親切です
ぐず夫
ぐず夫
クラシックエディタより簡単やな。
トリ師匠
トリ師匠
大して変わりはないけど、引用元の入力欄ができた点が変更点かの。以上で引用の設定は完了じゃ!

Gutenbergでプレビューを確認するぞ!

トリ師匠
トリ師匠
最後は実際の投稿画面を確認するで。
ぐず夫
ぐず夫
なんでなん。
別にいきなり公開でもええんやないの?
トリ師匠
トリ師匠
「投稿画面」と「実際に公開される画面」は多少違いがあるからの。実際の見た目を確認するのも重要じゃ。
ぐず夫
ぐず夫
ふーん
で、どうやんの?
トリ師匠
トリ師匠
簡単じゃ。
投稿画面の右上にある「プレビュー」というボタンを押すと、新規タブで公開されるページの例が表示されるで。もろもろ全部OKやったら、「公開」ボタンを押すと、その瞬間から全世界に向けて公開されるで。

プレビュー

投稿内容の確認
実際のイメージウインドウが開き表示されます

トリ師匠
トリ師匠
誰も見てない思って酷い内容を書くとえらいことになるからな。そこだけは注意やで!

ひとまず投稿の基礎補足は終了です

ぐず夫
ぐず夫
投稿の基礎補足はひとまずこれで終いか
トリ師匠
トリ師匠
ひとまずな。
でも他に幾らでも仕事はあるで。
ぐず夫
ぐず夫
は?
これで最後の仕事やないんか?
トリ師匠
トリ師匠
……んなわけあるかい
ぐず夫
ぐず夫
だまされた!
最後や思ったから黙ってやったったのに。サギや!
トリ師匠
トリ師匠
ワシはニワトリや。
サギやあらへん。
ぐず夫
ぐず夫
真面目か!

ということで、Gutenbergの投稿補足4でした。次は何を書こうかしら?

ではまた次回!