カラムを使ってトップページの中身を作成する【Cocoon】

トップページを作ってみたけど中身どうしよう・・そんな時はカラムを使ってページに枠組みをもうけてみましょう。

スポンサーリンク

カラムを活用する

カラムはページ内をタンスの仕切りみたいに分ける機能。自分でテーブルを作るよりも簡単にバランスよく区分けできます。

例えばカラム数を「3」にして①②③それぞれのカラムに画像を挿入するとこんな感じになります。

バランスよく表示されます
カラム数は3

カラムが複数ある場合、スマホでは横並びではなく縦に表示されます。

“とりあえず” トップページ

具体的な完成イメージがあれば良いですが、ノーアイデアの場合は結構しんどいですよね。PCとスマホでだいぶ見た目も変わるので、両方のデザインを考えてるとなかなか完成しません。

とはいえ、誰かが見にきた時の事を考えるとそれっぽい感じにはしておきたいです。

カラムの追加と変更方法

クラシックエディターをメインで使っている方は、これを期にブロックエディターにもチャレンジしてみてください。

カラムの追加

カラム数は最大6コまで。カラム毎に幅(%)のを調整する事もできます。

例えばカラム全体を削除したり編集する際、上や下をクリックしてもなかなかブロック全体を選択する事ができません。その場合は左端をクリックすると良いです。

カラム数の変更

「カラム」のポイントをスライドしてカラム数を調整します。なぜスライド方式なのかは不明です。

カラム設定

カラム数を2 → 3にしてみると、1番右に新しいカラムが1つ追加されました。

画像とテキスト3カラム

カラムの中身を考える

サクラダ・ファミリア的な感じで理想のトップページを目指してリニューアルし続けていますが、未だにカラムを活用しています。

カラムの中身を画像にするか・文章にするか・2列にするか3列か・・アイデア次第で可能性は無限大です。

画像作成はCanvaがオススメ

とりあえず画像貼っておけばそれなりの見た目にはなると思います。画像にコメントなどを入れると更にそれっぽくなるのですが、初心者の私には難しい。。

そんな時は画像編集アプリCanva。オシャレな画像が無料で使える上に、画像に好きなフォントで文字を追加することもできるのです。

サイト運営が起動に乗ったら有料版にしたいくらい、このアプリには助けられています。

サイドバーの表示設定

ついでにサイドバーの設定もしておきましょう。サイドバーはクリック率が低いという話もありますが、私は好きなので使ってます。

ダッシュボードより
  1. Cocoon設定
  2. 全体
  3. サイドバーの表示状態

トップページだけにサイドバーを表示させるなど、どのページで表示・非表示にするかなども設定可能です。

サイドバーの表示スタイル
  • 全てのページで表示
  • 全てのページで非表示
  • フロントページで非表示
  • インデックスページで非表示
  • 固定ページで非表示
  • 投稿ページで非表示

サイドバーのコンテンツは、スマホで見ると記事の下に縦長に表示されます。コンテンツが充実してるっぽくなるのでオススメです。

Comment

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