PR

Cocoonのショートコード完全攻略|基本8ステップ

ワードプレス

 

はじめまして。当ブログ管理人の後藤です。

未経験者が「なぜブログで10万稼げたのか?」その秘密を暴露します。 「今年こそは絶対稼ぎたい!」という人は今すぐご覧ください。


あっさり10万稼ぐためのメルマガ

 

 

それでは始めます。

 

Cocoonを使っているけれど、ショートコードがたくさんありすぎて「正直どれを覚えればいいの?」と迷っていませんか。

この記事では、Cocoonのショートコードの基本から、記事一覧・ブログカード・全記事一覧の作り方まで、コピペで使える例をセットで紹介します。

この記事で分かることは、次のとおりです

  • Cocoonのショートコードで何ができるか
  • よく使うショートコードと役割(一覧表つき)
  • 記事一覧・人気記事・お知らせ・全記事一覧の作り方
  • ブログカードやナビカードで回遊率を上げるコツ
  • トラブル時のチェックポイントと考え方

結論を先に言うと、「よく使うCocoonのショートコードを、自分用のレシピとしてまとめてしまえば、誰でも簡単にプロっぽいレイアウトを再現できるようになる」です。

 

  ブログ収益化の教科書プレゼント

↓ ↓ ↓

ba15a

 

cocoon ショートコードとは?できることをざっくり紹介

ごとう
ごとう

まずは、Cocoonのショートコードで何ができるのか、全体像をざっくり整理します。全体を俯瞰しておくと、「どのショートコードから覚えればいいか」が見えやすくなります。

よく使うCocoonショートコード一覧

私がブログ運営で特によく使うCocoonのショートコードを、用途別にまとめました。最初は、このあたりだけ押さえておけば十分です。

用途 ショートコード例 よく使う場面
新着記事一覧
【WordPress】ブログカードの基礎とカスタマイズ実践テクニック
wordpressオリジナルテーマの作り方と自作3パターン
WordPressクラシックエディタ切り替え完全ガイド|おすすめ設定3パターン
WordPressのログイン履歴の見方と不正ログインを防ぐ5つのコツとは?
WordPressで企業・コーポレートサイトを作るおすすめ無料テーマは?
トップページの最新記事欄
人気記事一覧
ライブドアブログをSearch Consoleに登録してサイトマップ送信する方法
WordPressでXを埋め込む方法と失敗しないコツ・注意点
SWELLの見出しデザインとCSSカスタマイズ|やりすぎない8テクニック
SWELLのスライダー設定マニュアル|初心者がつまずく5ポイント
【Cocoon】アフィリエイト広告の貼り方!ボタンやタグ設定も【A8で解説】
サイドバーの人気記事ランキング
お知らせ一覧 お知らせページやヘッダー下部
全記事一覧

固定ページ

投稿一覧

カテゴリー

サイトマップや全記事一覧ページ
ブログカード 記事URL 記事内の関連記事リンク
ナビカード 特集やキャンペーンページの導線

ショートコードはもっとたくさんありますが、日常的なブログ運営で活躍するのはこのあたりです。特にnew_list(新着記事一覧)とpopular_list(人気記事一覧)、info_list(お知らせ一覧)は、Cocoonの公式マニュアルでも個別に解説されている代表的なショートコードです。

Cocoonのショートコードを使うメリット

Cocoonのショートコードを使うと、次のようなメリットがあります。

  • コピペだけで、デザインが整った記事一覧やカードリンクを作れる
  • 記事を更新すると、自動で一覧に反映されるのでメンテナンスが楽
  • プラグインに頼らず、テーマだけで多くのことができる

HTMLやCSSが得意でなくても、ショートコードなら1行書くだけで「新着一覧」「人気記事」「全記事一覧」などが作れます。自分で一からデザインしなくていいので、作業時間も短くなり、ミスも減ります。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか?

  1. 稼げる広告
  2. 稼げるキーワード
  3. 稼げるライティング

これら全部を暴露します。

まずはあっさり10万稼ぐためのメルマガ

 

cocoon ショートコードの基本ルールと使い方

ごとう
ごとう

ここからは、Cocoonのショートコードに共通する基本ルールと、WordPressの編集画面での挿入方法をまとめます。細かいショートコードの種類に入る前に、共通の考え方を軽く押さえておきましょう。

ショートコードの書き方の基本ルール

Cocoonに限らず、WordPressのショートコードには共通のルールがあります。

  • 「[](角括弧)」で囲んで書く
  • ショートコード名のあとに、半角スペースでオプション(属性)を書く
  • オプションは「名前=値」の形で指定する

イメージがつきやすいように、new_listを例にしてみます。

よく出てくるオプションを表に整理すると、次のような感じです。

オプション名 意味
count 表示する件数 count=”5″
cats 表示するカテゴリID cats=”3,5″
tags 表示するタグID tags=”2,10″
type カードのデザイン種類 type=”large_thumb”
children 子カテゴリを含めるかどうか children=”1″
class 追加するCSSクラス名 class=”two-column”

一覧系のショートコード(new_listやpopular_listなど)では、特にcount・cats・type・classあたりをよく触ることになります。

ブロックエディタでのショートコード挿入手順

「ショートコードって、どこから入れればいいの?」という人のために、ブロックエディタでの基本的な流れを書いておきます。

通常の「段落」ブロックにショートコードを書いても動きますが、あとから編集するときに見分けがつきにくくなります。私は「ショートコード」ブロックを使っておいた方が、後日見返したときに管理しやすいと感じています。

よくあるミスと注意点

Cocoonのショートコードを使いはじめたころ、私がよくやらかしたミスをいくつか挙げておきます。

  • 全角スペースや全角英数字を混ぜてしまう
  • ダブルクォーテーションの閉じ忘れ
  • catsに「ID」ではなく「スラッグ」を入れてしまう
  • オプションとオプションの間の半角スペースを入れ忘れる

表示がおかしいときは、まずショートコードの「スペル」「全角・半角」「”の閉じ忘れ」を一度落ち着いて見直してみてください。多くの場合、設定の問題というより、このあたりの入力ミスが原因になっていることが多いです。

 

【ちょっと一息♪】

私の妻がどうやって7日で初報酬を得て5万円の不労所得を得られるようになったか?
その全貌を知りたくありませんか?

今すぐその秘密を見る

記事一覧を作るCocoonのショートコード活用テクニック

ごとう
ごとう

ここからは、使用頻度が高い「記事一覧系ショートコード」に絞って解説します。新着記事一覧、人気記事一覧、お知らせ一覧、全記事一覧を作れるようになると、一気にサイトが整理された印象になります。

【WordPress】ブログカードの基礎とカスタマイズ実践テクニック
wordpressオリジナルテーマの作り方と自作3パターン
WordPressクラシックエディタ切り替え完全ガイド|おすすめ設定3パターン
WordPressのログイン履歴の見方と不正ログインを防ぐ5つのコツとは?
WordPressで企業・コーポレートサイトを作るおすすめ無料テーマは?
で新着記事一覧を作る

new_listは、その名の通り「新着記事一覧」を表示するCocoonのショートコードです。

オプションを付けることで、表示件数やデザインを好みに合わせて変えられます。よく使うパターンをまとめると、こんな感じです。

目的 記述例 補足
最新5件をサムネ付き一覧で表示
【WordPress】ブログカードの基礎とカスタマイズ実践テクニック
wordpressオリジナルテーマの作り方と自作3パターン
WordPressクラシックエディタ切り替え完全ガイド|おすすめ設定3パターン
WordPressのログイン履歴の見方と不正ログインを防ぐ5つのコツとは?
WordPressで企業・コーポレートサイトを作るおすすめ無料テーマは?
トップページの基本的な新着欄
特定カテゴリだけ新着表示
A8ネットはアメブロで使える?アメブロに貼れないときの3つの稼ぎ方
A8ネット×TikTokアフィリエイト入門|仕組みから始め方まで10ステップで解説
A8ネットの即時支払いのやり方!振込はいつ?支払時期の目安も解説
A8ネットをインスタで使うやり方入門|ストーリーへの貼り方も解説
A8ネットの友達紹介とは?仕組みとやさしい始め方ガイド
カテゴリ別のトップページなどで便利
大きなサムネイルで目立たせる
【WordPress】ブログカードの基礎とカスタマイズ実践テクニック
wordpressオリジナルテーマの作り方と自作3パターン
WordPressクラシックエディタ切り替え完全ガイド|おすすめ設定3パターン
WordPressのログイン履歴の見方と不正ログインを防ぐ5つのコツとは?
ランディングページ風に見せたいとき
2カラムでタイル状に表示
【WordPress】ブログカードの基礎とカスタマイズ実践テクニック
wordpressオリジナルテーマの作り方と自作3パターン
WordPressクラシックエディタ切り替え完全ガイド|おすすめ設定3パターン
WordPressのログイン履歴の見方と不正ログインを防ぐ5つのコツとは?
WordPressで企業・コーポレートサイトを作るおすすめ無料テーマは?
【WordPress】Localでテスト環境を作る手順を分かりやすく解説【初心者必見】
CSS側で2カラム用のクラスを用意しておく
ランダムで記事を入れ替える
【WordPress】ブログカードの基礎とカスタマイズ実践テクニック
wordpressオリジナルテーマの作り方と自作3パターン
WordPressクラシックエディタ切り替え完全ガイド|おすすめ設定3パターン
WordPressのログイン履歴の見方と不正ログインを防ぐ5つのコツとは?
毎回違う記事を見せたいときに使いやすい

トップページの新着欄やカテゴリ別の最新記事ブロックは、ほぼnew_listだけで作れます。Cocoonのショートコードの中でも、真っ先に覚えておきたい存在です。

ライブドアブログをSearch Consoleに登録してサイトマップ送信する方法
WordPressでXを埋め込む方法と失敗しないコツ・注意点
SWELLの見出しデザインとCSSカスタマイズ|やりすぎない8テクニック
SWELLのスライダー設定マニュアル|初心者がつまずく5ポイント
【Cocoon】アフィリエイト広告の貼り方!ボタンやタグ設定も【A8で解説】
で人気記事一覧を表示する

popular_listは、アクセス数などをもとに「人気記事一覧」を表示してくれるショートコードです。

こちらも、countやcatsなどのオプションでカスタマイズできます。

人気記事ランキングは、読者の興味を引きやすく、内部リンク強化にもつながります。トップページの下部やサイドバーに設置しておくと、過去記事にも自然にアクセスが流れやすくなります。

固定ページ

投稿一覧

カテゴリー

でお知らせ・全記事一覧を作る

info_listは「タイトル中心のシンプルな新着情報一覧」、sitemapは「サイト全体の全記事一覧」を表示できるショートコードです。

ショートコード 表示される内容 おすすめの設置場所
新着記事のタイトルと日付など サイドバーやヘッダー下部

固定ページ

投稿一覧

カテゴリー

サイト全体の全記事や固定ページの一覧 サイトマップ用の固定ページ

info_listは、タイトル中心のスッキリした一覧なので、「お知らせ」「更新情報」のような内容をまとめるのに向いています。

sitemapは、1行のショートコードで全記事一覧を作ってくれるので、サイトマップページや「全記事一覧」として別ページを用意したいときにとても便利です。内部リンクの塊にもなるので、読者にとっても検索エンジンにとってもサイト構造が分かりやすくなります。

 

★ちょっとだけ宣伝させてください★

「ブログで10万」と聞くと、

  1. センスが必要
  2. 文章力が要る

と思われがちですが、実は「勝ちパターン」を知っているかどうかだけなんです。

ブログで10万稼ぐ勝ちパターンとは

 

 

 

【稼げるキーワード教えます】
▼  ▼  ▼
ba15a

 

 

 

内部リンクとブログカード系ショートコードで回遊率アップ

ごとう
ごとう

次に、内部リンクや導線づくりに役立つショートコードを見ていきます。ブログカードやナビカードをうまく使うと、「読み終わりで離脱されてしまう」という状態を減らしやすくなります。

ブログカードショートコードの使い方

Cocoonには、URLを貼るだけでカード型リンクに変換してくれるブログカード機能があります。さらに、ショートコード版のブログカードを使うこともできます。

  • ショートコード版ブログカードの基本形
    記事のURL

通常のURL貼り付けと、ショートコード版の違いを整理すると、次のような感じです。

種類 記述例 メリット
通常のブログカード 記事URLをそのまま1行で書く 入力が簡単で分かりやすい
ショートコード版 https://〜 テーマ設定の影響を受けにくく管理しやすい
説明文との併用 〜の前後に説明文 クリックしてほしい理由を一言添えられる

通常のブログカードがうまく表示されないケースでも、ショートコード版で解決することがあります。関連記事や体験談へのリンクを置くときは、単なるテキストリンクより、カード形式のほうが目に入りやすいのでおすすめです。

ナビカードショートコードとメニュー連動

ナビカードは、Cocoon独自の「大きめのカード型リンク」をまとめて表示できる機能です。たとえば、次のような使い方ができます。

  • 「はじめての方へ」「プロフィール」「人気記事」を横並びで配置
  • アフィリエイト案件の紹介記事をまとめてカード表示
  • 特集記事だけをピックアップして、トップページで目立たせる

ショートコードのイメージは次のとおりです。

事前に「外観 → メニュー」でナビカード用のメニューを作成し、そのメニュー名をショートコード側で指定します。トップページやサイドバー上部に置いておくと、「このブログではこういう記事が読めるんだな」という全体像がひと目で伝わります。

記事内導線レシピ(ブログカード+一覧系ショートコード)

内部リンクを増やしたいときに、私がよく使っている導線の作り方をいくつか紹介します。

Cocoonのショートコードは、単体で見るとただの「パーツ」ですが、組み合わせて使うと「導線の流れ」をデザインできるようになります。この感覚をつかめると、1記事あたりの価値もぐっと上がります。

広告・装飾系のcocoon ショートコードで収益と読みやすさを両立

ごとう
ごとう

ここからは、広告や装飾に関係するCocoonのショートコードをまとめて紹介します。アフィリエイトや収益化を意識している人は、知っておくと記事作成がかなり楽になります。

で広告表示をショートコード化する

Cocoonのショートコードを使うと、あらかじめ登録した広告コードを、好きな場所に手軽に差し込めます。

  • だけで、設定しておいた広告を表示
  • 複数の広告位置を用意すれば、用途別に使い分け可能

を使うメリットは次のとおりです。

  • 記事本文に生の広告コードを書かなくていいので、編集画面がスッキリする
  • テーマの「広告設定」を変更するだけで、一括で広告を差し替えられる
  • ショートコードの位置を変えるだけで、配置の微調整がしやすい

広告位置を「記事上」「本文中」「記事下」など複数用意するときは、ショートコードをうまく使うと管理がかなり楽になります。

商品リンク系ショートコード(Amazon・楽天など)

Cocoonでは、Amazonや楽天の商品リンクをショートコードで表示できる機能も用意されています。

  • 商品URLやIDを指定するだけで、画像つきの商品カードを表示
  • ボタン表示やテキストの有無を、オプションで切り替え

具体的な設定方法は、利用しているASPやAPIによって異なるためここでは細かく触れませんが、ポイントは次の2つです。

  • まずはCocoonの標準機能でどこまでできるか試してみる
  • 画像やボタンの表示が、各サービスの規約に沿っているか確認する

レビュー記事や比較記事を書くとき、デザインがバラバラだと読みにくくなります。商品リンクをCocoonのショートコードで整えておくと、見た目がそろって読みやすいページになります。

プロフィール・ボックス・タイムラインなどの装飾ショートコード

Cocoonには、プロフィールボックスやボックス装飾、タイムライン表示など、読みやすさを高めるショートコードも揃っています。

  • 記事下にプロフィールボックスを表示して、書き手の情報を伝える
  • 手順や流れをタイムライン形式で見せる
  • 重要な部分だけボックスや吹き出しで目立たせる

こういった装飾系ショートコードは、「毎回デザインを考えるのがつらい」という人ほど効果的です。一度、自分なりのパターンを決めておくと、記事を書くスピードもかなり変わってきます。

cocoon ショートコードのトラブル事例とチェックポイント

ごとう
ごとう

便利なCocoonのショートコードですが、入力や設定を少し間違えると「思っていた表示にならない」こともあります。ここでは、よくあるトラブルと確認すべきポイントを整理します。

ショートコードがそのまま文字で出るとき

よくあるのが、「

【WordPress】ブログカードの基礎とカスタマイズ実践テクニック
wordpressオリジナルテーマの作り方と自作3パターン
WordPressクラシックエディタ切り替え完全ガイド|おすすめ設定3パターン
WordPressのログイン履歴の見方と不正ログインを防ぐ5つのコツとは?
WordPressで企業・コーポレートサイトを作るおすすめ無料テーマは?
がそのまま文字として表示される」というパターンです。

症状 よくある原因 チェックする場所
【WordPress】ブログカードの基礎とカスタマイズ実践テクニック
wordpressオリジナルテーマの作り方と自作3パターン
WordPressクラシックエディタ切り替え完全ガイド|おすすめ設定3パターン
WordPressのログイン履歴の見方と不正ログインを防ぐ5つのコツとは?
WordPressで企業・コーポレートサイトを作るおすすめ無料テーマは?
がそのまま表示される
ショートコードのスペルミス new_listのつづり、全角・半角
URLがリンクにならない ブログカード設定やショートコードの使い方の問題 Cocoon設定のブログカード関連の項目
何も表示されない キャッシュや表示条件の設定 キャッシュプラグインや条件分岐の有無

また、「コードブロック」にショートコードを書いてしまうと、WordPress側でショートコードとして認識されません。ショートコードブロックや通常の段落ブロックに書いているか、一度確認してみてください。

デザイン崩れ・横並びにならないとき

new_listやpopular_listを横並びや2カラムで表示したいのに、思ったようにならないこともあります。この場合は、次の3点を見直すと原因が見つかりやすいです。

レイアウト崩れは、「ショートコード側の指定」と「CSS側のスタイル」がセットで動いていることが多いです。「classで名前を付ける → CSSで見た目を整える」という二段構えで考えると、調整しやすくなります。

ブログカードが表示されないとき

ブログカードがうまく表示されないときは、テーマ設定やURLの書き方が影響しているケースが多いです。次の点をチェックしてみてください。

  • Cocoon設定のブログカード関連の項目が有効になっているか
  • URLを1行だけで書いているか(同じ行に余計な文字を混ぜていないか)
  • 外部サイトの場合、そのサイト側の仕様で埋め込みが制限されていないか
  • ショートコード版 〜 を使っても同じ症状が出るか

通常のURL貼り付けでうまくいかない場合でも、ショートコード版blogcardに切り替えることで解決することがあります。

表示が重い・ページが長くなりすぎるとき

ショートコードは便利ですが、欲張って詰め込みすぎるとページが重く感じられたり、縦にやたら長いページになってしまいます。

  • new_listやpopular_listのcountを多くしすぎていないか
  • 同じショートコードをページ内で何度も繰り返していないか
  • スマホで見たときにスクロールが長すぎないか

記事一覧ショートコードは、「トップページに新着20件+人気20件+カテゴリ別一覧…」のように詰め込みすぎると、読者が途中で疲れてしまいます。最初のうちは、「このページで見せる一覧は2種類まで」といった軽いルールを決めておくとバランスを取りやすいです。

 


★初心者さん必見★

「あと3ヶ月早くこの情報を知りたかった…」

そうならないために、今すぐ実践したいノウハウをギュッと一つのメルマガに詰め込みました。

無料で読めるうちに受け取っておいてください。

あっさり10万稼ぐためのメルマガ

よくある質問(cocoon ショートコード編)

ごとう
ごとう

最後に、Cocoonのショートコードについてよく聞かれる疑問を、Q&A形式でまとめました。

Q1.Cocoonのショートコードはブロックエディタでも問題なく使えますか?

A1.はい、ブロックエディタでもCocoonのショートコードは普通に使えます。「ショートコード」ブロックを挿入して、その中に

【WordPress】ブログカードの基礎とカスタマイズ実践テクニック
wordpressオリジナルテーマの作り方と自作3パターン
WordPressクラシックエディタ切り替え完全ガイド|おすすめ設定3パターン
WordPressのログイン履歴の見方と不正ログインを防ぐ5つのコツとは?
WordPressで企業・コーポレートサイトを作るおすすめ無料テーマは?
ライブドアブログをSearch Consoleに登録してサイトマップ送信する方法
WordPressでXを埋め込む方法と失敗しないコツ・注意点
SWELLの見出しデザインとCSSカスタマイズ|やりすぎない8テクニック
SWELLのスライダー設定マニュアル|初心者がつまずく5ポイント
【Cocoon】アフィリエイト広告の貼り方!ボタンやタグ設定も【A8で解説】
などを書けば機能します。段落ブロックに直接書いても動きますが、後から編集するときに見分けがつきにくくなるので、専用ブロックにまとめておくと管理しやすいです。

Q2.Cocoonのショートコードで記事一覧を増やすと、SEO的に不利になりませんか?

A2.適切な数であれば、Cocoonのショートコードで作る記事一覧は、内部リンクを増やす役割を果たすのでプラスに働きやすいです。ただし、1ページにnew_listやpopular_listを大量に置いたり、countを大きくしすぎると、ページが重くなってユーザー体験が悪くなる可能性があります。「このページのゴールは何か?」を考えながら、必要な一覧だけを絞って配置するのがコツです。

Q3.Cocoonのショートコードを使わず、プラグインで一覧を作るのはアリですか?

A3.プラグインを使うのも選択肢のひとつですが、まずはCocoonのショートコードで試してみるのがおすすめです。テーマ標準の機能であれば、デザインの統一が取りやすく、余計なプラグインを増やさずに済みます。どうしてもCocoonのショートコードでは実現しづらい部分だけ、ピンポイントでプラグインに任せると、サイト全体がスッキリまとまりやすくなります。

まとめ:cocoon ショートコードを今日から使いこなす

この記事の内容を簡単に振り返ります

  • Cocoonのショートコードは、new_list・popular_list・info_list・sitemap・blogcard・navi_listを押さえておけば、日常のブログ運営で困りにくい
  • new_listとpopular_listで、新着記事一覧と人気記事一覧を作るのが第一歩
  • blogcardとnavi_listを組み合わせると、自然な内部リンク導線を作りやすい
  • や商品リンク系ショートコードを使うと、広告やアフィリエイトリンクの管理が楽になる
  • 表示がおかしいときは「スペルミス」「class指定」「テーマ設定」の3点から順に確認する

今日からできる最初の一歩としては、「実験用の固定ページを1つ作って、自分用のショートコード集ページにしてしまう」ことをおすすめします。

  • new_list・popular_list・info_list・sitemap
  • blogcard・navi_list・

このあたりのショートコードをそのページに並べて貼りつけて、どんな表示になるかを一度すべて確認してみてください。一度「自分専用のショートコード図鑑」ができてしまえば、あとはそこからコピペするだけで、どの記事でも同じクオリティのレイアウトを再現できるようになります。

 

【深呼吸タイム】

稼ぐために必要な3つのポイントを知っていますか?

  1. 稼げる広告
  2. 稼げるキーワード
  3. 稼げるライティング

これら全部を暴露します。

まずはあっさり10万稼ぐためのメルマガ

 

 

 

記事を読んだらコチラ
▼  ▼  ▼
ba15a