【WordPress】Cocoonの「スタイル」機能の見た目アーカイブ

wordpress

とっちゃん@nyanco! です。

今回はWordPressの人気無料テーマ「Cocoon」の「スタイル」機能でどんな装飾ができるのか?のアーカイブです。

メニューから選ぶだけで簡単に装飾ができる「スタイル」機能ですが、メニューが多くて把握できてないので、「スタイル名」「スタイルを適用した見た目」をひたすらメモがてら記録しておきます。

ちなみに「スキン」機能は使わずの見た目となります。

スポンサーリンク
  1. インライン
    1. 太字
    2. 赤字
    3. 赤太字
    4. 赤アンダーライン
    5. 青太字
    6. 緑太字
    7. 打ち消し線
    8. キーボードキー
  2. マーカー
    1. 黄色マーカー
    2. 赤色マーカー
    3. 青色マーカー
    4. 黄色アンダーラインマーカー
    5. 赤色アンダーラインマーカー
    6. 青色アンダーラインマーカー
  3. フォントサイズ
    1. 12px
    2. 14px
    3. 16px
    4. 18px(デフォルトサイズっぽい)
    5. 20px
    6. 22px
    7. 24px
    8. 28px
    9. 32px
    10. 36px
    11. 40px
    12. 44px
    13. 48px
  4. ボックス(アイコン)
    1. 補足情報(i)
    2. 補足情報(?)
    3. 注意喚起(!)
    4. メモ
    5. コメント
    6. OK
    7. NG
    8. GOOD
    9. BAD
    10. プロフィール
  5. ボックス(案内)
    1. プライマリー(濃い水色)
    2. セカンダリー(濃い灰色)
    3. サクセス(薄い緑)
    4. インフォ(薄い青)
    5. ワーニング(薄い黄色)
    6. デンジャー(薄い赤色)
    7. ライト(白色)
    8. ダーク(暗い灰色)
  6. ボックス(白抜き)
    1. 灰色
    2. 黄色
    3. 赤色
    4. 青色
    5. 緑色
  7. ボックス(タブ)
    1. ブックマーク
      1. 灰色
      2. 黄色
      3. 赤色
      4. 青色
      5. 緑色
    2. GOOD
    3. BAD
    4. プロフィール
  8. ボックス(付箋風)
    1. 灰色
    2. 黄色
    3. 赤色
    4. 青色
    5. 緑色
  9. バッジ
    1. オレンジ
    2. レッド
    3. ピンク
    4. パープル
    5. ブルー
    6. グリーン
    7. イエロー
    8. ブラウン
    9. グレー
  10. マイクロコピー
    1. テキスト(上)
      1. 左側
      2. 中央
      3. 右側
    2. テキスト(下)
      1. 左側
      2. 中央
      3. 右側
    3. 吹き出し(上)
      1. 左側
      2. 中央
      3. 右側
    4. 吹き出し(下)
      1. 左側
      2. 中央
      3. 右側
  11. ボタン
    1. レッド(小)
    2. レッド(中)
    3. レッド(大)
    4. ピンク(小)
    5. ピンク(中)
    6. ピンク(大)
    7. パープル(小)
    8. パープル(中)
    9. パープル(大)
    10. ディープパープル(小)
    11. ディープパープル(中)
    12. ディープパープル(大)
    13. インディゴ[紺色](小)
    14. インディゴ[紺色](中)
    15. インディゴ[紺色](大)
    16. ブルー(小)
    17. ブルー(中)
    18. ブルー(大)
    19. ライトブルー(小)
    20. ライトブルー(中)
    21. ライトブルー(大)
    22. シアン(小)
    23. シアン(中)
    24. シアン(大)
    25. ティール[緑色がかかった青](小)
    26. ティール[緑色がかかった青](中)
    27. ティール[緑色がかかった青](大)
    28. グリーン(小)
    29. グリーン(中)
    30. グリーン(大)
    31. ライトグリーン(小)
    32. ライトグリーン(中)
    33. ライトグリーン(大)
    34. ライム(小)
    35. ライム(中)
    36. ライム(大)
    37. イエロー(小)
    38. イエロー(中)
    39. イエロー(大)
    40. アンバー[琥珀色](小)
    41. アンバー[琥珀色](中)
    42. アンバー[琥珀色](大)
    43. オレンジ(小)
    44. オレンジ(中)
    45. オレンジ(大)
    46. ディープオレンジ(小)
    47. ディープオレンジ(中)
    48. ディープオレンジ(大)
    49. ブラウン(小)
    50. ブラウン(中)
    51. ブラウン(大)
    52. グレー(小)
    53. グレー(中)
    54. グレー(大)
  12. 囲みボタン
    1. レッド(小)
    2. レッド(中)
    3. レッド(大)
    4. ピンク(小)
    5. ピンク(中)
    6. ピンク(大)
    7. パープル(小)
    8. パープル(中)
    9. パープル(大)
    10. ディープパープル(小)
    11. ディープパープル(中)
    12. ディープパープル(大)
    13. インディゴ[紺色](小)
    14. インディゴ[紺色](中)
    15. インディゴ[紺色](大)
    16. ブルー(小)
    17. ブルー(中)
    18. ブルー(大)
    19. ライトブルー(小)
    20. ライトブルー(中)
    21. ライトブルー(大)
    22. シアン(小)
    23. シアン(中)
    24. シアン(大)
    25. ティール[緑色がかかった青](小)
    26. ティール[緑色がかかった青](中)
    27. ティール[緑色がかかった青](大)
    28. グリーン(小)
    29. グリーン(中)
    30. グリーン(大)
    31. ライトグリーン(小)
    32. ライトグリーン(中)
    33. ライトグリーン(大)
    34. ライム(小)
    35. ライム(中)
    36. ライム(大)
    37. イエロー(小)
    38. イエロー(中)
    39. イエロー(大)
    40. アンバー[琥珀色](小)
    41. アンバー[琥珀色](中)
    42. アンバー[琥珀色](大)
    43. オレンジ(小)
    44. オレンジ(中)
    45. オレンジ(大)
    46. ディープオレンジ(小)
    47. ディープオレンジ(中)
    48. ディープオレンジ(大)
    49. ブラウン(小)
    50. ブラウン(中)
    51. ブラウン(大)
    52. グレー(小)
    53. グレー(中)
    54. グレー(大)
  13. 囲みブログカードラベル
    1. 関連記事
    2. 参考記事
    3. 参考リンク
    4. 人気記事
    5. あわせて読みたい
    6. 詳細はこちら
    7. チェック
    8. ピックアップ
    9. 公式サイト
    10. ダウンロード
  14. おわりに

インライン

テキストの太さ、色、線など基本的な装飾です。
「キーボードキー」はショートカットキーなどを説明する時用かな?

太字

サンプルテキストです。

赤字

サンプルテキストです。

赤太字

サンプルテキストです。

赤アンダーライン

サンプルテキストです。

サンプルテキストです。

青太字

サンプルテキストです。

サンプルテキストです。

緑太字

サンプルテキストです。

打ち消し線

サンプルテキストです。

キーボードキー

サンプルテキストです。

マーカー

マーカーペンで強調したような定番の装飾です。

黄色マーカー

サンプルテキストです。

赤色マーカー

サンプルテキストです。

青色マーカー

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

フォントサイズ

ずばりフォントサイズ。サイズバリエーション豊富です!

12px

サンプルテキストです。

14px

サンプルテキストです。

16px

サンプルテキストです。

18px(デフォルトサイズっぽい)

サンプルテキストです。

20px

サンプルテキストです。

22px

サンプルテキストです。

24px

サンプルテキストです。

28px

サンプルテキストです。

32px

サンプルテキストです。

36px

サンプルテキストです。

40px

サンプルテキストです。

44px

サンプルテキストです。

48px

サンプルテキストです。

ボックス(アイコン)

アイコン付きのボックスですね。割と良く使います。

補足情報(i)

サンプルテキストです。

補足情報(?)

サンプルテキストです。

注意喚起(!)

サンプルテキストです。

メモ

サンプルテキストです。

コメント

サンプルテキストです。

OK

サンプルテキストです。

NG

サンプルテキストです。

GOOD

サンプルテキストです。

BAD

サンプルテキストです。

プロフィール

サンプルテキストです。

ボックス(案内)

シンプルな単色背景と色文字の装飾です。

プライマリー(濃い水色)

サンプルテキストです。

セカンダリー(濃い灰色)

サンプルテキストです。

サクセス(薄い緑)

サンプルテキストです。

インフォ(薄い青)

サンプルテキストです。

ワーニング(薄い黄色)

サンプルテキストです。

デンジャー(薄い赤色)

サンプルテキストです。

ライト(白色)

サンプルテキストです。

ダーク(暗い灰色)

サンプルテキストです。

ボックス(白抜き)

これまたシンプルな枠のみのボックスです。角が少し丸みがかってますね。

灰色

サンプルテキストです。

黄色

サンプルテキストです。

赤色

サンプルテキストです。

青色

サンプルテキストです。

緑色

サンプルテキストです。

ボックス(タブ)

アイコンとテキストが入ったタブ付きのフォルダー型のボックスです。
それぞれに5色ありますが、色は初めの項目のみメモしてます。

ブックマーク

灰色

サンプルテキストです。

黄色

サンプルテキストです。

赤色

サンプルテキストです。

青色

サンプルテキストです。

緑色

サンプルテキストです。

GOOD

サンプルテキストです。

BAD

サンプルテキストです。

プロフィール

サンプルテキストです。

ボックス(付箋風)

フセン風なボックスです。
見出しに良くあるデザインなので、細いと見出しに見えちゃうかも?

灰色

サンプルテキストです。

黄色

サンプルテキストです。

赤色

サンプルテキストです。

青色

サンプルテキストです。

緑色

サンプルテキストです。

バッジ

濃い目の色の背景に小さい白抜きテキストな装飾です。

オレンジ

サンプルテキストです。

レッド

サンプルテキストです。

ピンク

サンプルテキストです。

パープル

サンプルテキストです。

ブルー

サンプルテキストです。

グリーン

サンプルテキストです。

イエロー

サンプルテキストです。

ブラウン

サンプルテキストです。

グレー

サンプルテキストです。

マイクロコピー

その名の通り、小さいコピー?
吹き出しバージョンぐらいしか使いどころがイメージできない…

テキスト(上)

左側

サンプルテキストです。

中央

サンプルテキストです。

右側

サンプルテキストです。

テキスト(下)

左側

サンプルテキストです。

中央

サンプルテキストです。

右側

サンプルテキストです。

吹き出し(上)

左側

サンプルテキストです。

中央

サンプルテキストです。

右側

サンプルテキストです。

吹き出し(下)

左側

サンプルテキストです。

中央

サンプルテキストです。

右側

サンプルテキストです。

ボタン

シンプルなボタン、大中小サイズですが、非常に多くのカラーバリエーションが用意されています。
カラーのお勉強にもなりそうです 笑

レッド(小)

サンプルテキストです。

レッド(中)

サンプルテキストです。

レッド(大)

サンプルテキストです。

ピンク(小)

サンプルテキストです。

ピンク(中)

サンプルテキストです。

ピンク(大)

サンプルテキストです。

パープル(小)

サンプルテキストです。

パープル(中)

サンプルテキストです。

パープル(大)

サンプルテキストです。

ディープパープル(小)

サンプルテキストです。

ディープパープル(中)

サンプルテキストです。

ディープパープル(大)

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

ブルー(小)

サンプルテキストです。

ブルー(中)

サンプルテキストです。

ブルー(大)

サンプルテキストです。

ライトブルー(小)

サンプルテキストです。

ライトブルー(中)

サンプルテキストです。

ライトブルー(大)

サンプルテキストです。

シアン(小)

サンプルテキストです。

シアン(中)

サンプルテキストです。

シアン(大)

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

グリーン(小)

サンプルテキストです。

グリーン(中)

サンプルテキストです。

グリーン(大)

サンプルテキストです。

ライトグリーン(小)

サンプルテキストです。

ライトグリーン(中)

サンプルテキストです。

ライトグリーン(大)

サンプルテキストです。

ライム(小)

サンプルテキストです。

ライム(中)

サンプルテキストです。

ライム(大)

サンプルテキストです。

イエロー(小)

サンプルテキストです。

イエロー(中)

サンプルテキストです。

イエロー(大)

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

オレンジ(小)

サンプルテキストです。

オレンジ(中)

サンプルテキストです。

オレンジ(大)

サンプルテキストです。

ディープオレンジ(小)

サンプルテキストです。

ディープオレンジ(中)

サンプルテキストです。

ディープオレンジ(大)

サンプルテキストです。

ブラウン(小)

サンプルテキストです。

ブラウン(中)

サンプルテキストです。

ブラウン(大)

サンプルテキストです。

グレー(小)

サンプルテキストです。

グレー(中)

サンプルテキストです。

グレー(大)

サンプルテキストです。

囲みボタン

シンプルな枠囲みボタン、と思いきや見た目が何も変わらず??
独自で設定したCSSなどの影響なのでしょうか・・?
せっかくそれぞれにスタイルを適用したので一応そのままにしておきますが、見た目プレーンテキストが続きます 笑

レッド(小)

サンプルテキストです。

レッド(中)

サンプルテキストです。

レッド(大)

サンプルテキストです。

ピンク(小)

サンプルテキストです。

ピンク(中)

サンプルテキストです。

ピンク(大)

サンプルテキストです。

パープル(小)

サンプルテキストです。

パープル(中)

サンプルテキストです。

パープル(大)

サンプルテキストです。

ディープパープル(小)

サンプルテキストです。

ディープパープル(中)

サンプルテキストです。

ディープパープル(大)

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

ブルー(小)

サンプルテキストです。

ブルー(中)

サンプルテキストです。

ブルー(大)

サンプルテキストです。

ライトブルー(小)

サンプルテキストです。

ライトブルー(中)

サンプルテキストです。

ライトブルー(大)

サンプルテキストです。

シアン(小)

サンプルテキストです。

シアン(中)

サンプルテキストです。

シアン(大)

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

グリーン(小)

サンプルテキストです。

グリーン(中)

サンプルテキストです。

グリーン(大)

サンプルテキストです。

ライトグリーン(小)

サンプルテキストです。

ライトグリーン(中)

サンプルテキストです。

ライトグリーン(大)

サンプルテキストです。

ライム(小)

サンプルテキストです。

ライム(中)

サンプルテキストです。

ライム(大)

サンプルテキストです。

イエロー(小)

サンプルテキストです。

イエロー(中)

サンプルテキストです。

イエロー(大)

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

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

サンプルテキストです。

オレンジ(小)

サンプルテキストです。

オレンジ(中)

サンプルテキストです。

オレンジ(大)

サンプルテキストです。

ディープオレンジ(小)

サンプルテキストです。

ディープオレンジ(中)

サンプルテキストです。

ディープオレンジ(大)

サンプルテキストです。

ブラウン(小)

サンプルテキストです。

ブラウン(中)

サンプルテキストです。

ブラウン(大)

サンプルテキストです。

グレー(小)

サンプルテキストです。

グレー(中)

サンプルテキストです。

グレー(大)

サンプルテキストです。

囲みブログカードラベル

内部・外部リンクを貼る時にとても良く使う装飾です。

関連記事

参考記事

サンプルテキストです。

参考リンク

人気記事

あわせて読みたい

サンプルテキストです。

詳細はこちら

サンプルテキストです。

チェック

サンプルテキストです。

ピックアップ

サンプルテキストです。

公式サイト

サンプルテキストです。

ダウンロード

サンプルテキストです。

おわりに

ふう、ひたすらスタイルを適用していくという作業に疲れました…

ただ、こうして全貌を知ると今後は装飾をする時にいちいち試したりすることはなくなりそうです。

本記事がどなたかの参考になれば幸いです。

今回は以上となります。
最後まで読んでいただきましてありがとうございました!
それではまた〜✧٩(ˊωˋ*)و✧

 

コメント