ブログ

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

Cocoon 装飾タグ
Cocoon 装飾タグ

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

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

Cocoon バージョン2.2.7.4 時点です。

スタイル

インライン

太字タグの<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色

ボックス(付箋風)

灰色
黄色
赤色
青色
緑色

バッジ

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

マイクロコピー

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

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

https://wp-cocoon.com/micro-copy/

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

左側
中央
右側

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

公式サイトはこちら

左側

公式サイトはこちら

中央

公式サイトはこちら

右側

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

左側

公式サイトはこちら

中央

公式サイトはこちら

右側

公式サイトはこちら

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

公式サイトはこちら

右側

公式サイトはこちら

中央

公式サイトはこちら

右側

ボタン

レッド(小)

レッド(中)

レッド(大)

ピンク(小)

ピンク(中)

ピンク(大)

パープル(小)

パープル(中)

パープル(大)

ディープパープル(小)

ディープパープル(中)

ディープパープル(大)

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

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

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

ブルー(小)

囲みボタン

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

https://wp-cocoon.com/wrap-button/

リンク挿入直後のリンク部分を選択している状態のままボタン設定するとスムーズにできる。あとからリンク部分を選択して設定するのは難しいのでリンク挿入とセットで設定した方が良さそう。

レッド(小)

レッド(中)

ピンク(小)

ピンク(中)

パープル(小)

パープル(中)

ディープパープル(小)

ディープパープル(中)

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

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

ブルー(小)

ブルー(中)

ライトブルー(小)

ライトブルー(中)

シアン(小)

シアン(中)

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

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

グリーン(小)

グリーン(中)

ライトグリーン(小)

ライトグリーン(中)

ライム(小)

ライム(中)

イエロー(小)

イエロー(中)

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

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

オレンジ(小)

オレンジ(中)

ディープオレンジ(小)

ディープオレンジ(中)

ブラウン(小)

ブラウン(中)

グレー(小)

グレー(中)

囲みブログカードラベル

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

関連記事

参考記事

参考リンク

人気記事

あわせて読みたい

詳細はこちら

チェック

ピックアップ

公式サイト

ダウンロード

吹き出し

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

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

男性医師(左)
女性医師(右)
どや顔男性(左)
どや顔女性(右)

テンプレート

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

[temp id=1]

アフィリエイト

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

[affi id=1]

タグ

カラムは省略。

検索フォーム風

キーワード
検索

トグルボックス

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

 

トグルボックス内容

ふりがな(ルビ)

振り仮名ふりがな

ショートコード

広告[ad]

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

[ad]

新着記事一覧

[new_list count=”5″ type=”default” cats=”all” children=”0″ post_type=”post”]

人気記事一覧

[popular_list days=”all” rank=”0″ pv=”0″ count=”5″ type=”default” cats=”all”]

ナビカード一覧

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

https://wp-cocoon.com/navi-card-shortcode/

プロフィールボックス

[author_box label=この記事を書いた人]

Amazon商品リンク

[amazon asin=”B08PP8T15H” kw=”進撃の巨人”]

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

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

[amazon asin=”B08PP8T15H” kw=”進撃の巨人” title=”進撃の巨人33巻”]

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

[amazon asin=”B08PP8T15H” kw=”進撃の巨人” amazon=0 rakuten=0 yahoo=0]

楽天商品リンク

省略。

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

省略。

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

省略。

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

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

使用例

[timeline title=”タイムスケジュール”]

[ti label=”7:00″ title=”起床”]目覚まし時計で起きる[/ti]

[ti label=”23:00″ title=”就寝”]目覚まし時計を7時にセット[/ti]

[/timeline]

過去日時

[ago from=”2016/04/01″]

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

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

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

過去年

[yago from=”2016/04/01″]

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

年齢

[age birth=”2000/01/01″]

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

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

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください