【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】

WordPressCocoonツールバー一覧ブログ
  • 文字色を変えたい
  • 漢字にふりがなを付けたい
  • マーカーを引きたい
  • 文字大きさを変えたい

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.段落ブロックなどに文字を書く
2.書いた文字をマウスドラッグで選択
3.ツールバーから使いたい機能を選択

4.文字装飾が完了する
5.装飾した文字を戻すときは、もう一度選んだ機能を押す
▼もとに戻る▼

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

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

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

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

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

ツールバー機能一覧

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

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

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

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

テキストの配置を変更

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

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

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

文字色

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

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

▼サイドバーの色設定▼

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

マーカー

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

バッヂ

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

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

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

フォントサイズ

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

ショートコード

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

ショートコードの説明と使い方については外部リンク Cocoonで使える[ショートコード]のオプションと使い方まとめをご覧ください。

テンプレート

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

僕の場合はカッテネを使った商品リンクを設定しています。テンプレートの使い方・カッテネの使い方については下記記事を参照お願いします。

公式 テンプレート文(定型文)を登録して使い回す方法
参考記事 WordPressでのカッテネの使い方を誰でもできるように画像50枚以上使って超詳しく説明します

アフィリエイトタグ

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

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

詳しい使い方については公式 アフィリエイトタグの一元管理機能の使い方をご覧ください。

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

  • B:太字
  • I:斜体
  • ⛓:リンク

+αで

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

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

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

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

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

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

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

複製やブロックを削除の文字の右側にショートカットキーが書いてあるので、Shift+alt+Zとか覚えられたら作業が早くなりますね

自分なりの文字装飾を試そう

以上で【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】

こちらの説明はすべて終了です。お疲れさまでした。

たくさん文字装飾の機能があるからって使いまくると読みにくい記事が出来上がります

大切なのは読者が読みやすいことです。色や太字は最小限で本当に使わないといけないところだけ使いましょう。

使える機能からあなたなりの法則を決めて、統一性のあるブログに育ててあげてください!

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

コメント

プロフィール
峠

とうげです。30代サラリーマンです。地方進学校→一浪→大学理工学部→就職。行動することを大切にしています。投資、アフィリエイト、ブログやってます。インデックス投資で1000万円運用中。本業は地方に長期出張する施工管理→技術職へ異動。小さいときはロボット作り屋さんになりたかった。

峠をフォローする
タイトルとURLをコピーしました