2024

7/17

ブロックエディター「Gutenberg」の使い方。Wordpress記事テキスト編集の方法。

wordpressで○○実装!!

2024年07月17日

2024年07月17日

WordPress

便利

ブロックエディター「Gutenberg」の使い方。Wordpress記事テキスト編集の方法。

まず「Gutenbergとは何か」という疑問を持つ人が多くいると思いますが、Gutenbergとはwordpressの記事編集画面のことを指します。元はクラシックエディターというエディターだったのがアップデートされたことにより新たなエディター「Gutenberg」となり、区別するためにGutenbergと呼ばれています。

wordpressのエディターは自由度がかなり高くできることが多いですが、その分操作方法は難しいです。なので今回はGutenbergの使い方を説明しながら操作方法も習得していただければと思います。

(投稿編集画面はここから↓)

テキスト編集

Gutenbergの使い方、今回は記事には絶対に欠かせない存在である、「テキスト」についてです。

テキストにはさまざまな種類がありますのでその辺をしっかりと使いこなしながら記事を作成していきましょう。

段落(pタグ)

こちらは言ってしまえばただの文字ですね。記事の内容を書く際に使うのがこの「段落」です。(htmlで言うpタグ)

後で紹介するものが特殊なものになり、こちらは普通の文字なので使用頻度は一番高いです。

適当にその辺をクリックして文字を打つと、段落として入力されます。

また左上の青いボタンを押すとさまざまなツールから選択することができますが、段落は開くとすぐ下にあります。

テキストの色や大きさ、間隔を変更する方法

「テキストの色」「テキストの大きさ」「テキストとテキストの間隔(文字だけではなく要素ですが)」はサイトの見やすさを上げる上では要所要所で必ず調整する必要があります。なのでまずそれらの方法を説明します。

「テキストの色、背景色を変える方法」

テキストを選択すると右側にこのようなバーが表示されます。

この「テキスト」という部分を押すとテキストの色が変更できるようになります。

「背景」というところを押すと背景色を変更できるようになります。

「テキストの大きさや間隔を変える方法」

先ほど右側に表示されていたバーをもう一度確認して見てください。「色」の他にも「タイポグラフィ」と「高度な設定」という項目があります。文字の大きさや間隔を変えるのは「タイポグラフィ」になります。「高度な設定」に関しては実際にコーディングができる方が使う機能になります。

そしてこの「タイポグラフィ」の「サイズ」というところを押すと文字の大きさを変更することができます。基本的に「S・M・L・XL」から選択することができますが、さらに細かいサイズで調整をしたい場合はこのボタンを押すと指定のピクセル数(サイズ)に変更することができます。

「タイポグラフィ」は文字の大きさの他にもいろいろなものを調整することができます。「タイポグラフィ」と書いてあるところの右側にあるボタンを押すとメニューが展開されます。こちらを一つ一つ説明するとかなり長くなってしまうのでぜひ興味のある方は自分でいじってみてください。

そして段落にもさまざまな効果をつけることができます。段落のどこかを選択するとメニューが開きます。

メニューの内容を1つずつ説明していきます。

【文字の種類を変更】

まずは「段落」を選択した場合に一番左に表示される文字の種類を変更する機能です。

1,「見出し」

まずは見出しです。基本的に記事の文字は「段落」と「見出し」で構成すると思っていただいて構いません。見出しは文字の大きさが変わり見やすくなることはもちろんですが、webサイトのseo的観点からも使用することが好ましいとされています。なので適切な見出し(h1~6)を使用することが大事です。

基本的に重要度が最も高いものがh1でそこから重要度が下がるにつれh2.h3…と使っていきましょう。

2,「リスト」

次はリストです。あまり使用頻度は高くないと思いますが箇条書きなどにしたい場合は使うことになるでしょう。

3,「引用」

次は引用です。どこかのサイトや本を参考にした時に使うものですが基本的にこれはほとんど使いません。ではなんで載せたのか、、なんででしょう。。まあほとんど使わないということがわかっただけでも収穫だと思ってください(笑)

4,「ボタン」

そしてボタンです。これは普通に使うことはあると思います。リンクを貼ったりできるのでかなり実用的ですし、もちろん色もカスタマイズできるのでボタンを使いたい場合はこちらを使いましょう。

他にも色々とあるのですが、正直使うことはない気がするので省略します。ひとまずテキストについては必須級の「段落」「見出し」と状況に応じて「リスト」「ボタン」を使えば問題ありません。

【テキストをドラッグ】

次は点々が6つある「ドラッグ」です。これは本当に簡単で、掴んで要素を移動することができます。

【テキストを移動(上下)】

「ドラッグ」と少し似ていますがこちらは下矢印と上矢印を押すことで要素を上下に移動させます。上矢印を押すと真上にある要素の上に移動し、下矢印を押すと真下にある要素の下に移動します。個人的にはドラッグより使いやすいと感じます。

ちなみに「ドラッグ」と「要素を移動(上下)」についてはテキスト以外の要素でもよく使うので必ず覚えておきましょう。

【テキストの配置】

上下移動(上矢印と下矢印)の右にある三本線のようなものを選択するとテキストの配置を変更することができます。特に中央寄せに関しては使う頻度は高いと思うのでしっかり覚えておきましょう。

【太文字】

太文字にしたい段落を選択しテキストの配置の右側のB(boldのB)を押すと、該当の部分が太文字になります。太文字になるだけでかなり目立つので強調したいことばがあるときによく使います。

【イタリック】

イタリック体にしたい段落(英語)を選択しBの右にある/を押すと該当の部分がイタリック体になります。これは正直あまり使うことがないです。

【リンク】

リンクをつけたい要素を選択して/の右のリンクのボタンを押すと該当部分にリンクを付けることができます。これは文字だけでなく画像などでもよく使うテクニックなので必ず覚えておきましょう。

【その他】

こちらも多くの装飾が可能ですが、正直なところ基本ハイライトくらいしか使わないです。

ハイライトとはテキストに色をつけることです。テキストカラーの変更はこちらでも説明しましたが、ハイライトでは部分的に色をつけることが可能です。逆に言うと右のバーでテキストカラーを設定する場合は必ず段落全体に色が掛かってしまいます。

なので基本的にはハイライトを使用して色をつけることが多いと思います。

他の機能については稀に必要な時に適宜利用する程度で大丈夫です。

【オプション】

「オプション」は利用する頻度がとても高いです。しかも利用する場面はテキストの編集だけではないので、Gutenbergの記事作成をする場合はしっかりと機能を把握しておきましょう。

1,「要素をコピー」

これはシンプルな「コピー」です。
テキストの内容だけでなく、画像やグループ単位もコピーできるためとても便利です。基本的に使わないことはないと思います。

2,「要素を複製」

こちらは選択している要素の下に同じ要素を複製します。
使用例としては、大見出しが増えた時に大見出しグループをまるっと複製し、中身を編集する。などでしょうか
コピーからのペーストでも同じことができますが、それをワンプッシュでできるのが便利です。

3,「前・後に段落を追加」

こちらは選択している要素の前・後に段落を追加します。
後から内容を追加したくなった場合など、要素の追加がしやすいのでとても便利でよく使う機能です。

4,「スタイルをコピー・ペースト」

こちらはシンプルなコピー&ペーストです。
基本的にコピーは①を使用して、ペーストはショートカットキーのペーストを使うのでほぼ使うことはありません。

5,「選択した要素をグループ化」

こちらは選択している要素をグループ化します。
これにより記事の中でも「div」や「main」などを使用することができ、レイアウトの自由度が上がり、SEOの面から見てもサイトの評価が上がります。

それに加えてグループ化することによって要素の管理も楽になるため、基本的には必ず使用します。

グループ化するとこのようにグループ内の要素を囲った枠が表示されます。また右側でグループ(div)のCSSが追加できるため、スタイルを自由に効かせることが可能です。

6,「選択した要素をロック

こちらは選択した要素をロックします。
正直あまり使うことがない機能です。

このように、ロックする項目を選ぶことができます。
なお削除のロックについて、要素にロックをかけた場合は、親要素を削除するとロックをかけた子要素は削除されてしまうので注意です。

7,「パターン・再利用ブロックの作成

こちらは選択した要素をパターンにすることができます。
パターンとは、一度作成した要素やグループをパターンとして保存しておき、いつでも取り出して使用できるようにするものです。

「パターンの作成」を押すと以下のようにパターン名を入力する画面になります。

名前が設定され、パターンが作成されると紫の枠になります。
パターンの内容はいつでも編集することが可能です。

ちなみにパターン化されている状態(紫枠)で内容を編集してしまうと、保存されているパターンの内容にも影響してしまうので、パターンを取り出して編集したい場合は「パターンを切り離す」を押して切り離してから編集しましょう。

8,「選択ツールに変更

編集ツールから選択ツールに変更。
編集ツールでは要素の編集を直接的にできますが、選択ツールではまず要素の選択をします。
選択ツールの方が見やすくて使いやすいです。

選択ツール中でも、右のバーでの編集は簡単にできるので作業時間の大幅な短縮が狙えます。
こればかりは使ってみるのが一番便利さを感じやすいと思うのでぜひ一度は触ってみてください。

9,「HTMLとして編集

記事の中にHTMLとしてコードを書くことができます。
例えば部分的にHTMLでコンテンツを作成したい場合などに、HTML形式で要素を作成します。

10,「削除

選択した要素を削除します。
Deleteキーと何ら変わらないので、ほとんど使うことはありません。

まとめ

以上、「ブロックエディター「Gutenberg」Wordpress記事テキスト編集の方法。」でした。

Gutenbergは便利な機能がたくさんありますが、その分使いこなすのが大変ですね。一度に理解せずとも少しづつできることを増やしていきましょう。

WordPress記事編集で利用できる便利なプラグイン紹介はこちら↓

——-準備中——-