WordPress

【WordPress】Gutenbergの使い方とアフィリエイトリンクの貼り方を紹介

 

こんにちは、keiです。

 

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

 

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

 

Gutenbergは、特にブログを始めた初心者の方には、使いやすいのではないかと思います。

 

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

 

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

 

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

 

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

 

 

Gutenbergの基本的な使い方

Gutenbergの基本的な使い方

 

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

 

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

 

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

 

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

 

①:ブロック追加

 

 

 

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

 

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

 

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

 

②:ブロック変換

 

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

 

 

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

 

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

 

 

③:スタイル・色の変更

 

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

 

 

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

 

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

 

④:ブロックの削除

 

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

 

 

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

 

⑤:ブロックの移動

 

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

 

 

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

 

⑥:記事の下書き保存

 

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

 

 

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

 

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

 

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

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

 

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

 

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

 

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

 

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

 

 

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

 

 

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

 

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

 

 

 

 

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

 

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

 

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

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

 

 

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

 

 

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

 

 

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

 

 

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

 

ボタンの装飾

 

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

 

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

 

 

画面右側にエリアが表示

 

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

 

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

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

 

Gutenbergを使えるワードプレステーマ

 

最後に、Gutenbergに対応しているワードプレステーマを調べましたので掲載しておきます。

 

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

 

※2021年7月時点

 

AFFINGER6は当ブログでも使っているワードプレステーマです。

 

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

 

ブログ初心者には使いやすいワードプレステーマの1つなので、AFFINGERを使ってみての感想を知りたい方は、以下の記事から参考にしてみてください。

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

 

Gutenbergの使い方:まとめ

 

今回は、ブロックエディタGutenbergの基本的な使い方について紹介しました。

 

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

 

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

 

本記事を読み、Gutenbergの使用方法が理解できましたら幸いです。

 

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

 

  • この記事を書いた人

keiblog

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

-WordPress