【Cocoon(コクーン)】拡張スタイル・ショートコード一覧

wordpress theme - cocoon

わいひら@寝ログさん が、作成されている超高機能で、無料の WordPressテーマ「Cocoon(コクーン)」。

吹き出しや補足説明ボックスなど、様々な事ができるようになっているのですが、基本的にビジュアルエディターで利用できるようになっています。

しかし、私はテキストエディター派!

なので、拡張スタイル・ショートコードの HTML 記述方法をまとめる事にしました。

設定関連については、紹介していません。

  1. デザイン
    1. URL をブログカード化せずに文字列として表示させる方法
    2. 記事作成に使える拡張スタイル。インライン編
    3. 記事作成に使える拡張スタイル。ボタン編
    4. 記事作成に使える拡張スタイル。バッジ編
    5. 拡張スタイル「白抜きボックス」の表示サンプル
    6. 拡張スタイル「アイコンボックス」と「案内ボックス」の表示サンプル
    7. 拡張スタイル「付箋風ボックス」の表示サンプル
    8. 拡張スタイル「タブボックス」の表示サンプル
    9. 囲みブログカード拡張スタイルの使い方
    10. Cocoon ランキング機能の「詳細ページ」と「公式ページ」の文言を変更する方法
    11. 囲みボタン機能の使い方。アフィリエイトタグ利用向き
    12. マイクロコピー拡張スタイルの使い方。ボタン周りの販促文に
    13. 検索を促す検索ボックスをスタイルで表示する方法
    14. 記事内を2カラム・3カラム・4カラムに分ける方法
  2. ショートコード
    1. ブログカードショートコードの使い方
    2. ランキングをショートコードで本文中に挿入する方法
    3. 簡単なサイトマップページを生成できる sitemap ショートコードの使い方
    4. プロフィールボックスを表示するショートコードの利用方法
    5. 人気記事一覧を表示するショートコードの利用方法
    6. 新着記事一覧を表示するショートコードの利用方法
    7. ○年前といったような、相対的経過年を表示する yago ショートコードの使い方
    8. 現在の年齢を計算して表示してくれる age ショートコードの使い方
    9. 目次をショートコードで好きな場所に表示させる方法
    10. レーティングスター(評価スター)ショートコードの利用方法
    11. Amazon 商品リンクの初期設定方法と使い方
    12. 楽天商品リンクの初期設定方法と使い方
    13. ショートコードで広告を本文中の好きな場所に表示する方法
    14. 〇年前、〇ヶ月前といった相対的時間経過を表現する ago ショートコードの使い方
    15. タイムラインショートコードの利用方法
    16. ログインユーザーのみにコンテンツを表示するログインユーザーオンリーショートコードの使い方
  3. 機能
    1. YouTube 動画読み込みを高速化させる方法
    2. アフィリエイトタグの一元管理機能の使い方
    3. テンプレート文(定型文)を登録して使い回す方法
  4. Cocoon の独自機能・仕様一覧
スポンサーリンク

デザイン

URL をブログカード化せずに文字列として表示させる方法

URL の先頭に半角文字列の「!(エクスクラメーション)」マークを挿入するだけ

https://seo.info-station.net/

記事作成に使える拡張スタイル。インライン編

文章内を<span class="marker-under">黄色アンダーラインマーカー</span>にする

文章内を黄色アンダーラインマーカーにする

太字・アンダーライン・マーカーなど、複数のカラーあり。

記事作成に使える拡張スタイル。インライン編

記事作成に使える拡張スタイル。ボタン編

<a class="btn btn-indigo btn-m">ボタンテキスト</a>

ボタンテキスト

複数のサイズ・カラーあり。

記事作成に使える拡張スタイル。ボタン編

記事作成に使える拡張スタイル。バッジ編

<span class="badge badge-red">参照</span>

参照

拡張スタイル「白抜きボックス」の表示サンプル

<div class="blank-box bb-red">
白抜きボックス(赤色)
</div>
白抜きボックス(赤色)

拡張スタイル「アイコンボックス」と「案内ボックス」の表示サンプル

<div class="question-box">
クエスチョン
クエスチョン
</div>
クエスチョン
クエスチョン

拡張スタイル「付箋風ボックス」の表示サンプル

<div class="blank-box sticky st-yellow">
付箋風ボックス(オレンジ)
</div>
付箋風ボックス(オレンジ)

拡張スタイル「タブボックス」の表示サンプル

<div class="blank-box bb-tab bb-check">
タブボックスのサンプル
</div>
タブボックスのサンプル

囲みブログカード拡張スタイルの使い方

Cocoon ランキング機能の「詳細ページ」と「公式ページ」の文言を変更する方法

子テーマの functions.php に以下のコードをコピペ。

//ランキング詳細ページのキャプション変更
add_filter( 'cocoon_ranking_detail_page_caption', function (){
  return '詳細レビュー';
} );

//ランキング公式ページのキャプション変更
add_filter( 'cocoon_ranking_official_page_caption', function (){
  return '公式で詳しく見る';
} );

囲みボタン機能の使い方。アフィリエイトタグ利用向き

<span class="btn-wrap btn-wrap-blue btn-wrap-m">
<a href="URL" target="_blank" rel="nofollow">カラフルボックス</a>
</span>

マイクロコピー拡張スタイルの使い方。ボタン周りの販促文に

<div class="micro-top micro-left">圧倒的にSEOに強い!</div>
<p>
<span class="sankou">公式</span>
<a href="/" rel="noopener" target="_blank">ワードプレステンプレート 腎威 7 <i class="fa fa-external-link"></i></a>
</p>

<div class="micro-top micro-balloon micro-balloon-center">圧倒的にSEOに強い!</div>
<div class="btn-wrap btn-wrap-red btn-wrap-l">
<a href="/" rel="noopener" target="_blank">ワードプレステンプレート 腎威 7</a>
</div>

「テキスト」「吹き出し」タイプ・表示位置など、オプションあり。

マイクロコピー拡張スタイルの使い方。ボタン周りの販促文に

検索を促す検索ボックスをスタイルで表示する方法

<div class="search-form">
   <div class="sform">Cocoon ダウンロード</div>
   <div class="sbtn">検索</div>
</div>
Cocoon ダウンロード
検索

記事内を2カラム・3カラム・4カラムに分ける方法

・2カラム(1:1)

<div class="column-wrap column-2">
<div class="column-left">

ひだり

</div>
<div class="column-right">

みぎ

</div>
</div>

ひだり

みぎ

・2カラム(1:2)

<div class="column-wrap column-2 column-2-3-1-2">
<div class="column-left">

ひだり

</div>
<div class="column-right">

みぎ

</div>
</div>

ひだり

みぎ

・2カラム(2:1)

<div class="column-wrap column-2 column-2-3-2-1">
<div class="column-left">

ひだり

</div>
<div class="column-right">

みぎ

</div>
</div>

ひだり

みぎ

・2カラム(1:3)

<div class="column-wrap column-2 column-2-4-1-3">
<div class="column-left">

ひだり

</div>
<div class="column-right">

みぎ

</div>
</div>

ひだり

みぎ

・2カラム(3:1)

<div class="column-wrap column-2 column-2-4-3-1">
<div class="column-left">

ひだり

</div>
<div class="column-right">

みぎ

</div>
</div>

ひだり

みぎ

・3カラム

<div class="column-wrap column-3">
<div class="column-left">

ひだり

</div>
<div class="column-center">

真ん中

</div>
<div class="column-right">

みぎ

</div>
</div>

ひだり

真ん中

みぎ

・4カラム

<div class="column-wrap column-2">
<div class="column-left">
<div class="column-wrap column-2">
<div class="column-left">

ひだり1

</div>
<div class="column-right">

ひだり2

</div>
</div>
</div>
<div class="column-right">
<div class="column-wrap column-2">
<div class="column-left">

みぎ1

</div>
<div class="column-right">

みぎ2

</div>
</div>
</div>
</div>

ショートコード

※ 文字列前後にある、半角スペースを取り除いて使用

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

Cocoon 設定の「ブログカード」タブで、設定しておけば、URL を書くだけででブログカードになります。

しかし、以下の記述をすれば「ブログカード表示」が無効になっていたとしても、強制的に表示されます。

[ https://seo.info-station.net/ ]

ランキングをショートコードで本文中に挿入する方法

簡単なサイトマップページを生成できる sitemap ショートコードの使い方

以下のショートコードを、入力するだけ。

[ sitemap ]

固定ページ・投稿ページへのリンクを表示するかなど、オプションあり。

簡単なサイトマップページを生成できる sitemap ショートコードの使い方

プロフィールボックスを表示するショートコードの利用方法

以下のショートコードを、入力するだけ。

[ author_box ]

Webエンジニアを15年以上やってる、アラフォーのおっさん

こぞんをフォローする

人気記事一覧を表示するショートコードの利用方法

新着記事一覧を表示するショートコードの利用方法

○年前といったような、相対的経過年を表示する yago ショートコードの使い方

以下のショートコードを、入力するだけ。

君が生まれてもう[ yago from="2011-01-20" ]年が経つ

君が生まれてもう8年が経つ

現在の年齢を計算して表示してくれる age ショートコードの使い方

以下のショートコードを、入力するだけ。

[ age birth="2010-02-10" ]
9歳

目次をショートコードで好きな場所に表示させる方法

以下のショートコードを、目次を表示させたい箇所に挿入するだけ。

[ toc ]

レーティングスター(評価スター)ショートコードの利用方法

[ star rate="4.5" ]
4.5

評価の最大値・数値表示切り替えなどのオプションあり。

レーティングスター(評価スター)ショートコードの利用方法

Amazon 商品リンクの初期設定方法と使い方

楽天商品リンクの初期設定方法と使い方

ショートコードで広告を本文中の好きな場所に表示する方法

以下のショートコードを、入力するだけ。

[ ad ]
スポンサーリンク

〇年前、〇ヶ月前といった相対的時間経過を表現する ago ショートコードの使い方

Google が設立されてから[ ago from="1998/09/04" ]が経つ。

Google が設立されてから21年が経つ。

タイムラインショートコードの利用方法

[ timeline title="サイト開設手順" ]
  [ ti label="STEP1" title="レンタルサーバに登録する" ]まずはサイトを始めるスペースを借りる必要があります。

  おすすめのレンタルサーバーは、サーバーAとサーバーBです。[ /ti ]
  [ ti label="STEP2" title="独自ドメインを取得する" ]サイト運営をする上で、独自ドメインを取得は、今や必須といえるでしょう。

  ドメインを取得するには…[ /ti ]
  [ ti label="STEP3" title="WordPressのインストール" ]今であれば、レンタルサーバーに簡単インストール機能がついています。レンタルサーバーのヘルプでWordPressインストール方法を探してみましょう。[ /ti ]
  [ ti label="STEP4" title="WordPressテーマのインストール" ]WordPressテーマはお好きなものを利用すると良いでしょう。ちなみに当サイトはCocoonを利用しています。[ /ti ]
[ /timeline ]
サイト開設手順
  • STEP1
    レンタルサーバに登録する
    まずはサイトを始めるスペースを借りる必要があります。

    おすすめのレンタルサーバーは、サーバーAとサーバーBです。

  • STEP2
    独自ドメインを取得する
    サイト運営をする上で、独自ドメインを取得は、今や必須といえるでしょう。

    ドメインを取得するには…

  • STEP3
    WordPressのインストール
    今であれば、レンタルサーバーに簡単インストール機能がついています。レンタルサーバーのヘルプでWordPressインストール方法を探してみましょう。
  • STEP4
    WordPressテーマのインストール
    WordPressテーマはお好きなものを利用すると良いでしょう。ちなみに当サイトはCocoonを利用しています。

ログインユーザーのみにコンテンツを表示するログインユーザーオンリーショートコードの使い方

[ login_user_only msg="こちらのコンテンツはログインユーザーのみに表示されます。" ]
コンテンツ(HTML も入力可能)
[ /login_user_only ]

機能

YouTube 動画読み込みを高速化させる方法

YouTube の動画 URL をエディターに挿入するだけ

https://www.youtube.com/watch?v=0E00Zuayv9Q
PPAP(Pen-Pineapple-Apple-Pen Official)ペンパイナッポーアッポーペン/PIKOTARO(ピコ太郎)

アフィリエイトタグの一元管理機能の使い方

まず、アフィリエイトタグを登録します。

その後、以下のショートコードを挿入。

[ affi id=1 ]
Simplicity | 内部SEO施策済みのシンプルな無料Wordpressテーマ

テンプレート文(定型文)を登録して使い回す方法

まず、テンプレート文を登録します。

その後、以下のショートコードを挿入。

[ temp id=1 ]

Wordpressのfunctions.phpを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

Cocoon の独自機能・仕様一覧

コメント