こんにちは、keiです。
今までテキストエディタを使ってブログの運用をしていましたが、ブロックエディタのGutenbergを使ってみようと思いました。
Gutenbergは、特にブログを始めた初心者の方には、使いやすいのではないかと思います。
ただ、Gutenbergは、高機能すぎて逆に操作方法に悩んでしまう方もいるのも事実なのではないでしょうか。
そこで、本記事では、Gutenbergの使い方や基本操作を自分の頭の整理のためにも記事にしてまとめて紹介します。
また、基本的な操作だけではなく、記事後半ではGutenbergでアフィリエイトリンクを貼る方法とGutenbergに対応しているワードプレステーマについても紹介をします。
本記事を読み、Gutenbergの基本的な使い方、アフィリエイトリンクの貼り方について理解できましたら幸いです。
目次
Gutenbergの基本的な使い方
Gutenbergの基本的な使い方
それでは、Gutenbergの基本的な使い方・操作について紹介します。
今回は、以下について紹介します。
- ①：ブロック追加
- ②：ブロック変換
- ③：スタイル・色の変更
- ④：ブロックの削除
- ⑤：ブロックの移動
- ⑥：記事の下書き保存
特によく使う操作に絞って紹介しますね。
①：ブロック追加
ブロック追加には、画面左上にある「＋」をクリックして、ブロック一覧を開きます。
使用したいブロックを選択しますと、エリアにブロック要素が追加されるので試してみてください。
②：ブロック変換
ブロック変換は、テキストを入力して「ブロックタイプまたはスタイルを変更」のアイコンをクリックします。
追加した入力内容に、変換したいブロックタイプをクリックします。
③：スタイル・色の変更
追加したブロックのスタイルや色を変更したい場合には、画面右側にあるエリアで変更ができます。
「投稿」「ブロック」２つのタブがありますが、「ブロック」をクリックして個々のブロックを設定できます。
ブロックの色の変更ができたり、その他にもフォントや行間も変えることができます！
④：ブロックの削除
間違って追加したブロックを削除するには、ブロックメニューの詳細設定「ブロックを削除」をクリックして削除することができます。
⑤：ブロックの移動
ブロックの移動は、『⌃⌵』をクリックすることで上下の移動ができます。
ブロック要素の位置を変更したい際には、結構役立ちます。
⑥：記事の下書き保存
記事の下書きは、ページ右上の「下書き保存」をクリックします。
ブロックを追加したり編集している際には、こまめに「下書き保存」をクリックして、保存しておくことをおすすめします。
Gutenbergでアフィリエイトリンクを貼る方法
Gutenbergでアフィリエイトリンクを貼る方法
続いて、Gutenbergで、アフィリエイトリンクを貼る方法について紹介します。
①：アフィリエイト用のURLを貼る方法（テキスト）
まずは、アフィリエイト用のテキストリンクを貼るために、リンクにしたいテキストをドラックします。
ドラックできましたら「リンクアイコン」をクリックして、『検索またはURLを入力』のボックスに挿入したいURLを入力します。
これで、Enterボタンをクリックしたら完了です。
こちらをクリックしたら、リンクの編集・解除設定（通常のテキストに戻す）ができますので、リンクの編集や削除に試してみてください。
②：アフィリエイト用のURLを貼る方法（ボタン）
ボタンを追加するには、ページ左上にある「＋」アイコンをクリックして、デザインの中にある「ボタン」を選択します。
※当ブログで使用しているアフィンガーを使って解説します。
以下のようにボタンの追加ができましたら、ボタン内をクリックしてテキストを追加します。
テキストの追加ができましたら、『リンクアイコン』をクリックして入力ボックスにアフィリエイト用のURLを入れます。
なお、アフィリエイトリンクを新しいタブで開くには、「新しいタブで開く」をクリックして設定できます。
ボタンの装飾
先ほど冒頭で紹介したように、画面右側のエリアからボタンの色や罫線、デフォルトスタイルを選択してカスタマイズできます。
「［︙］オプション → 追加設定を表示」をクリック
画面右側にエリアが表示
ボタンのカスタマイズができましたら、念のため、プレビュー画面で問題なくアフィリエイトページに移動できるか確認しましょう。
なお、テキストエディタで、広告リンク（アフィリエイトリンク）を貼る方法は以下記事で紹介しているので、参考にしてみてください！
>> 【図解で解説！】WordPressでアフィリエイトの貼り方とカスタマイズ方法
Gutenbergを使えるワードプレステーマ
最後に、Gutenbergに対応しているワードプレステーマを調べましたので掲載しておきます。
結論、以下のワードプレステーマがブロックエディタGutenbergに対応しています。
※2021年7月時点
AFFINGER6は当ブログでも使っているワードプレステーマです。
ブログ初心者には使いやすいワードプレステーマの１つなので、AFFINGERを使ってみての感想を知りたい方は、以下の記事から参考にしてみてください。
>> AFFINGER6（アフィンガー）を使ってみての感想【メリット・デメリットを紹介】
Gutenbergの使い方：まとめ
今回は、ブロックエディタGutenbergの基本的な使い方について紹介しました。
実際使用する前には、初心者に使いやすいエディタとはいえ、記事を書いているうちに基本的な使い方が理解でき、初心者でも使いやすいエディタの一つであるなと感じました。
Gutenbergに対応していなかったAFFINGER5でしたが、AFFINGER6で使用できるようになったので、デザインの幅が広がり今後どんどん活用していこうと思います。
本記事を読み、Gutenbergの使用方法が理解できましたら幸いです。
ここまで読んでいただき、有難うございました。