無料テーマCocoonのスタイル見本

WordPressのテーマは無料のCocoonを利用しております。

毎回、記事を書く際に「あれ、このスタイルはどんな風に表示されるんだっけ?」となるので、自分メモ用に書いてみました。

Coroonの公式サイトでもサンプルはありますが、CSSを自分好みにいじっていますので、どんな見栄えになるか一覧で表示したく。

スポンサーリンク

見出し

見出し3

見出し4

見出し5
見出し6

スタイル

インライン

太字

赤字

赤太字

赤アンダーライン

青太字

緑太字

打ち消し線

キーボードキー

マーカー

黄色マーカー

赤色マーカー

青色マーカー

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

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

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

 

パステルカラーな感じで可愛いですね。

インラインとマーカーをあわせてこんな感じにもできます。

フォントサイズ

フォントの大きさが変わるだけなので省略

ボックス(アイコン)

補足情報(i)
補足情報(?)
注意喚起(!)
メモ
コメント
OK
NG
GOOD
BAD
プロフィール

ボックス(案内)

プライマリー(濃い水色)
セカンダリー(濃い灰色)
サクセス(薄い緑)
インフォ(薄い青)
ワーニング(薄い黄色)
デンジャー(薄い赤色)
ライト(白色)
ダーク(暗い灰色)
よく目立たせる目的で黄色で囲っちゃうんですけど、意味合いとしては「ワーニング」なんですね。

ボックス(白抜き)

灰色
黄色
赤色
青色
緑色
こちらは文字色は変わらず色のついた枠だけがつきます。
ちなみに「ボックス(案内)」のプライマリー(濃い水色)「ボックス(白抜き)」の黄色を合わせるとこんな感じ。

ボックス(タブ)

コメント灰色
ヒント黄色
NG赤色
ピックアップ青色
ブレイク緑色

この「ボックス(タブ)」は、基本的に左上のアイコンと文字が変わる×5色。

種類がいっぱいあって使いこなせないくらいですね。すごい。

 

ボックス(付箋風)

灰色
黄色
赤色
青色
緑色
使いどころないだろうけど、タブと付箋風をあわせたらどんな風になるのか気になってしまうのが人の性。

バッジ

オレンジ

レッド

ピンク

パープル

 

・・・と色のついた小さな文字が作成されます。

ブルー、グリーン、イエロー、ブラウン、グレー

とあと5色あるけど省略。

 

このバッジの使い道が分からなかったのだけれど、公式サイトを見ると

注目!とのえていこのブログ

みたく、リンクの前に貼って目立たせる例が出されています。

 

マイクロコピー

吹き出し(上)左側
吹き出し(上)中央
吹き出し(上)右側
吹き出し(下)左側
吹き出し(下)中央
吹き出し(下)右側

このマイクロコピー、ちょっとした説明を付け加えるのによいんでしょうが、よくデザインが崩れます。。

使いこなせません。

 

ボタン

レッド小

ピンク中

パープル大

色とお気差の組み合わせ。

リンクと組み合わせると目立つリンクボタンとなります。

 

おすすめ記事はこちら!

囲みボタン

レッド小

ピンク中

パープル大

 

なんと。

私のブログでは色別に反応しません。

変なとこいじっちゃったかな。

 

囲みブログカードラベル

 

ちなみに「囲みブログカードラベル」を適用しなくても、URLをぺたっとペーストするだけで枠は表示されるみたいです。

シンプルライフのために私が手放したもの
Denise HustedによるPixabayからの画像  シンプルライフのために。 もっと、モノもココロの縛りも手放したい。身軽になりたい。 当たり前のように「なくてはならない」と思っていたことたちについて、一度吟味...

コメント

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