Cocoonのカラム機能の使い方-カラムわけカスタマイズ

最近SEOを考えたらデザインのいい海外のテーマのほうがいいのかな～とか考えて私は結構Cocoonを使っているのですが、シンプルすぎる気がしてテーマを変えたほうがいいのかなとか思ったりしていました。

でもよく考えたたら海外のいいデザインのテーマを使ったところでそれを他の人が使い始めたら陳腐化するのも否めない。

それよりCoconnの機能を生かして自分だけのオリジナルなデザインにしたほうがいいんじゃないか？と思い始めました。

特にCocoonのカラムを分ける機能がすごい。

Cocoonのカラムに関するページ。

この機能を活かせばトップページも作れるし商品紹介のボタン付きのページとかも簡単に作れるんじゃ？とか思ってきました。

もうちょっとうまくやれそうですがこれ全部Cocoonの機能だけでやったものです。CSSでボタンを中央配置にしているのであれですが、2つ並びのボタンを調べたりボタンを右と左に配置できるようにすればもっと見栄え良く作れるかもしれません。

このやり方は2カラムの枠をひとつつくってその右側にさらに2カラムにしたボタンを入れる。その後スタイルから出せる灰色の枠にそれを入れ込んだだけです。

枠も太めじゃなく細めのデザインをコピペで探してくるとかなりいい感じになりそうですよね。カエレバみたいなものを自分で作れちゃいます。

それではやり方です。

Cocoonで2カラムのHTMLタグをを呼びだす

ビジュアルエディターのショートコードの横カラムのところをクリックすると左のように選べるようになっています。

そこで1:1、つまり等分か1：2、1：3、2：1などを選んでカラムを分けます。

実際の操作画面ではこの様になっています。

これもカラムの中にスペースの有効度がすごいです笑

画面のようにビジュアルエディターでは左が青、右がオレンジみたいな感じで見やすくなっています。そこに通常通り文章を入れ込んでいくだけです。

これをトップページに活かせばかなりサイトっぽいつくりにも簡単にできそうですね。

こんなふうにトップページも作り込むことができますよね。これは同じように3カラムの機能を利用したものです。

H3の見出しを出した後したに中央揃えで記事やカテゴリのリンクをはっただけですね。

実際このようにトップページを作ってみようと思うので作ったらまたかきますね。