とっちゃん@nyanco! です。
今回はWordPressの人気無料テーマ「Cocoon」の「スタイル」機能でどんな装飾ができるのか？のアーカイブです。
メニューから選ぶだけで簡単に装飾ができる「スタイル」機能ですが、メニューが多くて把握できてないので、「スタイル名」と「スタイルを適用した見た目」をひたすらメモがてら記録しておきます。
ちなみに「スキン」機能は使わずの見た目となります。
- インライン
- マーカー
- フォントサイズ
- ボックス（アイコン）
- ボックス（案内）
- ボックス（白抜き）
- ボックス（タブ）
- ボックス（付箋風）
- バッジ
- マイクロコピー
- ボタン
- レッド（小）
- レッド（中）
- レッド（大）
- ピンク（小）
- ピンク（中）
- ピンク（大）
- パープル（小）
- パープル（中）
- パープル（大）
- ディープパープル（小）
- ディープパープル（中）
- ディープパープル（大）
- インディゴ[紺色]（小）
- インディゴ[紺色]（中）
- インディゴ[紺色]（大）
- ブルー（小）
- ブルー（中）
- ブルー（大）
- ライトブルー（小）
- ライトブルー（中）
- ライトブルー（大）
- シアン（小）
- シアン（中）
- シアン（大）
- ティール[緑色がかかった青]（小）
- ティール[緑色がかかった青]（中）
- ティール[緑色がかかった青]（大）
- グリーン（小）
- グリーン（中）
- グリーン（大）
- ライトグリーン（小）
- ライトグリーン（中）
- ライトグリーン（大）
- ライム（小）
- ライム（中）
- ライム（大）
- イエロー（小）
- イエロー（中）
- イエロー（大）
- アンバー[琥珀色]（小）
- アンバー[琥珀色]（中）
- アンバー[琥珀色]（大）
- オレンジ（小）
- オレンジ（中）
- オレンジ（大）
- ディープオレンジ（小）
- ディープオレンジ（中）
- ディープオレンジ（大）
- ブラウン（小）
- ブラウン（中）
- ブラウン（大）
- グレー（小）
- グレー（中）
- グレー（大）
- 囲みボタン
- レッド（小）
- レッド（中）
- レッド（大）
- ピンク（小）
- ピンク（中）
- ピンク（大）
- パープル（小）
- パープル（中）
- パープル（大）
- ディープパープル（小）
- ディープパープル（中）
- ディープパープル（大）
- インディゴ[紺色]（小）
- インディゴ[紺色]（中）
- インディゴ[紺色]（大）
- ブルー（小）
- ブルー（中）
- ブルー（大）
- ライトブルー（小）
- ライトブルー（中）
- ライトブルー（大）
- シアン（小）
- シアン（中）
- シアン（大）
- ティール[緑色がかかった青]（小）
- ティール[緑色がかかった青]（中）
- ティール[緑色がかかった青]（大）
- グリーン（小）
- グリーン（中）
- グリーン（大）
- ライトグリーン（小）
- ライトグリーン（中）
- ライトグリーン（大）
- ライム（小）
- ライム（中）
- ライム（大）
- イエロー（小）
- イエロー（中）
- イエロー（大）
- アンバー[琥珀色]（小）
- アンバー[琥珀色]（中）
- アンバー[琥珀色]（大）
- オレンジ（小）
- オレンジ（中）
- オレンジ（大）
- ディープオレンジ（小）
- ディープオレンジ（中）
- ディープオレンジ（大）
- ブラウン（小）
- ブラウン（中）
- ブラウン（大）
- グレー（小）
- グレー（中）
- グレー（大）
- 囲みブログカードラベル
- おわりに
インライン
テキストの太さ、色、線など基本的な装飾です。
「キーボードキー」はショートカットキーなどを説明する時用かな？
太字
サンプルテキストです。
赤字
サンプルテキストです。
赤太字
サンプルテキストです。
赤アンダーライン
サンプルテキストです。
青
サンプルテキストです。
青太字
サンプルテキストです。
緑
サンプルテキストです。
緑太字
サンプルテキストです。
打ち消し線
サンプルテキストです。
キーボードキー
サンプルテキストです。
マーカー
マーカーペンで強調したような定番の装飾です。
黄色マーカー
サンプルテキストです。
赤色マーカー
サンプルテキストです。
青色マーカー
サンプルテキストです。
黄色アンダーラインマーカー
サンプルテキストです。
赤色アンダーラインマーカー
サンプルテキストです。
青色アンダーラインマーカー
サンプルテキストです。
フォントサイズ
ずばりフォントサイズ。サイズバリエーション豊富です！
12px
サンプルテキストです。
14px
サンプルテキストです。
16px
サンプルテキストです。
18px（デフォルトサイズっぽい）
サンプルテキストです。
20px
サンプルテキストです。
22px
サンプルテキストです。
24px
サンプルテキストです。
28px
サンプルテキストです。
32px
サンプルテキストです。
36px
サンプルテキストです。
40px
サンプルテキストです。
44px
サンプルテキストです。
48px
サンプルテキストです。
ボックス（アイコン）
アイコン付きのボックスですね。割と良く使います。
補足情報(i)
補足情報(?)
注意喚起(!)
メモ
コメント
OK
NG
GOOD
BAD
プロフィール
ボックス（案内）
シンプルな単色背景と色文字の装飾です。
プライマリー（濃い水色）
セカンダリー（濃い灰色）
サクセス（薄い緑）
インフォ（薄い青）
ワーニング（薄い黄色）
デンジャー（薄い赤色）
ライト（白色）
ダーク（暗い灰色）
ボックス（白抜き）
これまたシンプルな枠のみのボックスです。角が少し丸みがかってますね。
灰色
黄色
赤色
青色
緑色
ボックス（タブ）
アイコンとテキストが入ったタブ付きのフォルダー型のボックスです。
それぞれに5色ありますが、色は初めの項目のみメモしてます。
ブックマーク
灰色
黄色
赤色
青色
緑色
GOOD
BAD
プロフィール
ボックス（付箋風）
フセン風なボックスです。
見出しに良くあるデザインなので、細いと見出しに見えちゃうかも？
灰色
黄色
赤色
青色
緑色
バッジ
濃い目の色の背景に小さい白抜きテキストな装飾です。
オレンジ
サンプルテキストです。
レッド
サンプルテキストです。
ピンク
サンプルテキストです。
パープル
サンプルテキストです。
ブルー
サンプルテキストです。
グリーン
サンプルテキストです。
イエロー
サンプルテキストです。
ブラウン
サンプルテキストです。
グレー
サンプルテキストです。
マイクロコピー
その名の通り、小さいコピー？
吹き出しバージョンぐらいしか使いどころがイメージできない…
テキスト（上）
左側
中央
右側
テキスト（下）
左側
中央
右側
吹き出し（上）
左側
中央
右側
吹き出し（下）
左側
中央
右側
ボタン
シンプルなボタン、大中小サイズですが、非常に多くのカラーバリエーションが用意されています。
カラーのお勉強にもなりそうです 笑
レッド（小）
レッド（中）
レッド（大）
ピンク（小）
ピンク（中）
ピンク（大）
パープル（小）
パープル（中）
パープル（大）
ディープパープル（小）
ディープパープル（中）
ディープパープル（大）
インディゴ[紺色]（小）
インディゴ[紺色]（中）
インディゴ[紺色]（大）
ブルー（小）
ブルー（中）
ブルー（大）
ライトブルー（小）
ライトブルー（中）
ライトブルー（大）
シアン（小）
シアン（中）
シアン（大）
ティール[緑色がかかった青]（小）
ティール[緑色がかかった青]（中）
ティール[緑色がかかった青]（大）
グリーン（小）
グリーン（中）
グリーン（大）
ライトグリーン（小）
ライトグリーン（中）
ライトグリーン（大）
ライム（小）
ライム（中）
ライム（大）
イエロー（小）
イエロー（中）
イエロー（大）
アンバー[琥珀色]（小）
アンバー[琥珀色]（中）
アンバー[琥珀色]（大）
オレンジ（小）
オレンジ（中）
オレンジ（大）
ディープオレンジ（小）
ディープオレンジ（中）
ディープオレンジ（大）
ブラウン（小）
ブラウン（中）
ブラウン（大）
グレー（小）
グレー（中）
グレー（大）
囲みボタン
シンプルな枠囲みボタン、と思いきや見た目が何も変わらず？？
独自で設定したCSSなどの影響なのでしょうか・・？
せっかくそれぞれにスタイルを適用したので一応そのままにしておきますが、見た目プレーンテキストが続きます 笑
レッド（小）
サンプルテキストです。
レッド（中）
サンプルテキストです。
レッド（大）
ピンク（小）
サンプルテキストです。
ピンク（中）
サンプルテキストです。
ピンク（大）
パープル（小）
サンプルテキストです。
パープル（中）
サンプルテキストです。
パープル（大）
ディープパープル（小）
サンプルテキストです。
ディープパープル（中）
サンプルテキストです。
ディープパープル（大）
インディゴ[紺色]（小）
サンプルテキストです。
インディゴ[紺色]（中）
サンプルテキストです。
インディゴ[紺色]（大）
ブルー（小）
サンプルテキストです。
ブルー（中）
サンプルテキストです。
ブルー（大）
ライトブルー（小）
サンプルテキストです。
ライトブルー（中）
サンプルテキストです。
ライトブルー（大）
シアン（小）
サンプルテキストです。
シアン（中）
サンプルテキストです。
シアン（大）
ティール[緑色がかかった青]（小）
サンプルテキストです。
ティール[緑色がかかった青]（中）
サンプルテキストです。
ティール[緑色がかかった青]（大）
グリーン（小）
サンプルテキストです。
グリーン（中）
サンプルテキストです。
グリーン（大）
ライトグリーン（小）
サンプルテキストです。
ライトグリーン（中）
サンプルテキストです。
ライトグリーン（大）
ライム（小）
サンプルテキストです。
ライム（中）
サンプルテキストです。
ライム（大）
イエロー（小）
サンプルテキストです。
イエロー（中）
サンプルテキストです。
イエロー（大）
アンバー[琥珀色]（小）
サンプルテキストです。
アンバー[琥珀色]（中）
サンプルテキストです。
アンバー[琥珀色]（大）
オレンジ（小）
サンプルテキストです。
オレンジ（中）
サンプルテキストです。
オレンジ（大）
ディープオレンジ（小）
サンプルテキストです。
ディープオレンジ（中）
サンプルテキストです。
ディープオレンジ（大）
ブラウン（小）
サンプルテキストです。
ブラウン（中）
サンプルテキストです。
ブラウン（大）
グレー（小）
サンプルテキストです。
グレー（中）
サンプルテキストです。
グレー（大）
囲みブログカードラベル
内部・外部リンクを貼る時にとても良く使う装飾です。
関連記事
参考記事
サンプルテキストです。
参考リンク
サンプルテキストです。
人気記事
サンプルテキストです。
あわせて読みたい
サンプルテキストです。
詳細はこちら
サンプルテキストです。
チェック
サンプルテキストです。
ピックアップ
サンプルテキストです。
公式サイト
サンプルテキストです。
ダウンロード
サンプルテキストです。
おわりに
ふう、ひたすらスタイルを適用していくという作業に疲れました…
ただ、こうして全貌を知ると今後は装飾をする時にいちいち試したりすることはなくなりそうです。
本記事がどなたかの参考になれば幸いです。
今回は以上となります。
最後まで読んでいただきましてありがとうございました！
それではまた〜✧٩(ˊωˋ*)و✧
コメント