【WordPress】Cocoon 基本の使い方:ブロック

ホームぺージ教室
  • 記事を書き始めるにあたって、まずはじめに、「見出し」のブロックを選択します。
  • 右に表示される【+】を押すと、ブロックが選択できます。

見出し(これは見出しH2です)

見出しは、必ずH2から使います。見出しはH2からH6まで選べますが、H2>H3>H4>H5>H6の順にどんどん小さな見出しになっていきます。また、H2は記事内の目次として自動出力されます。

テキストの入力は、「段落」を使用します。

Enterを押すと灰色の文字で「ブロックを選択するには…」と書かれたパーツが表示されますが、それが「段落」です。段落内で文章を改行するときは、Shift+Enterで行います。

  • 段落を追加する:Enter
  • 段落内で文章を改行する:Shift+Enter

これは見出しH3です

見出し2で書きたい内容に小見出しを入れることで読みやすくしたいときに、H3以降の見出しを使います。見出しはH2からH6まで選べますが、まずはH3を選びます。

これは見出しH4です

見出しH3に、さらに小見出しをつけたいときは、H4を選びます。だいたいの記事では、多くてもH4までで足りると思います。

これは見出し5です

見出しH4の内容に、さらに小さい見出しで書きたいときに使用します。専門用語の解説や、注釈などの小さい内容に使用するイメージです。

これは見出し6です

H6まですべて使用しなければならないわけではありません。

これは見出しH3です

「H2>H3>H4>H5>H6となるようにします」と書きましたが、例えば、以下のように繰り返すのにはまったく問題ありません。また、短い記事などはH3以降を使わないことも多いです。

  • H2:見出し
  • H3:小見出し
  • H4:さらに小さい小見出し
  • H3:小見出し
  • H3:小見出し
  • H2:見出し
  • H3:小見出し
  • H2

これは見出しH3です

避けたい使用方法は、H2>H5>H5>H4>H3といったような使い方です。見出しの大小を意識して使用することで、読みやすい構成になります。

いい例
  • H2:見出し
  • H3:小見出し
  • H4:さらに小さい小見出し
  • H3:小見出し
  • H3:小見出し
わるい例
  • H2:見出し
  • H5:H3・H4よりも小さい見出し
  • H5:H3・H4よりも小さい見出し
  • H4:H3よりも小さい小見出し
  • H3:小見出し

記事を装飾する(cocoonブロック)

見出しを設定した時と同様に【+】を押すと、見出し以外のアイコンが表示されます。「すべて表示」を選択すると、左側に一覧で表示されます。検索ボックスにワードを打ち込んで検索することもできます。

ボックスタイプのブロック

強調したいことをボックスを使って表現すると、簡単に記事が装飾できます。

白抜きボックス

案内ボックス

付箋風ボックス

アイコンボックス

ラベルボックス

テキストが入ります

見出しボックス

テキストが入ります

ボックスのフレームや文字色を変更

ボックスを選択して右上の設定アイコン(歯車)を押すと、設定画面が出ますので、ブロックのタブで色などの設定を変更できます。

カラムを使用する

見出しの項で使用したこのような表現は、ブロックの「カラム」を使用しています。並べて説明したい時などに便利です。

いい例
  • H2:見出し
  • H3:小見出し
  • H4:さらに小さい小見出し
  • H3:小見出し
  • H3:小見出し
わるい例
  • H2:見出し
  • H5:H3・H4よりも小さい見出し
  • H5:H3・H4よりも小さい見出し
  • H4:H3よりも小さい小見出し
  • H3:小見出し

記事を公開する

右上の設定アイコン(歯車)を押して、投稿のタブで公開設定をします。

カテゴリー

カテゴリーを設定している場合は、ここで選択します。デフォルトは未分類になっています。

アイキャッチ画像

記事にアイキャッチ画像を設定することで、記事のサムネイルとして表示されます。「アイキャッチ画像を設定」を押して、画像をアップロードします。画像を変更したい場合も、操作は同様です。

アイキャッチ画像の作成サイズ

16:9の比率で作成します。以下のいずれかで作成します。

たて:1200px  よこ:675px

たて:800px よこ:450px

公開する

すべての設定が完了したら、公開ボタンを押して記事を公開します。公開せずにプレビュー表示したい場合は、公開ボタンの横のプレビュー(新しいタブでプレビュー)で表示させることができます。