無料WordPressテーマ「Cocoon」でヘッダー下にピックアップコンテンツを４つ作成する方法

こんにちは。mikimikiです。
本日は無料WordPressテーマ「Cocoon」を使ってヘッダー下に
ピックアップコンテンツを４つ作成する方法についてご紹介をしていきます。

完成見本はこちら

ヘッダー下に画像を使った4つのピックアップメニューを作成していきます。

作成手順①　Canvaで画像を作成

Canvaの右側ボタン＞デザインを作成＞カスタムサイズ　300×180pxで作成をしていきます。

4枚の画像を作成したら、共有＞ダウンロードでjpgまたはPNGでダウンロードをします。

WordPressで設定

メディアにダウンロードした4枚の写真をアップします。

アップした画像のファイルURLをメモ帳などにコピーしておきましょう。

ボックスメニューを作成

外観＞メニューから新しくメニューを作成しましょう。
メニュー名は「ボックスメニュー」にします。

ピックアップメニューに使いたい項目を左側から選んでいきます。

・カテゴリーにリンクしたい場合は希望のカテゴリーを選択
・固定ページにリンクしたい場合は固定ページの希望ページを選択

順番はドラッグで簡単に入れ替える事ができます。

上の表示オプションをクリックして「タイトル属性」にチェックを入れます。

先ほどコピーした画像URLをタイトル属性にペーストしていきます。

ウィジェット設定

外観＞ウィジェットを開きます。

左側から［C］ボックスメニューをドラッグしてコンテンツ上部に配置して
メニュー名を「ボックスメニュー」にします。

そうするとブログに4つのピックアップメニューが表示されました。
ここから見え方を調整していきます。

CSSを追加

外観＞カスタマイズを押すと「追加CSS」があります。

---

こちらにこのコードを追加していきましょう。

.box-menu{
padding: 0;
min-height: 0;
}

.box-menu:hover{
box-shadow:none;
opacity: 0.8;
}

.box-menu-label,
.box-menu-description{
display: none;
}

.box-menu-icon *{
margin: 0;
max-width: 100%;
max-height: 300px;}

@media screen and (min-width: 600px){
.wwa .box-menu{
width: calc(100%/4);
}
}

.box-menu:first-child{
margin-left: auto;
}

@media screen and (min-width: 600px){
.wwa .box-menu{
width: 20%;
}
}

@media screen and (min-width: 600px){
.wwa .box-menu{
margin-right: 3%;
}

.box-menu:hover{
box-shadow:none;
opacity: 0.8;
}

.box-menu-label,
.box-menu-description{
display: none;
}

.box-menu-icon *{
margin: 0;
max-width: 100%;
max-height: 300px;}

@media screen and (min-width: 600px){
.wwa .box-menu{
width: calc(100%/4);
}
}

.box-menu:first-child{
margin-left: auto;
}

@media screen and (min-width: 600px){
.wwa .box-menu{
width: 20%;
}
}

@media screen and (min-width: 600px){
.wwa .box-menu{
margin-right: 3%;
}

---

こちらで4つのピックアップメニューが綺麗に表示されるようになりました。

もっと詳しくWordPressテーマ「Cocoon」の設定方法をみたい人はYouTube動画をチェックしてね！