WordPress無料テーマCocoonのスタイルサンプル

WordPressの無料テーマCocoonには多くのスタイルが登録されています。

ですが、スタイルの項目を見ただけでは実際に適用した状態をイメージしにくいです。

そこで、スタイルのサンプルを作成しました。スタイルを利用する際の参考にしてください。

スポンサーリンク
スポンサーリンク

1.インライン

太字

Python-Start|Python入門 はじめてのプログラミング

赤字

Python-Start|Python入門 はじめてのプログラミング

赤太字

Python-Start|Python入門 はじめてのプログラミング

赤アンダーライン

Python-Start|Python入門 はじめてのプログラミング

Python-Start|Python入門 はじめてのプログラミング

青太字

Python-Start|Python入門 はじめてのプログラミング

Python-Start|Python入門 はじめてのプログラミング

緑太字

Python-Start|Python入門 はじめてのプログラミング

打ち消し線

Python-Start|Python入門 はじめてのプログラミング

キーボードキー

Python-Start|Python入門 はじめてのプログラミング

2.マーカー

黄色マーカー

WordPress無料テーマCocoonのスタイルサンプル

赤色マーカー

WordPress無料テーマCocoonのスタイルサンプル

青色マーカー

WordPress無料テーマCocoonのスタイルサンプル

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

WordPress無料テーマCocoonのスタイルサンプル

黄色アンダーラインマーカーのみ濃い黄色に変更しています

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

WordPress無料テーマCocoonのスタイルサンプル

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

WordPress無料テーマCocoonのスタイルサンプル

3.フォントサイズ

12px:Python-Start

14px:Python-Start

16px:Python-Start

18px:Python-Start

20px:Python-Start

22px:Python-Start

24px:Python-Start

28px:Python-Start

32px:Python-Start

36px:Python-Start

40px:Python-Start

44px:Python-Start

48px:Python-Start

4.ボックス(アイコン)

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

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.囲みブログカードラベル

関連記事

参考記事

参考リンク

人気記事

あわせて読みたい

詳細はこちら

チェック

ピックアップ

公式サイト

ダウンロード

前回の記事

続きの記事

スポンサーリンク
スポンサーリンク
Cocoon
Python Start を フォローする
Python Start
タイトルとURLをコピーしました