MENU
チロ猫
こんにちは、チロ猫です。

ネットショップと趣味のブログをいくつか運営しています。
◆ 神テーマ「SWELL」のすべて!◆ 特徴 ~ エディタ ~ 移行手順 ~ デメリット ~ 感想 ~ 比較まで!記事へ GO!

「カラム」と「ブログカード」の使い方|ブロックエディタ Cocoon編

目次

「カラム」ブロック

「カラム」とは

カラムサンプル

カラムブロックは、図や画像を並列に並べることができるブロックです。表と異なり、ディスプレイ表示幅に合わせてPCでは2列、スマホでは1列と区別して表示します(Cocoonの場合、スマホは1列のみ可能)。

PC側では列数を増やしたり、列幅の比率を変えたり(70%と30%など)できます。

カラム、PCとスマホ表示の違い

カラムの挿入方法は以下の通りです。

「カラム」の挿入方法

STEP

ブロックエディタで をクリックし、すべて表示 をクリックします。

STEP

「デザイン」のブロック群で、カラム をクリックします。

ブロックエディタでカラムをクリック
STEP

カラムブロックのパターン選択画面が表示されます。

ここでは、2カラム(50/50)を選択します。

カラムのパターンを選択
STEP

歯車マークをクリックして右側にメニューを表示します。

2つの枠の中心部分をクリックすると、カラム全体のメニューが右側に表示されます。

カラムの設定
STEP

右メニューでカラム数を最大6まで選択できます。

カラムは最大6つまで

ここでは、2つのカラムに戻して進めます。

STEP

各カラムの ボタンをクリックし、必要な要素を挿入します。

画像以外にもあらゆる要素を挿入することができます。

カラム内に画像を入れる
STEP

カラムの左側に画像、右側にリスト項目を挿入しました。

カラム内に挿入可能なもの
STEP

実際の画面で表示してみましょう。

PCでは2列1段、スマホでは1列2段で表示されます。

PCとスマホ表示の違い

「ブログカード」ブロック

「ブログカード」とは

ブログカードサンプル

ブログカードとは、記事内に配置できる内部および外部リンクのオブジェクトのことです。

記事内に内部リンクが効果的に貼られていると、回遊率が上がって読者の滞在時間も増えます。

必要な場所に参考記事を配置して、読者の理解を助けて満足度が上がるようにしましょう。

「ブログカード」挿入方法

STEP

ブロックのリストで、ブログカード をクリックします。

ブロックエディタで、ブログカードをクリック

STEP

ブログカードのブロックが表示されました。

右メニューを表示するには、歯車マークをクリックします。

ブログカードブロックが挿入された
STEP

ブログカードの右上に、ラベルのフレーズを表示できます。

右メニューの「ラベル」のドロップダウンリストから、適切なレベルを選びます。

ラベルのフレーズを選ぶ
STEP

次に、表示したい記事のリンクを直接入力(またはコピペ)します。

ブログカードのリンクを貼り付ける
STEP

エディタ上はリンクが表示されていますが、実際の表示では以下のようになります。

ブログカードが挿入された

ブログカードについての解説は以上になります。

続けてブロックエディタを学ぼう!

次の記事では、作業を大幅に効率化できる「再利用ブロック」についてご説明します。

再利用ブロックの使い方|ブロックエディタCocoon編

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次