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

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

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

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

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

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

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>

<div class="blogcard-type bct-together">

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

</div>

SEOメモ｜SEO対策やプログラミングの情報を、分かりやすく紹介！

実務経験15年以上のエンジニアが、SEO対策やプログラミングに関する情報を、極力分かりやすく紹介するブログ｜SEO 対策を勉強する

seo.info-station.net

子テーマの 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>

・2カラム（1：1）

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

ひだり

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

みぎ

</div>
</div>

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

ひだり

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

みぎ

</div>
</div>

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

ひだり

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

みぎ

</div>
</div>

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

ひだり

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

みぎ

</div>
</div>

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

ひだり

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

みぎ

</div>
</div>

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

ひだり

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

真ん中

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

みぎ

</div>
</div>

<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/ ]

SEOメモ｜SEO対策やプログラミングの情報を、分かりやすく紹介！

実務経験15年以上のエンジニアが、SEO対策やプログラミングに関する情報を、極力分かりやすく紹介するブログ｜SEO 対策を勉強する

seo.info-station.net

まずはランキングを作成！

商品・サービスランキングを作成して配置する方法

商品やサービスなどの独自ランキングを作成してウィジェットで配置する方法の紹介です。ランキング機能の使い方。

wp-cocoon.com

[ rank id=1 ]

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

[ sitemap ]

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

[ author_box ]

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

[ popular_list ]

WordPressテーマ「Cocoon（コクーン）」の最低限やっておきたい初期設定

2018.12.172019.06.26

WordPressテーマ「Luxeritas（ルクセリタス）」の初期設定

2018.07.282019.06.26

robots.txtによってURLがブロックされている時の対処方法

2018.08.202018.10.20

【WordPress（ワードプレス）】必ずやっておきたい初期設定

2018.12.112019.06.26

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

2019.01.172019.02.01

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

[ new_list ]

キーワード選定に、めちゃくちゃ役立つ便利なツールを紹介！

2019.09.042019.10.10

Google Search Console でサイトマップを送信しよう！【WordPress版】

2019.09.03

【アフィリエイト】導入文には、気をつけろ！軽く見ていると痛い目をみるぞ！

2019.07.312019.08.15

【アフィリエイト】ファーストビューなめんなよ！ 売れるか・売れないかは1秒で決まる！

2019.07.042019.08.01

【アフィリエイト】キーワードを選定するときに、勉強になる記事！

2019.05.272019.06.11

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

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

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

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

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

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

[ toc ]

[ star rate="4.5" ]

[ amazon asin="B079JJZXKV" kw="WordPressの教科書" ]

[ rakuten id="dyson:10000338" kw="ダイソン v10" ]

【楽天ランキング1位】 Dyson Cyclone V10 Fluffy サイクロン式 コードレス掃除機 dyson SV12 FF LF【フロアドックセットではありません】

Dyson公式 楽天市場店

Amazon

楽天

Yahoo!ショッピング

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

[ ad ]

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

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

[ 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 ]

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

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

https://www.youtube.com/watch?v=0E00Zuayv9Q

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

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

[ affi id=1 ]

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

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

[ temp id=1 ]

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