WordPressでコンテンツを作成したい！
コンテンツを目立たせたい…
このような思いをお持ちの方にお勧めするのは「ボックスメニュー」です。
Cocoonの「ボックスメニュー」を利用すれば誰でも簡単にコンテンツメニューを作成することができます。
今回は、そのボックスメニューをよりメニューらしくカスタマイズしていきます。
横型のボックスメニューを縦型にすることでよりメニューらしくすることができます。
ボックスメニューとは
ボックスメニューは箱型のメニューです。
WordPressテーマ「Cocoon」を利用すると以下のようなボックスメニューを簡単に設置することができます。
おしゃれでカッコいいですよね。
ただ、ボックスメニューはカテゴリーとは別です。
工夫をして、カテゴリーとして利用することもできますが、カテゴリーは別で用意されているので、どちらかというとコンテンツ枠として利用される方が多いと思います。
ただ、ボックスメニューを見て分かる通り、左右に２つのボックスを維持するのでコンテンツが少ない初めの内は見栄えが悪くなってしまいます。
そこで、少ないコンテンツ量でも大々的に見せれるようにボックスメニューを縦に配置しようと思います。
ボックスメニューの設定方法
ボックスメニューの設定方法については以下のリンクで説明しています。
簡単にボックスメニューを配置できるので、まだボックスメニューを設置されていない方は以下のリンクを参考にしてボックスメニューを設定してください。
ボックスメニューを縦に配置する
ボックスメニューを横から縦に配置を変更してみました。
すると、少ないコンテンツ量でもハッキリとボックスメニューを訪問者に見せることができます。
また、コンテンツ同士が隣接しない配置で横幅いっぱいに表示されているので、訪問者の誤操作を無くし、確実に目的のコンテンツへと誘導することができます。
以下の画像がボックスメニューを縦に配置した画像です。
どうでしょうか。
かなり、コンテンツらしい表示へと変更できたと思います。
ボックスメニューを縦に配置するソースコード
ボックスメニューを縦に配置するためのソースコードは以下の通りです。
CSSを編集してください。
/*ボックスメニューを縦にする*/
.box-menus .box-menu {
width: calc(100%/1); /* or 100%*/
margin-bottom: 20px;
}
.box-menus .box-menu:last-child {
margin-bottom: 10px;
}ボックスメニューを縦に表示してみよう！
ボックスメニューを横から縦に表示することでコンテンツらしくなりました。
また、ボックス同士が隣接していないので窮屈さも無くなりました。
スマートに訪問者がコンテンツへと辿り着けるようになったと思います。
もしも、ボックスメニューを表示させる予定のある方は、コンテンツ量が少ない始めの内は、縦に配置することも視野に入れてみてはいかがでしょうか。
