【Cocoon】記事編集画面の全機能まとめ!グーテンベルグエディターを徹底的に使いこなす!【初心者にも】

ブログ運営
スポンサーリンク

 Cocoonテーマの記事編集で表示される機能(下記画像参照)についてのまとめです。Cocoonの数ある神機能を使いこなせていない人は多いのではないでしょうか??

 今回、管理人ゆるはんが、片っ端から全部試してみました!この記事一つで、Cocoonの記事編集が全て分かります。知りたい項目を、目次からポチッでも良いですし、全部読むのも勉強になります。

 私にとっても「永久保存版まとめ記事」です。どんどん追記していくので、
 ※ブックマークすることを推奨します。

 今回紹介するグーテンベルグエディターというのは、これ↓

※たくさんの機能があるため、モバイル版ではサイドバー」に目次を設置しております。記事の上部まで戻らずとも、お好きなところにとぶことができますので、ご活用ください。

スポンサーリンク

記事編集画面の全機能:その①「ブロックタイプまたはスタイルを変更」

 まずはこちら↓「ブロックタイプまたはスタイルを変更」

見出し

 見出しは、記事を見やすくするために重要です。SEO面でも重要な役割を果たすそうなので、効果的な使い方をしていきたいところです。
 特にH2は、Googleに「こんな記事書いてますよ」とアピールすることができるそうなので、積極的にキーワードを入れましょう

 こんな感じ↓
 

リスト

 リストは、箇条書きを作るときに有効です。

箇条書きリストに変換

にすると、例えば、こんな風に表示させられます。

やることリスト

  • 洗濯干し
  • お皿洗い
  • 床掃除

番号付きリストに変換

 にするとこんな感じ。

やることリスト

  1. 洗濯干し
  2. お皿洗い
  3. 床掃除

リスト項目をインデント

 という表示を押せば、カーソルを合わせていた文章が一段下がって、こんな感じに

やることリスト

  1. 洗濯干し
    1. お皿洗い
    2. 床掃除

リスト項目のインデントを戻す

 という表示を押せば、カーソルを合わせていた文章が元の位置に揃います。

やることリスト

  1. 洗濯干し
  2. お皿洗い
  3. 床掃除

引用

 引用は、記事を引用したいときに使います。引用を利用すると、自分の主張に説得力をつけることができます。デフォルトはこんな感じに↓

完璧主義は、完璧主義であることに感謝する。 

「完璧主義の、完璧主義による、完璧主義のための、ブログの書き方」より

 大にするとこんな感じ↓になります。

完璧主義は、完璧主義であることに感謝する。 

完璧主義の、完璧主義による、完璧主義のための、ブログの書き方」より

 文章は、右寄せ・中央寄せ・左寄せが選択できるので、使い分けてみてください。↓中央寄せ

完璧主義は、完璧主義であることに感謝する。 

完璧主義の、完璧主義による、完璧主義のための、ブログの書き方」より

 ↓右寄せ

完璧主義は、完璧主義であることに感謝する。 

完璧主義の、完璧主義による、完璧主義のための、ブログの書き方」より

グループ

 グループは、箇条書きや文章をグループ分けするときに使えそうです。例えば、こんな感じ↓

 (例)<ハンバーグの材料>
・ひき肉…300g
・玉ねぎ…1個

(A)
・パン粉…大さじ5
・牛乳…大さじ5
・にんにくのすりおろし…1/2かけ
・塩…小さじ1/2
・砂糖…小さじ1/2
・こしょう…少々

(B)
・ケチャップ…
・ウスターソース…
・醤油…

 枠ごとに色設定ができるので、同じ内容の中をグループ分けしたいときに有効です。

整形済み

 整形済みは、こんな感じ↓

 <整形済み>
 編集されたスペースや改行を、そのまま表示させる機能

 調べてみると、preタグというものを、簡単に設定できるツールのようです。

 プログラミングをする人が、自分の使っているソースコードをブログ内で紹介したいときなどに使えるとか(「cocoonテーマでソースコードを記事内に埋め込む方法「preタグとは?」」より)。
 「ソースコードをハイライト表示させたいけど重たいプラグインをインストールしたくない(「ソースコードをハイライト表示させる方法」より)」という場合に使えるそうです。

 詩は、「整形済み」と違い、文章中の文字フォントと同じフォントが使用されています。文章の位置を左寄せ・中央寄せ・右寄せと変更できるので、見た目を詩のような印象にしたいときには使えます。こんな感じです↓

(例)<今日のまとめ>
・りんごは美味しい
・りんごは美味しい
・りんごは美味しい
スポンサーリンク

記事編集画面の全機能:その②「テキストの位置を変更」

↑これです

 これはよく使う機能ですね。文字を左寄せ・中央寄せ・右寄せにすることができます。

左寄せ

中央寄せ

右寄せ

 

記事編集画面の全機能:その③「文字」

↑これ

 文字の色や太さを変更できます。(例)こんにちは

  • 太字(boldクラス指定)こんにちは
  • 赤色こんにちは
  • 赤太字こんにちは
  • 青色こんにちは
  • 青太字こんにちは
  • 緑色こんにちは
  • 緑太字こんにちは
  • キーボードキーこんにちは

 ちなみに、キーボードキーは、例えば「こちらのボタンを押してください」というように、キーボード風の表示をさせたいときに役に立ちます。

記事編集画面の全機能:その④「マーカー」

 こちらもよく使われる機能です。
 何かを説明する文章を書くときには、読み手にわかりやすいマーカーを引いてあげると(←アンダーラインマーカー)良心的です。ただし、マーカーを引くときには、自分なりのルールをあらかじめ決めておく(←マーカー)方が良いです。便利だからとマーカーを使いすぎると、結局どこがポイントなのか分からなくなってしまいます。どこまで線を引くかの判断は難しいですが、1段落につき、2〜3個までにすると良いでしょう。

記事編集画面の全機能:その⑤「バッジ」

 バッジは、例えば関連記事の前に貼ったりすることで、目に留まりやすくするそうです。私も、この記事を作るまでは知りませんでした。例えばこんな感じで使います↓

 こちらは、オレンジを使っています。そのほかにも、赤色ピンク紫色青色緑色黄色茶色灰色がありますので、テーマ分けして使ってみるのはいかがでしょうか?

記事編集画面の全機能:その⑥「フォントサイズ」

 フォントサイズは、知ってても、12px あまり活用することのない14px 機能なのでは16px ないでしょうか?18px私も、20px標準の文字サイズを22pxあまり24pxいじることなく使っています。28pxブログ記事に32px強弱をつけたいときには、36px是非40px使ってみたい44px 機能です。48px

スポンサーリンク

記事編集画面の全機能:その⑦「ショートコード」

これ→

 ショートコードってなに??
 プログラミング臭のする名前がついてる時点で、回れ右・退散したくなりますね。

 どうやら、自分がよく使う定型文・レイアウト・処理なんかを簡単に呼び出せるようになる機能らしいです…
 よくわからないので、実際に使ってみます

広告

 [ad]という表示が出てきました。このショートコードで、広告を自分の好きな位置に表示させることができるようです!

 設定の方法は、こちら↓

 これは、[ad]というショートコードで入れてみた広告です↓公開しないと見られないそうですが、どうですか?

スポンサーリンク

 ちゃんと出来てますね!♪

新着記事一覧

 を押すと、

というのが出てきました。

 これだけでも、記事一覧を表示できるようですが、ちょっと説明があってもいいかなと思います。「新着記事はこちらからどうぞ↓」なんて、ちょっとブロガー気取ってみました(笑)。こんな表示になりました!笑 ↓

新着記事はこちらからどうぞ↓

男性不妊について【助産師国試対策】
多嚢胞性卵巣症候群<PCOS>とは【助産師国試対策】
ホルモンについて【助産師国試対策】

 す…すごい!!ブログ内をたくさんみてほしいときに、使えそうです!

人気記事一覧

 新着記事と同じ要領です。
 では、私も知らない 私の人気記事一覧を、一緒に見てみましょう。どうぞ!笑

【Cocoon】記事編集画面の全機能まとめ!グーテンベルグエディターを徹底的に使いこなす!【初心者にも】
高品質なマルコのランジェリーを、1番安く買う方法【まとめ】
完璧主義の、完璧主義による、完璧主義のための、ブログの書き方【完璧癖も悪くない】
ホルモンについて【助産師国試対策】

 ありがとうございます。おかげさまで自分の記事を冷静に客観視することができました。笑

ナビカード一覧

 押してみると、こんな表示が出てきました。

 新着記事でも、人気記事でもなく、自分の意図した記事を表示させたいときに使えるようです。これを作れば、「こんなあなたには、私の〇〇に関する記事をどうぞ!」なんて言えます。
 作り方は、「外観」→「メニュー」から、新しいメニューを作成します。使うときには、「”メニュー名”」に、自分が作ったメニューを入力すれば、完了です。

 ナビカードの作り方はこちら→好きな記事を表示できる!簡単ナビカードの使い方

 実際に作ってみました。タイトルは、「この記事に来る人はたぶん誰も興味ないであろう私の専門分野記事」です。息抜きにでもどうぞ。笑

看護と助産、実習はどっちが辛い?現役助産学生が、看護と助産の違いを徹底解説!
看護と助産、実習はどっちが辛い?現役助産学生が、看護と助産の違いを徹底解説!
1年で取るか2年頑張るか。助産師取得を目指すなら、大学院を勧める7つの理由!
1年で取るか2年頑張るか。助産師取得を目指すなら、大学院を勧める7つの理由!
誰を信じればいい?!助産師さんによって言うことが違うのはなぜ?
誰を信じればいい?!助産師さんによって言うことが違うのはなぜ?

プロフィールボックス

 プロフィールボックスという部分をクリックするだけで、こんなのが出てきました。

 プレビュー画面では、こんな感じ↓

ゆるはん

助産師を目指して大学院に通っています。大好きな読書や、手作り、田舎暮らし、遠距離恋愛、妊娠・出産・育児のことなど…役立つ情報を綴っていきます。

ゆるはんをフォローする

 「この記事を書いた人」というのは、ブログ初期段階でたぶん皆さん設定済みかと思います。まだ設定してない人は、「ユーザー」→「あなたのプロフィール」から、自分のプロフィールを入力してみてくださいね。

スポンサーリンク

Amazonリンク

 Amazonリンクをクリックすると、こんな表示が出てきました。

 悲しいのが、私自身がAmazonアソシエイトの審査にまだ通っていないので、実践ができないことです。。審査に通ったら、追記します…(T_T)

楽天リンク

 クリックすると、こんな表示が出てきます↓

 IDがわかればそのまま入力でもできそうですが、IDやキーワードの入力についてはよくわかりませんでした(分かり次第追記します)。

 楽天アフィリエイトに登録して、Wordpressへの登録まで済んでいる人は、楽天市場からそのまま商品リンクを作成して、貼り付けるのでも良さそうです。

 参考にした記事はこちら→「楽天商品リンクブックマークレットの使い方
 楽天商品リンク作成の方法はこちら→「【電子書籍対応】Cocoon楽天商品リンクブックマークレット

 そちらで作った楽天リンクがこんな感じになりました↓

実際のリンクがこれ↓

すごいです!大好きなアロマについても記事にできる日が近そうです♪

楽天リンク(商品名変更)

 (商品名変更)では、こんな表示が出てきます↓

 上と同じ商品で、「title=”商品名”」を「title=”ゆるはんが今欲しいアロマ“」に変えてみました。
 ※赤線が変更部分。

 こんな感じになりました↓

ゆるはんが今欲しいアロマ
アロマ ルイボスnaturalshopなごみ

楽天リンク(ボタン非表示)

 (ボタン非表示)では、こんな表示が出てきます↓

 上と同じ商品でやってみます。赤線の部分が違うところ。

 こんな感じになりました↓

 「Amazon」「楽天」というボタンが消えて、シンプルな見た目になりました。

スポンサーリンク

過去日時

 過去の日時を指定しておけば、ブログを見にきてくれた日までを自動でカウントしてくれる機能です。これ↓

 ここに、西暦(YYYY)・月(MM)・日(DD)を入力します。例えば、私がブログを初投稿した日は2019年10月12日なのですが、試しにこれを入力してみます。

 すると今日は、私のブログ初投稿から「7ヶ月」なんだそうです←「」内にショートコードを入れています。
 1ヶ月未満は「○日」1ヶ月以上は「○ヶ月」1年以上3年未満は「○年○ヶ月」3年以上は「○年」で表示されるようです。

過去日時(年)

 数ヶ月単位で表示されるのは嫌!という方は、「過去日時(年)」を使ってください。

 例えばこれを、2018年10月12日とすると、

 「1」と表示されます(←「」内にショートコードを入れています)。これだと「年」がついていないので、ショートコードの直後に「年」をつけた方が良さそうです。こんな感じで↓

年齢

 年齢を表示させたい場合も同じように、西暦・月・日を入れます。

 「○歳」と表示してくれます。1歳未満の場合は、0歳になりますので、○ヶ月と表示させたい人は、「過去日時」を利用すると良いと思います。
 ただしこちらの機能、読者がブログに訪問してくれた日までをカウントするので、永遠の17歳♪にはなれません(笑)。その時の年齢をずっと残したい場合は、普通に入力してください。

カウントダウン

 カウントダウンしたい日を入力します。時間まではカウントダウンできません。

 こちらも、数字しか表示されないので、「日」を追加した方が良いです。

評価スター 

 そのままで表示させると、5点中3.7点の評価がつけられます↓

3.7

 こんな機能があったとは…!!

 star rateの数字を変えれば、評価の点数を変えられます。そして、maxの数字を変更すれば、100点満点だってできちゃいます↓自由な表現が可能になりますね!

3.7

 numberは星の数を数字で表記するかどうかを決められるそうです。

numberには、評価数値を表示するかどうかを1か0かで切り替えます。

レーティングスター(評価スター)ショートコードの利用方法

 つまり、number=1にすれば、星の横に評価した点数を数字で表示してくれる。

 3.7

 number=0にすれば、評価した点数は表示せずに、星だけを表示してくれるそうです。

 

ログインコンテンツ

 ログインコンテンツをクリックすると、こんな表示が出てきます。

 ユーザー登録を促すときに利用できそうです。会員限定記事ですね。こんな機能があるなんて知らなかった〜!私もこの記事「登録ユーザー限定」にしちゃおっかな〜なんて(笑)そんな使い方もできますね(^^)

 ユーザー登録する方法は、分かり次第追記します

コメント

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