こんにちは。mikimikiです。
本日は無料WordPressテーマ「Cocoon」を使ってヘッダー下に
ピックアップコンテンツを４つ作成する方法についてご紹介をしていきます。
「Cocoon 」を使ったブログサイトの始め方・作り方のYouTube動画はこちら（ドメイン/サーバー契約/初期設定/テーマ設定全て解説）
完成見本はこちら
ヘッダー下に画像を使った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動画をチェックしてね！
