初心者向け図解【Cocoon】ブロックエディターの主な機能紹介

ブログ開設作業
スポンサーリンク

簡単で使いやすく、コードの知識も不要なブロックエディター

一つずつのブロックを積み上げていく事で、誰でも簡単に見やすいブログを作ることが出来る「ブロックエディター

完全素人の私でもそれなりに使っていく事のできる素敵エディターです。

じろさん
じろさん

今回はこの最新式のエディターの主な機能をご紹介していきます。

基本操作一覧

こちらがメインに使っていくブロックエディターの画面になります。

左から順番に見ていきましょう。

変換(ブロックタイプまたはスタイルを変更)

Cocoonブロックエディター

↑見出しを作ったり

  • Cocoonブロックエディター1
  • Cocoonブロックエディター2
  • Cocoonブロックエディター3

↑リストを簡単に入力出来たり

Cocoonブロックエディタ

↑整形済みのブロック追加が出来たり

Cocoonブロックエディター

~から引用

↑引用文をおしゃれに追加出来たり

Cocoonブロックエディター

Cocoonブロックエディター

↑他のブロックをグループ化して一緒に装飾できたり

Cocoonブロックエディター

   Cocoonブロックエディター

↑詩の挿入。特別な余白形式を使ったり、歌詞を引用したりできます。

見出し

こちらでそのブロック自体をH2~H4までの見出しに簡単に変更出来ます。

テキストの配置を変更

ブロック内でのテキストの位置を変更できます(左寄せ)

ブロック内でのテキストの位置を変更できます(中央寄せ)

ブロック内でのテキストの位置を変更できます。(右寄せ)

文字装飾1

文字装飾が簡単にできます。

太字 赤色 赤太字 等。変更したい範囲を選んでクリックするだけで変更できます。

文字装飾2

文章内の重要ポイントにマーカーでラインを付けることができます。

文章内の重要ポイントにマーカーライン付けることができます

 

バッジ

Cocoonブロックエディター

Cocoonブロックエディター

Cocoonブロックエディター

等のバッジを作ることができます。

 

フォントサイズの変更

フォントサイズの変更ができます。

 

小さい文字から大きい文字まで文章中の任意の場所を簡単に変更できます。

 

ショートコード

よく使うショートコードが予め入力されています。

文章中に入れるだけで、簡単に反映されます。

じろさん

ギター&機材大好き40代です。
奥さんと子供2人。
大人の音楽レッスンを受け続ける永遠のギター初心者。
今のところ趣味と家庭を両立しています。

・・・多分。

じろさんをフォローする

プロフィールでも

 

東京オリンピック開会式まであと0日!

↑任意の日時までのカウントダウンとかもあります。

 

テンプレート

 

あらかじめCocoon設定のテンプレートで作成しておいた文章をショートコードで呼び出し、簡単に貼り付けることができます。

WordPressのfunctions.phpを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

↑サンプルテンプレート文章

 

アフィリエイトタグ

Cocoon設定にあるアフィリエイトタグ作成画面で予め作成しておいたアフィリエイトタグのショートコードを簡単に呼び出せます。

↑こんな感じ

 

文字装飾3

比較的よく使う文字装飾は、別途すぐ使える位置に配置されています。

太字への変更や

 

イタリックというナナメ文字に変更できます。

リンク

文章中の文字に、リンク先のURLを入力できます。

例➡ じろさんちトップページはこちら

 

よりリッチなテキスト制御

ふりがなや打ち消し線を付けることができます。

東京オリンピックとうきょうおりんぴっく

↑ふりがな付けたり

文章中にコードを入れたり画像を入れたり

 

じろさんカッコいい 打ち消し線を入れたりできます。

 

詳細設定

その他、ブロックの複製やブロック前後に新たなブロックの生成、必要無くなったブロックの削除などができます。

組み合わせての効果も簡単にできます

字を大きくしてそれに色を付けてさらにマーカーでラインを引いて

等という組み合わせ技も自由自在です。

じろさん
じろさん

ガンガン個性を出していくと良いと思います!

スポンサーリンク

ブロックエディター 本文中の文字数確認

ここをクリックすることで、現在打ち込んでいる文字数や段落数の確認ができます。

スポンサーリンク

まとめ

ブロックエディターは基本的に失敗したらやり直せます

間違えたと思ったらそのブロックを消せば良いですし、先ほどのコンテンツ構造ボタンの左にある矢印をクリックすることで一つ前の作業状態に戻すことができます。

実際のコードをいじったり、変更するわけではないので、恐れず色々試していけば素敵な発見に溢れています!

どんどん試して、個性あふれるあなたの世界を作っていってください!

コメント

タイトルとURLをコピーしました