【WordPress】Cocoonの記事を装飾するデザイン一覧

スポンサーリンク

Cocoon 装飾タグ

Cocoonには記事を装飾するタグがたくさんあって、どれがどんなデザインかがわからなくなる。

ということでまとめます。

Cocoon バージョン2.2.7.4 時点です。
スポンサーリンク
  1. スタイル
    1. インライン
    2. マーカー
    3. フォントサイズ
    4. ボックス(アイコン)
    5. ボックス(案内)
    6. ボックス(白抜き)
    7. ボックス(タブ)
      1. ボックス(タブ)> チェック
      2. ボックス(タブ)> コメント
      3. ボックス(タブ)> ポイント
      4. ボックス(タブ)> ティップス
      5. ボックス(タブ)> ヒント
      6. ボックス(タブ)> ピックアップ
      7. ボックス(タブ)> ブックマーク
      8. ボックス(タブ)> メモ
      9. ボックス(タブ)> ダウンロード
      10. ボックス(タブ)> ブレイク
      11. ボックス(タブ)> Amazon
      12. ボックス(タブ)> OK
      13. ボックス(タブ)> NG
      14. ボックス(タブ)> GOOD
      15. ボックス(タブ)> BAD
      16. ボックス(タブ)> プロフィール
    8. ボックス(付箋風)
    9. バッジ
    10. マイクロコピー
      1. マイクロコピー > テキスト(上)
      2. マイクロコピー > テキスト(下)
      3. マイクロコピー > 吹き出し(上)
      4. マイクロコピー > テキスト(下)
    11. ボタン
    12. 囲みボタン
    13. 囲みブログカードラベル
      1. 関連記事
      2. 参考記事
      3. 参考リンク
      4. 人気記事
      5. あわせて読みたい
      6. 詳細はこちら
      7. チェック
      8. ピックアップ
      9. 公式サイト
      10. ダウンロード
  2. 吹き出し
  3. テンプレート
  4. アフィリエイト
  5. タグ
    1. 検索フォーム風
    2. トグルボックス
    3. ふりがな(ルビ)
  6. ショートコード
    1. 広告[ad]
    2. 新着記事一覧
    3. 人気記事一覧
    4. ナビカード一覧
    5. プロフィールボックス
    6. Amazon商品リンク
    7. Amazon商品リンク(商品タイトル変更)
    8. Amazon商品リンク(全ボタン非表示)
    9. 楽天商品リンク
    10. 楽天商品リンク(商品タイトル変更)
    11. 楽天商品リンク(全ボタン非表示)
    12. タイムライン・タイムラインアイテム
    13. 過去日時
    14. 過去年
    15. 年齢

スタイル

インライン

太字タグの<bold>と<strong>の違い

・bold → 太くする
・strong → 強調する

本装飾はbold。
WordPress標準の「B」ボタンや、⌘ command+Bはstrong。
boldは単に文字を太く見せるだけで、strongは指定した単語や文章を文脈的に強調する。boldにGoogleの評価は無いがstrongは評価される。良くも悪くもstrongは評価されるので太字はboldを使った方が無難という情報がある。

太字
赤字
赤太字
赤アンダーライン

青太字

緑太字
打ち消し線
キーボードキー

マーカー

黄色マーカー
赤色マーカー
青色マーカー
黄色アンダーラインマーカー
赤色アンダーラインマーカー
青色アンダーラインマーカー

フォントサイズ

省略。

ボックス(アイコン)

PCとスマホでデザインが違います。
補足情報(i)
補足情報(?)
注意喚起(!)
メモ
コメント
OK
NG
GOOD
BAD
プロフィール

ボックス(案内)

プライマリー(濃い水色)
セカンダリー(濃い灰色)
サクセス(薄い緑)
インフォ(薄い青)
ワーニング(薄い黄色)
デンジャー(薄い赤色)
ライト(白色)
ダーク(暗い灰色)

ボックス(白抜き)

灰色
黄色
赤色
青色
緑色

ボックス(タブ)

ボックス(タブ)> チェック

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> コメント

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> ポイント

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> ティップス

 

灰色・黄色・赤色・青色・緑色の5色

ちなみに「TIPS」とはアドバイスやコツという意味。筆者は英語が弱いので使い方に困ってしまうのでメモ。

ボックス(タブ)> ヒント

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> ピックアップ

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> ブックマーク

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> メモ

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> ダウンロード

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> ブレイク

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> Amazon

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> OK

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> NG

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> GOOD

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> BAD

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(タブ)> プロフィール

 

灰色・黄色・赤色・青色・緑色の5色

ボックス(付箋風)

灰色
黄色
赤色
青色
緑色

バッジ

オレンジ
レッド
ピンク
パープル
ブルー
グリーン
イエロー
ブラウン
グレー

マイクロコピー

リンクやボタンにコメントを付けたい時に使うものらしい。

マニュアルを見た方がわかりやすい。

マイクロコピー拡張スタイルの使い方。ボタン周りの販促文に。
コンバージョンリンク周りのコピーライティング用のスタイルです。使い方と表示例。

マイクロコピー > テキスト(上)

左側
中央
右側

マイクロコピー > テキスト(下)

公式サイトはこちら

左側

公式サイトはこちら

中央

公式サイトはこちら

右側

マイクロコピー > 吹き出し(上)

左側

公式サイトはこちら

中央

公式サイトはこちら

右側

公式サイトはこちら

マイクロコピー > テキスト(下)

公式サイトはこちら

右側

公式サイトはこちら

中央

公式サイトはこちら

右側

ボタン

レッド(小)

レッド(中)

レッド(大)

ピンク(小)

ピンク(中)

ピンク(大)

パープル(小)

パープル(中)

パープル(大)

ディープパープル(小)

ディープパープル(中)

ディープパープル(大)

インディゴ【紺色】(小)

インディゴ【紺色】(中)

インディゴ【紺色】(大)

ブルー(小)

囲みボタン

普通のボタンとの違いがわかりづらいので、以下のページを見た方が良いかも。

囲みボタン機能の使い方。アフィリエイトタグ利用向き。
手軽にボタンリンクを作成できる、囲み型ボタンスタイルの利用方法です。
リンク挿入直後のリンク部分を選択している状態のままボタン設定するとスムーズにできる。あとからリンク部分を選択して設定するのは難しいのでリンク挿入とセットで設定した方が良さそう。

レッド(小)

レッド(中)

ピンク(小)

ピンク(中)

パープル(小)

パープル(中)

ディープパープル(小)

ディープパープル(中)

インディゴ[紺色](小)

インディゴ[紺色](中)

ブルー(小)

ブルー(中)

ライトブルー(小)

ライトブルー(中)

シアン(小)

シアン(中)

ティール[緑色がかった青](小)

ティール[緑色がかった青](中)

グリーン(小)

グリーン(中)

ライトグリーン(小)

ライトグリーン(中)

ライム(小)

ライム(中)

イエロー(小)

イエロー(中)

アンバー[琥珀色](小)

アンバー[琥珀色](中)

オレンジ(小)

オレンジ(中)

ディープオレンジ(小)

ディープオレンジ(中)

ブラウン(小)

ブラウン(中)

グレー(小)

グレー(中)

囲みブログカードラベル

記事本文にURL(https://〜)を直接書いて囲む(リンクを貼った文を囲ってもダメ)

関連記事

参考記事

参考リンク

人気記事

あわせて読みたい

詳細はこちら

チェック

ピックアップ

公式サイト

ダウンロード

スポンサーリンク

吹き出し

男性(左)
女性(右)
ビジネスマン(左)
ビジネスウーマン(右)
悩むおじさん(左)
悩むおばさん(左)

悩むおばさん()なのにに表示されますが細かいことは気にしないでおこう。

男性医師(左)
女性医師(右)
どや顔男性(左)
どや顔女性(右)
スポンサーリンク

テンプレート

WordPressカスタマイズ注意文サンプル

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

スポンサーリンク

アフィリエイト

アフィリエイトタグサンプル

スポンサーリンク

タグ

カラムは省略。

検索フォーム風

キーワード
検索

トグルボックス

以下のボタンを押すと内容が出てくる。

 

トグルボックス内容

ふりがな(ルビ)

振り仮名ふりがな

スポンサーリンク

ショートコード

広告[ad]

事前に設定が必要。
Cocoon設定 > 広告タグ > [ad]ショートコード
 
スポンサーリンク

新着記事一覧

【ふるさと納税】生活必需品(日用品)で節約できる。選んだ返礼品など。
【コロナ体験談】感染は自分の問題だけじゃない。人を殺す可能性すらある。
【目次カスタマイズ】Easy Table of Contentsのデザイン
【大阪市内から車で1時間】兵庫県「足立いちご園」でいちご狩りをしてきました
【Mac版】よく使うショートカットキー早見表

人気記事一覧

Windows⇔Mac間で共有できるキーボードlogicool「K780」のレビュー!
「自分には1つもいいところがない」と思っているあなたへ。誰にでもいいところはあるぞ。
Windows10|「Kernel-Power(ID:41)」の原因は電源故障でした(通称KP41病)
GeForceExperienceの『インスタントリプレイ』が超便利!
【マクドナルド】スマホアプリ「KODO」で無料クーポンを使おう!

ナビカード一覧

任意の記事一覧を表示させる時に使用。

意図した記事一覧を作成できる「ナビカード」ショートコードの使い方
サイト訪問者を的確に誘導するために、意図したリンクリストを作成するショートコードの使い方です。

プロフィールボックス

この記事を書いた人
アバター
管理人をフォローする

Amazon商品リンク

ASIN Amazonの商品ページで取得(B08PP8T15Hのような番号)
キーワード 該当商品を見つけるためのキーワード

Amazon商品リンク(商品タイトル変更)

Amazon商品リンク(全ボタン非表示)

楽天商品リンク

省略。

楽天商品リンク(商品タイトル変更)

省略。

楽天商品リンク(全ボタン非表示)

省略。

タイムライン・タイムラインアイテム

タイムラインとタイムラインアイテムはセットで使う。

使用例

タイムスケジュール
  • 7:00
    起床
    目覚まし時計で起きる
  • 23:00
    就寝
    目覚まし時計を7時にセット

過去日時

5年

これは便利。◯年前という表記をリアルタイムに表示したい時に使用。

例えば、2年前のことを記事で書くとする。1年後には3年前のことになるが、このタグを使うことで自動的に3年前と表示させることができる。

ago from=”YYYY/MM/DD”で指定。「◯年」と表示される。

過去年

5

yago from=”YYYY/MM/DD”で指定。年はつかずに何年前という意味で数字だけが表示される。

年齢

21歳

リアルタイムの年齢を表示させたい時に使用。

age birth=”YYYY/MM/DD”で指定。「◯歳」と表示される。

コメント

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