デザインやカスタマイズを依頼するなら ココナラ

Cocoonでピックアップ記事表示するならナビカード!横並び、リボンのスタイルを可愛くカスタマイズ

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

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

自分のサイトに、特定の記事やコンテンツを目立たせるためにピックアップ記事を表示する方法です。Cocoonの標準機能ですが、使ったことがない方も多いのでないでしょうか。

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

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

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

ちなみに、当サイトのトップページ/ピップアップ記事はこのナビカードを使って表示していますよ。可愛いリボンも簡単につけられてとっても便利♪リボンの色や形はCSSで変更することもできます。

PickUp

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

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

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

  • Step1
    メニューを作成する(表示する記事を登録)

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

  • Step2
    ナビカードをショートコードで呼び出す、またはウィジェットを利用する

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

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

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

  • Complete
    完成

注意点として、Cocoonの「おすすめカード」機能を使ってナビカード用のメニューを選択した場合、記事は表示されますがリボンが表示されません。呼び出すにはショートコードかウィジェットの[C]ナビカードを利用しましょう。

それではひとつずつ手順を書いていきますね。

スポンサーリンク

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

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

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

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

使えるリボンの種類

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

メニューのCSS class(オプション)に入力する数字は下記の通り。リボンを表示しないときは空白でOKです。

  1. おすすめ→「1
  2. 新着→「2
  3. 注目→「3
  4. 必見→「4
  5. お得→「5

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

スポンサーリンク

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

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

  1. ショートコードで呼び出す
  2. ウィジェットの[C]ナビカードを利用する

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

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

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

カスタムHTMLに直接入力するか、ツールバーから簡単にショートコードを呼び出すこともできます。

  1. 投稿編集画面のツールバーでショートコードのアイコンをクリック
  2. ドロップダウンメニューから「ナビカード一覧」を選択
  3. ショートコードが表示されるので、必要なオプションを設定する

このようなコードが自動的に呼び出されます。

メニュー名は必須、その他カードタイプや表示オプションを設定できるようになっています。

[navi_list name="メニュー名" type="default" bold="0" arrow="0"]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Step3
    表示方法を設定する

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

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

スポンサーリンク

Cocoonナビカードの大きなカードを横並びにする方法

表示できたけどそのままでは縦一列に並んでいます。これを横並びにするにはCSSを使う、またはブロック機能のカラムを使う方法があります。

ナビカード

CSSを使って横並びにする

まずはCSSを追加する方法。(※子テーマのスタイルシートを使用しましょう)

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

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

.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%の中で均等にカードを並べるように計算しています。

モバイルで2列にするときは偶数の方がすっきり収まるのでカード数を調整してくださいね。

ブロックメニューの「カラム」を使って横並びにする(CSS不要)

こちらは、当サイトのトップページ/ピップアップ記事にも使っている方法です。

  • Step1
    メニューを作成/1記事ごと

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

    カラムを使う場合は1記事ごと別々にメニューを登録するのがポイント。

  • Step2
    ブロックメニューから「カラム」を選択

    投稿編集画面→ブロックメニューから「カラム」を選択します。

    ブロックトップページ/カラム設定
  • Step3
    カラムの中にナビカードを表示する

    1カラムに1メニューのナビカードを表示させ、カラムの数だけつくります。

例として3カラムに大きなサムネイルだとこのように表示されます。

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

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ナビカードのリボンのテキストを変更する方法

リボンに表示されている「おすすめ」「新着」「注目」「必見」「お得」のテキストを変更したいというケースもあるかもしれません。

その場合はPHPを使いますが、CSSと同じく子テーマへの上書きで変更可能です。

Cocoonのフォーラムに詳細が記載されていますので参考にされてください。

この記事にも具体的なコードを記載しておきます。

フォーラム内のコードはget_navi_card_ribbon_tag関数を子テーマでオーバーライドする方法ですが、Cocoonに設定されているget_navi_card_ribbon_captionというフィルターフックを用いる方法がスマートです。(ご指摘いただき、コード入れ替えしました)

PHPを貼り付ける場所は「外観」→「テーマファイルエディター」→「テーマのための関数(functions.php)」

子テーマ(Cocoon child)が選択されていることを確認します

//ナビカードのキャプション変更
add_filter('get_navi_card_ribbon_caption', function($caption, $ribbon_no) {
$new_caption = [
'おすすめ',
'新着',
'注目',
'必見',
'お得',
];
if (count($new_caption) >= $ribbon_no) {
$caption = $new_caption[$ribbon_no - 1];
}
return $caption;
},2,10);

キャプション部分を変更したいテキストに変更します。(”シングルクォーテーションは消さないでください)

このコードは、フックシステムを使用し、ナビカードのリボンのキャプションを指定されたテキストに置き換えるための仕組みを追加しています。

CSSもPHPもデリケートな部分なので、慎重に作業をおこない、カスタマイズは自己責任でお願いします。

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

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

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

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

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

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

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

Cocoonナビカード/リボンの形を可愛くカスタマイズ

リボンの形をシンプルなデフォルトから、CSSを変更して可愛くカスタマイズしてみます。

適当にいじって作ったもので綺麗なCSSではないかもしれません。デフォルトからスタイルを変更するために必要な部分だけを抜粋しています。

2パターンのCSSを掲載しますね。

右向きリボン(左寄せ)

/*ナビカードリボンスタイル変更-1*/
.ribbon:before, 
.ribbon:after {
	content: none;
}

.ribbon{
	width: 100%;
	height:30px;
}

.card-large-image .ribbon-top-left{
	left: 0;
	top:.5em;
}

.ribbon span{
	transform: none;
	right:initial;
	top: initial;
	width:auto;
	padding:10px 30px 10px 20px;
	clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
	-webkit-clip-path: polygon(0 0, 100% 0, 90% 50%, 100% 100%, 0 100%);
}

下向きリボン(左寄せ)

/*ナビカードリボンスタイル変更-2*/
.ribbon:before, 
.ribbon:after {
	content: none;
}

.ribbon {
	width: 100%;
	height: 50px;
}

.card-large-image .ribbon-top-left {
	left: 15px;
}

.ribbon span {
	transform: none;
	right:initial;
	top: initial;
	width:auto;
	padding:15px 15px 20px;
	-webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 80%, 0% 100%, 0% 0%);
	clip-path: polygon(100% 0%, 100% 100%, 50% 80%, 0% 100%, 0% 0%);
}

うん、可愛さアップ♪

さいごに

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

特に、固定ページを使ったオリジナルトップページにしているサイトにはオススメです。

Comment

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