グーテンベルクエディターの使い方

先ずリード文を書く

ワードプレステーマ Cocoon でのグーテンベルクエディターの使い方を、yu_kaさんの YouTube を見てまとめてみた。あと、章立てをすると自動で目次が作成されるのですね。便利な世の中になったものです。

画像を挿入する

画像を追加するには

1. 普通に画像ブロックを挿入する
2. メディアと文章ブロックを挿入する

方法があります。

普通に入れてみる

画像を入れてみよう。メディアライブラリーからとかファイルのアップロードで挿入する。

エディター上で切り抜きとかできるが、その度に、メディアライブラリーに画像が登録されてしまいます。意図しない画像ファイルが溜まってしまうので、予め適切な画像に仕立てておいてそれをアップロードした方がいいと思います。

これですと、画像の位置が文章の上か下ということです。

画像の横に文章を書く

ブロックの追加→メディアと文章を選択し画像を挿入すると、文章の横に画像を表示できたりします。こんな感じになります。

ここに文章を書くことができます。文章と画像の位置を入れ替えることも可能です。

文字の色を変えることもできます。ゆわいゆる、画像と文章のブロックを左右にレイアウトした形になります。

リストを入力

リストについては、エディターのリストではなくCocoonのブロックにあるアイコンリストを挿入して使うのがおすすめです。リストブロック全体を選択するとアイコンを簡単に変えることができます。

このようにかわいいアイコンも選べるよ！

様々なブロックが用意されている

Cocoonテーマで用意されている、時々使いそうなものを紹介します。

白抜きボックス

タブボックス

タブ付きボックスは２種類用意されています。プラス見出しボックスもご紹介。

タブ見出しボックス

タブのところに任意の文言を書けます。

タブボックス

タブのところには、予め決められた幾つかの文言から選択して文字が入ります。

見出しボックス

色々な囲みデザインを見てきましたが、最後は見出しボックスです。

表現の幅が広がりそうなもの

ブログカード

これもCocoonテーマで用意されているもので、例えばリンクなどを指定するとこんな感じになります。

【ブログの始め方】初心者でも出来る方法をプロが丁寧に徹底解説！｜hitodeblog（ヒトデブログ）

ブログの始め方と収益化の方法を、プロが「何処よりもわかりやすく」「丁寧に」「初心者でも全く問題ないように」解説します。画像と動画で具体的にブログ開設の手順を紹介するので安心してご覧ください。

hitodeblog.com

吹き出し

ワードプレスを始めたいんですが、まず何をしたらいいんですか？

ググればいいんじゃないんですか　YouTubeとか

終わりに

書いているうちにだんだんと癖が分かってきました。出来合いのパーツを組み合わせて作り上げていくので、似たような表現のサイトになりやすいですね。というか、大事なのは記事の内容なんですがね。

何か、ノーションとかマークダウン記法にも通ずるところがあり、一気に腑に落ちた感じがします。