お買い物マラソン開催中!9/24 01:59まで楽天市場
カスタマイズ

Cocoonナビカード/カスタマイズ(横並び、リボンの色変更)

アイキャッチ/ナビカードカスタマイズ
スポンサーリンク

今回ご紹介するのはCocoonの『ナビカード』。

ナビカードの特徴
  • Cocoonの標準機能
  • 表示させる記事をピップアップできる
  • リボンをつけられる(5種類)
  • ショートコード、またはウィジェットどちらでも使える

Cocoonには新着記事や人気記事を簡単に表示できる機能がありますが、特に表示したい記事をピンポイントで選べるのはとても便利なのです。

今回のカスタマイズをするとこのように自分で選んだ記事を横に5枚並べられます。(何枚でもよいのですがリボンが5種類なのでここでは5枚にしています)

設定方法の他に、横並べにする方法、リボンの色を変える方についても書いていきますのでご覧ください。

スポンサーリンク
この記事を書いた人
  • ブログ好きな40代主婦
  • CocoonサイトをCSSでフルカスタマイズ
  • JavaScriptを勉強中
  • ドメインパワー32
  • ワードプレスで2サイトを運営しています
はっちゃん
です
プロフィール

Cocoonナビカードを作成する手順

  • STEP1
    メニューを作成する
    「外観」→「メニュー」画面で「新しいメニューを作成しましょう」リンクから新規メニューを作成します。
    1. 表示する記事を選択
    2. リボンの有無・種類を指定
  • STEP2
    ナビカードをショートコードで呼び出す、またはウィジェットを利用する

    オプションで表示する記事数、カード形式などを指定します。

  • STEP3
    カードを横並びにする

    必要がある場合のみCSSを追加します

  • 完成

メニュー作成/Cocoonナビカードで表示する記事とリボンの種類を設定する

外観→メニュー→「新しいメニューを作成しましょう」をクリックし新規に作成します。

  1. メニュー名(英字がベスト)
  2. 表示させたい記事を選択(今回は5記事)
  3. リボンを表示させるにはCSS class(オプション)に1~5いずれかの数字を入れます。

CSS class(オプション)欄がない場合は、画面右上にある表示オプションを開いて「CSS クラス」にチェック✓を入れれば表示されます。

リボンは5種類準備されています

設定方法やオプションの詳細はCocoon公式「ナビカードの使い方」をご覧ください。

Cocoonナビカードを呼び出す方法は2つ

上記で設定したナビカードを表示するためには2つの方法がありますのでご紹介します。

1)ショートコードで呼び出す

ナビカードを呼び出すショートコードはこのように表記します。

[navi_list name="navi-card"]
name=”navi-card”の
“”の中にさきほど作成したメニュー名を入れます

小さいカードを表示するには

デフォルトの設定が小さいカードになっているためオプションはこのままのコードで表示されます。(オプションtype=”default”を入れた場合と同じ)

[navi_list name="navi-card"]

大きいカードを表示するには

(半角スペースをあけて)オプションtype=”large_thumb”を追加することで大きなカードで表示できます。

[navi_list name="navi-card" type="large_thumb"]

2)ウィジェットの[C]ナビカードを利用する

ショーコードの他にウィジェットでも利用できます。(こちらの方が操作は簡単ですが、なぜか表示設定が効かないためショートコードをおススメします)

外観→ウィジェット→[C]ナビカード

記事を表示したい場所へ追加します。
(例えばページ上部に表示するときは「コンテンツ上部」に追加)

設定画面上で選択するだけで簡単にオプション設定をができます。

  • メニュー名:ドロップダウンから選択する
  • 表示タイプ
  • タイトルを太字にする
  • 矢印を表示する

例)Cocoonナビカードをトップページの上部にだけ表示する場合

  • 1
    ウィジェットでカスタムHTMLを追加
    外観→ウィジェット→「カスタムHTML」を「コンテンツ上部」に追加。
  • 2
    カスタムHTMLにショートコードを記述

    [ navi_list name=”メニュー名” ]のコードを記述します

  • 3
    表示方法を設定する

    そのままだと全てのページに表示されてしまうのでトップページに限定します。
    表示設定:「チェック・入力したページで表示」→「トップページのみ」にチェックを入れる

これで設定はおしまい。カードを横に並べたいなー。

Cocoonナビカードの大きなカードを横並びにする/CSS使用

そのままでは縦一列に並ぶので横並びにしたい、そんなときはCSSを追加します。(※子テーマを使用しましょう)

Cocoon公式にこの方法は載っていませんので参考にしてみてください。

/*ナビカード(大きなカード)を横並びにする*/
.widget-entry-cards.large-thumb{
	display: flex;
	flex-wrap: wrap;
}

.navi-entry-cards.large-thumb a{
	width:calc(100% / 5);/*パソコンでは均等に5枚並べる*/
}

/*834px以下*/
@media screen and (max-width: 834px){
	.navi-entry-cards.large-thumb a{
	width:calc(100% / 2 );/*スマホでは横2列に並べる*/
	}
}
\パソコンでは横5列になります/
\スマホでは横2列になります/
ナビカード

CSSでflexプロパティを使い横並びにし、幅は100%の中で均等にカードを並べるように計算しています。(ここで使っているcalc()関数はとても便利!)

スマホで2列にするときは偶数の方がすっきり収まるかと思いますので記事数を調整してくださいね。

以上で完成です。お疲れさまでした。

Cocoonナビカードのリボンの色を変更する方法

CSSを使えば、デフォルトのリボンからお好みで色を変えることもできます。

こちらのCSSを子テーマのスタイルシートに追加、#に続く6桁のカラーコードを変えることで自分のサイトカラーに合わせるとよいかも。

.ribbon-color-1 span {
    background-color: #ea7e7e;/*①おすすめ*/
}

.ribbon-color-2 span {
    background-color: #7e95ea;/*②新着*/
}


.ribbon-color-3 span {
    background-color: #f7c114;/*③注目*/
}

.ribbon-color-4 span {
    background-color: #dc669b;/*④必見*/
}

.ribbon-color-5 span {
    background-color: #e9546b;/*⑤お得*/
}

カラコードを調べるにはこちらが便利です→ Web色見本 原色大辞典

補足/リボン部分はどうやって作られているか

今回、簡単に表示できるリボンが可愛いですよね。

どうやって作られているか気になる方はいませんか?(私は気になります)

Cocoon親テーマのスタイルシートを見てみると、リボンを作る際にわいひらさんが参考にされたサイトを紹介されていました。

出典:Cocoonスタイルシート (style.css)

リボンの仕組みを知りたい方はチェックしてみるとナビカード以外でも応用できるかと思います^^

\実際のコードを見ることができるcodepen/

See the Pen Demo: Pure CSS corner ribbon by Naoya (@nxworld) on CodePen.

さいごに

Cocoonの「おすすめカード」機能を使ってナビカードを表示した場合、リボンが表示されません。

ショートコードかウィジェットの[C]ナビカードを利用しましょう。

ナビカードは記事の中表示させたり使い方はいろいろ、便利機能です。使いこなしてサイトを充実させましょう~。

Comment

タイトルとURLをコピーしました