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

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

カラムを活用する

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

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

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

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

具体的な完成イメージがあったとしても、私みたいな初心者が勉強しながらトップページを作るのはかなり時間が掛かります。ノーアイデアであれば尚更。また、PCとスマホでだいぶ見た目も変わりますので、両方のデザインを考えながら作るのは至難の業です。

なので、サイト立ち上げたばかりでPVも少ないならとりあえずくらいの見た目で良いと思います。やっていくうちに考えもスキルレベルも変わりますし、今やるべき事は他にたくさんあるかと思いますので。

カラムの追加と変更方法

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

カラムの追加

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

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

カラム数の変更

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

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

カラムの中身を考える

ワタクシ、サクラダ・ファミリア的な感じで理想のトップページを目指してリニューアルを続けていますが、2年経っても完成しておりません。

カラムの中身を画像にするか・文章にするか・2列にするか3列か・・アイデア次第で可能性は無限大ですし、オシャレなサイトを見る度に真似したくなります。

画像作成はCanvaがオススメ

とりあえずカラムに画像入れてリンク貼っておけば、それなりの見た目にはなると思います。画像の作成は画像編集アプリCanvaがオススメです。オシャレな画像が無料で使える上に、画像に好きなフォントの文字や図形を挿入する事もできるのです。

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

サイドバーの表示設定

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

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

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