【Cocoon】投稿画面ツールバー機能一覧

文字色を変えたい
漢字にふりがなを付けたい
マーカーを引きたい
文字大きさを変えたい

Cocoonのツールバーではこういったことが簡単にできます。

本記事はWordPressテーマCocoonのブロックエディタ（Gutenberg）投稿画面におけるツールバーの機能一覧を紹介する記事です。

▼Cocoonのブロックエディタで表示されるツールバー▼

Cocoon特有のものもありますし、そうじゃないのもありますが全機能詳しく説明していきます。

まだツールバーを使いこなせてないあなた
ツールバーを使っているけど全部の機能は知らないというあなた
全部知ってるぜってあなた

みんなで見てみましょう。こんなこともできるんだって発見があると思います。

僕のおすすめの機能は「ルビふりがな」と「キーボードの文字」機能

ツールバーから簡単に使うことができますので、ぜひ試してみてください！それではみていきましょう。

ツールバーではなくブロックについては関連記事Cocoonブロック一覧！全機能まとめ【初心者向け】に書いてありますのでそちらもあわせてごらんください。

Cocoonブロック一覧！全機能まとめ【gutenberg（ブロックエディター】

Cocoon使用者向け、Gutenberg（ブロックエディター）で使えるブロック一覧まとめです。使えるブロック全部わかります。ボックス（囲み枠）の全種類、ほかにも使えるとちょっと有料テーマっぽいブロックもありますよ。知らないで使ってなかったなんて損。ぜひ読んでcocoonを使いこなしましょう。

ツールバーの基本的な使い方
ツールバー機能一覧
自分なりの文字装飾を試そう
Cocoonの「困った」を解決する記事
1. Cocoonの使い方
2. 記事の書き方

ツールバーの基本的な使い方

ツールバーで使用できる機能一覧を見る前に、念のため文字装飾関係の基本的な使い方を説明しておきます。

もう知っているというあなたは読み飛ばしてください。

段落ブロックなどに文字を書く
書いた文字を選択
ツールバーから使いたい機能を選ぶ
文字装飾が完了する
装飾した文字を戻すときはもう一度選んだ機能を押す

こんな感じです。ちょっと画像で見てみましょう

１．段落ブロックなどに文字を書く

２.書いた文字をマウスドラッグで選択

3.ツールバーから使いたい機能を選択

4.文字装飾が完了する

5.装飾した文字を戻すときは、もう一度選んだ機能を押す

▼もとに戻る▼

これで使い方は大丈夫ですね。そしたら本題のツールバー機能を見ていきましょうか。

本題行く前にひとつおすすめ事項があります！

ツールバーの表示位置は画面の上部に固定しておくことをおすすめします。編集の邪魔にならないので。下の画像を確認して固定しておきましょう。

画面右上の縦向き・・・を押す→トップツールバーを選択

やってない人は試してみてください！

ツールバー機能一覧

それでは本題に入りますね。説明順番は左から順で行きますよ

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

もともとのブロックを似たようなブロックへ変換することができます。例えば、段落ブロックなら見出し・リスト・引用などに変換できます。

画像ブロックならギャラリーやグループに変換ができます。

テキストの配置を変更

テキスト左寄せ
テキスト中央寄せ
テキスト右寄せ

3種類を選ぶことができます。基本は左寄せですが、場合によって切り替えましょう。

僕は画像は中央寄せにしています

文字色

太字
赤色
赤太字
青色
青太字
緑色
緑太字
キーボードキー

ツールバーで変えられる色は3色ですね。右のサイドバーの色設定を使えばもっといろんな色にできます。

▼サイドバーの色設定▼

太字はこのバーでしかできないと思ってるので、ここで太くしましょう。キーボードキーは何かボタンを押してもらおうという文章を作るときに役に立ちます。

マーカー

黄色と赤と青のマーカーを使うことができます。いっぱい使えるからと言ってごちゃごちゃ装飾すると読みづらいので、ほどほどに装飾しましょう。

バッヂ

オレンジ
赤色
ピンク
紫色
青色
緑色
黄色
茶色
灰色

9色のバッヂが使えます。僕は緑色を下の文章みたいな感じでよく使ってます。

参考記事 Cocoonブロック一覧！全機能まとめ【初心者向け】

フォントサイズ

選択した部分のフォントサイズを12px～48pxまで変更することができます。僕は大きい文字はあまり使いませんが、小さい文字は「出典」とか書くときに使います。

ショートコード

Cocoonで使えるショートコードを呼び出すことができます。どんなショートコードを呼び出すかはコクーン設定のエディターで設定ができます。

ショートコードの説明と使い方については関連記事【Cocoon】ショートコードの使い方！便利さをマジで知ってもらいたいをご覧ください。

テンプレート

あなたが作成したテンプレートを呼び出すことができます。テンプレート作成のやり方はざっくりいうとCocoon設定→テンプレートで新規追加です。

公式テンプレート文（定型文）を登録して使い回す方法

アフィリエイトタグ

あなたがCocoon設定→アフィリエイトタグで設定したアフィリエイトタグを呼びだすことができます。

例えば、アフィリエイトタグにA8.netのASP案件を登録しておけば、いちいちA8からコードをコピーせずに一発で呼び出すことができます。

詳しい使い方については関連記事【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】をご覧ください。

ルビほか/よりリッチなテキスト制御

B：太字
I：斜体
⛓：リンク

＋αで

ふりがな（ルビ）
インラインコード
インライン画像
取り消し線
文字色

を選択することができます

インラインコードは本文にHTMLコードとか書きたいときに使う。インライン画像は本文中に画像を入れ込みたいときに使います。

太字はこっちのBボタンよりかは最初の文字色の方に出てきた方を使った方がいいみたいだよ。それについては下にリンク貼っておきます。

外部リンクstrongタグはSEOに悪い？代わりの太字タグと一括置換方法【ワードプレス】

複製や削除ほか/詳細設定

ブロックの設定を非表示	右上の歯車（⚙）を押したときと同じサイトバーが消える
複製	選んでいるブロックをコピーする
前に挿入	選んでいるブロックの手前に空のブロックを入れる
後に挿入	選んでいるブロックの後に空のブロックを入れる
HTMLとして編集	選んでいるブロックをHTMLとして編集する。ソースを直接いじれる人向け
再利用ブロックに追加	選んでいるブロックを再利用ブロックに追加する。自己紹介とか何回も同じブロックを使うときに便利
グループ化	いくつか選んだブロックをグループ化するそれを複製や移動したりできる
ブロックを削除	選んでいるブロックを消す