WordPress

【WordPress】Gutenberg(グーテンベルク)の使い方とアフィリエイトリンクの貼り方を紹介

2021年8月1日

 

こんにちは、keiです。

 

悩む人
WordPressのブロックエディタGutenberg(グーテンベルク)の基本的な使い方を知りたいです。また、Gutenbergを使っているので、アフィリエイトリンクの貼り方を知りたいです。

 

こんな疑問に答えます。

 

本記事の執筆者

当ブログでは、WordPressの基本的な設定方法からアフィリエイトに関する役立つ情報を発信しています。本記事を書いている僕は、現在Webディレクターとして7年間働いており、ブログで月に5桁稼いでいます。

 

今までテキストエディタを使ってブログの運用をしていましたが、ブロックエディタのGutenbergを使ってみようと思いました。

 

Gutenbergは、ブログを始めた初心者の方には、特に使いやすいプラグインです。

 

ただ、Gutenbergは、高機能すぎて逆に操作方法に悩んでしまう方もいるのも事実なのではないでしょうか。

 

そこで、本記事では、Gutenbergの使い方や基本操作を自分の頭の整理のためにも記事にしてまとめて紹介します。

 

また、基本的な操作だけではなく、記事後半ではGutenbergでアフィリエイトリンクを貼る方法とGutenbergに対応しているワードプレステーマについても紹介をします。

 

本記事を読み、Gutenbergの基本的な使い方、アフィリエイトリンクの貼り方について理解できましたら幸いです。

 

WordPressグーテンベルグとは?

WordPressグーテンベルグとは?

 

ブロックエディタのグーテンベルグについて紹介します。

グーテンベルグの基本的な使い方については、早く知りたい方はコチラから飛ぶことができます。

 

グーテンベルグは、2018126日にリリースしたブロック単位で作成できるプラグインです。

 

別名、Block Editor(ブロックエディター)とも呼ばれますよ。

 

ブロック単位で記事を書けるので、HTML/CSSの知識がない方でも簡単に記事を書けるのが特徴です。

 

ブロックエディター管理画面

 

ちなみに、旧エディターの「Classic Editor(クラシックエディター)」ですと、以下のような管理画面です。

 

クラシックエディター管理画面

 

コンテンツ作成に集中したいブログ初心者でしたら、グーテンベルグは操作に悩まず重宝するプラグインです。
KEI

 

Gutenbergの基本的な使い方

Gutenbergの基本的な使い方

 

それでは、Gutenbergの基本的な使い方・操作について紹介します。

 

今回は、以下について紹介します。

 

  • ①:ブロック追加
  • ②:ブロック変換
  • ③:スタイル・色の変更
  • ④:ブロックの削除
  • ⑤:ブロックの移動
  • ⑥:記事の下書き保存

 

特によく使う操作に絞って紹介しますね。

 

①:ブロック追加

 

 

 

ブロック追加には、画面左上にある「+」をクリックして、ブロック一覧を開きます。

 

ブロック内には、「見出し」「引用」「リスト」など選択できる感じです。
KEI

 

使用したいブロックを選択しますと、エリアにブロック要素が追加されるので試してみてください。

 

②:ブロック変換

 

ブロック変換は、テキストを入力して「ブロックタイプまたはスタイルを変更」のアイコンをクリックします。

 

 

追加した入力内容に、変換したいブロックタイプをクリックします。

 

ブロックの変換では、『見出し』『引用』『リスト』などに変換できますよ!
KEI

 

 

③:スタイル・色の変更

 

追加したブロックのスタイルや色を変更したい場合には、画面右側にあるエリアで変更ができます。

 

 

「投稿」「ブロック」2つのタブがありますが、「ブロック」をクリックして個々のブロックを設定できます。

 

ブロックの色の変更ができたり、その他にもフォントや行間も変えることができます!

 

④:ブロックの削除

 

間違って追加したブロックを削除するには、ブロックメニューの詳細設定「ブロックを削除」をクリックして削除することができます。

 

 

ちなみに、キーボードの[BackSpace]で、ブロックを削除することも可能です。
KEI

 

⑤:ブロックの移動

 

ブロックの移動は、『⌃⌵』をクリックすることで上下の移動ができます。

 

 

ブロック要素の位置を変更したい際には、結構役立ちます。

 

⑥:記事の下書き保存

 

記事の下書きは、ページ右上の「下書き保存」をクリックします。

 

 

ブロックを追加したり編集している際には、こまめに「下書き保存」をクリックして、保存しておくことをおすすめします。

 

編集していて途中でフリーズして途中まで書いていた記事が消えてしまう...ということもありますので。
KEI

 

Gutenbergでアフィリエイトリンクを貼る方法

Gutenbergでアフィリエイトリンクを貼る方法

 

続いて、Gutenbergでアフィリエイトリンクを貼る方法について紹介します。

 

テキストリンク』と『ボタン』でアフィリエイトリンクを貼るやり方を紹介します。
KEI

 

①:アフィリエイト用のURLを貼る方法(テキスト)

 

まずは、アフィリエイト用のテキストリンクを貼るために、リンクにしたいテキストをドラックします。

 

 

ドラックできましたら「リンクアイコン」をクリックして、『検索またはURLを入力』のボックスに挿入したいURLを入力します。

 

 

これで、Enterボタンをクリックしたら完了です。

 

なお、リンクを削除したい時やリンクを変更したい際には、追加したテキストリンクをクリックして「編集」「リンク解除」をクリックします。
KEI

 

 

 

 

こちらをクリックしたら、リンクの編集・解除設定(通常のテキストに戻す)ができますので、リンクの編集や削除に試してみてください。

 

②:アフィリエイト用のURLを貼る方法(ボタン)

 

ボタンを追加するには、ページ左上にある「+」アイコンをクリックして、デザインの中にある「ボタン」を選択します。

※当ブログで使用しているアフィンガーを使って解説します。

 

 

以下のようにボタンの追加ができましたら、ボタン内をクリックしてテキストを追加します。

 

 

テキストの追加ができましたら、『リンクアイコン』をクリックして入力ボックスにアフィリエイト用のURLを入れます。

 

 

なお、アフィリエイトリンクを新しいタブで開くには、「新しいタブで開く」をクリックして設定できます。

 

 

クリック後に新しいタブで開くかをお好みで選択してみてください。
KEI

 

ボタンの装飾

 

先ほど冒頭で紹介したように、画面右側のエリアからボタンの色や罫線、デフォルトスタイルを選択してカスタマイズできます。

 

「[︙]オプション → 追加設定を表示」をクリック

 

 

画面右側にエリアが表示

 

ボタンのカスタマイズができましたら、念のため、プレビュー画面で問題なくアフィリエイトページに移動できるか確認しましょう。

 

なお、テキストエディタで、広告リンク(アフィリエイトリンク)を貼る方法は以下記事で紹介しているので、参考にしてみてください!

>> 【図解で解説!】WordPressでアフィリエイトの貼り方とカスタマイズ方法

 

Gutenbergを使えるWordPressテーマ

Gutenbergを使えるWordPressテーマ

 

最後に、Gutenberg(グーテンベルク)に対応しているWorrdPressテーマを掲載しておきます。

 

結論、以下のWordPressテーマがブロックエディタGutenbergに対応しています。

 

※2021年7月時点

 

AFFINGER6は当ブログでも使っているWordPressテーマです。

 

以前のAFFINGER5は、ブロックエディタを使用できなかったのですが、AFFINGER6にバージョンアップしてからGutenbergを使用できるようになりました。
KEI

 

AFFINGERは、ブログ初心者には使いやすいワードプレステーマの1つです。

 

AFFINGERを使ってみての感想を知りたい方は、以下の記事から参考にしてみてください。

>> AFFINGER6(アフィンガー)を使ってみての感想【メリット・デメリットを紹介】

 

Gutenberg(グーテンベルグ)でよくある質問

Gutenberg(グーテンベルグ)でよくある質問

 

最後に、グーテンベルグでよくある質問をまとめて紹介します。

 

グーテンベルグでよくある質問

  • gutenberg(ブロックエディタ)に対応しているWordPressテーマは?
  • gutenbergが使えないときの対処法は?
  • クラシックエディターに戻す方法

1つずつ順番に紹介します。

 

gutenberg(ブロックエディタ)に対応しているWordPressテーマは?

 

20228月現在ですと、以下WordPressテーマが、ブロックエディタ対応しています。

 

無料テーマ

最近の有料テーマですと、ほとんどブロックエディタに対応しています。
KEI

 

gutenbergが使えないときの対処法は?

 

gutenbergの「+」ボタンが使えない場合は、サイドバーの『ユーザープロフィール』をクリックして、ビジュアルエディタのチェックを外します。

 

 

チェックを外しましたら、ページ下にある「プロフィールを更新」ボタンをクリックします。

 

あとは新規作成画面で、「+」ボタンが使えるか確認してみましょう!
KEI

 

クラシックエディターに戻す方法

 

従来のクラシックエディターの方がやっぱり使いやすいと思うこともありますよね。
KEI

 

結論、『Classic Editor』をインストールすればOKです。

 

以下公式サイトから、ダウンロードできます。

>>Classic Editor公式サイト

 

Gutenbergプラグインでブログをオシャレに!まとめ

 

今回は、WordPressプラグインの1つGutenberg(グーテンベルク)の基本的な使い方について紹介しました。

 

実際使用する前には、初心者に使いやすいエディタとはいえ、記事を書いているうちに基本的な使い方が理解でき、初心者でも使いやすいエディタの一つであるなと感じました。

 

Gutenbergに対応していなかったAFFINGER5でしたが、AFFINGER6で使用できるようになったので、デザインの幅が広がり今後どんどん活用していこうと思います。

 

本記事を読み、Gutenberg(グーテンベルク)の使用方法が理解できましたら幸いです。

 

ここまで読んでいただき、有難うございました。

 

  • この記事を書いた人

keiblog

当ブログは、『シンプルで見やすい記事を発信!』をモットーに「ブログ・WordPress」などWebに関する役立つ情報を発信していきます。【経歴】アメリカ留学▶︎ 2015年ヨーロッパバックパック▶︎Webディレクター就職(歴6年)(コーディング・SEOが好きです!)▶︎ブログ開設

-WordPress