WELCOME
当ブログを紹介いただいたサイトを掲載します受付中

Cocoonナビカードで記事をピックアップ表示/横並び、リボンの色を変更する方法

アイキャッチ/ナビカード カスタマイズ
カスタマイズ
記事内に広告が含まれています
スポンサーリンク

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

Cocoonの標準機能ですが、使ったことがない方も多いかと思います。

ナビカードの特徴
  • 表示する記事をピップアップできる便利
  • 斜めがけリボンをつけられる(5種類)
  • ショートコード、またはウィジェットどちらでも表示できる

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

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

この記事では設定方法の他に、カードを横並びにする方法、リボンの色を変える方についても書いていきますのでご覧ください。

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

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

  • Step1
    メニューを作成する

    「外観」→「メニュー」画面で「新しいメニューを作成しましょう」リンクから新規メニューを作成します。

    1. 表示する記事を選択
    2. リボンの有無・種類を指定
  • Step2
    ナビカードをショートコードで呼び出す、またはウィジェットを利用する

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

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

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

  • Complete
    完成
スポンサーリンク

メニューを作成する/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"]

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

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

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

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

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

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

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

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

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

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

  • Step1
    ウィジェットでカスタムHTMLを追加

    外観→ウィジェット→「カスタムHTML」を「コンテンツ上部」に追加。

  • Step2
    カスタムHTMLにショートコードを記述

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

  • Step3
    表示方法を設定する

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

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

スポンサーリンク

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親テーマのスタイルシートを見てみると、リボンを作る際に開発者わいひらさんが参考にされたサイトが紹介されていました。

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

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

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

さいごに

Cocoonの「おすすめカード」機能を使ってナビカード用のメニューを選択した場合、記事は表示されますがリボンが表示されません。

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

ナビカードは見てほしいピックアップ記事を抜粋して表示させたり使い方はいろいろ、便利機能です。使いこなしてサイトを充実させましょう。

COMMENT

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