ワードプレステーマ『Cocoon』のスタイル拡張を一覧にしました。

今日は僕が使っているワードプレステーマ『Cocoon』について。

『Cocoon』は、わいひらさん(@MrYhira)が作った無料のワードプレステーマです。

色んな機能がついている優れものですが、ブログ初心者の自分はまだまだ使いこなせていません!

特にたくさんの種類が用意されている。『スタイル』。

自分が慣れていない為に、「ボックスにしたいけどどれだ?」「ここは色をつけたいけど。。」

と探しまわることがありました。なので、

2018年10月30日現在で利用できるスタイルについて、一覧でまとめてみました。

* フォントサイズは除いています。

インライン・マーカー

記事作成に使える拡張スタイル。インライン編。
Wordpress本文を彩る拡張スタイル(拡張クラス)の紹介です。見た目とソースコードをあわせて紹介しています。

インライン

インライン 太字 / 

インライン 赤字 / インライン 赤太字 / インライン 赤アンダーライン

インライン 青 / インライン 青太字 / 

インライン 緑 / インライン 緑太字 / 

打ち消し線 /

キーボード

マーカー

黄色マーカー / 赤色マーカー / 青色マーカー /

黄色アンダーラインマーカー赤色アンダーラインマーカー / 青色アンダーラインマーカー

ボックス

拡張スタイル「アイコンボックス」と「案内ボックス」の表示サンプル。
Cocoonにデフォルトで用意されているボックスタイプの拡張スタイルの使い方と、サンプルコードです。
拡張スタイル「タブボックス」の表示サンプル
ビジュアルエディターで記事作成時に手軽に文章を彩ることができるタブボックス拡張クラスの使い方見本です。ブランクボックスにタブがついたスタイルになっています。
拡張スタイル「付箋風ボックス」の表示サンプル
「付箋風」の使い方と表示サンプルです。使い方付箋風ボックスを利用するには、ビジュアルエディターの「スタイル」ドロップダウンから「ボックス(付箋風)」を選択後、色を選択してください。表示サンプルそれぞれの色の表示サンプルはこちら。付箋風ボック

ボックス(アイコン)

*1カラムで使用する場合が多いと思いますが、たくさんあるので2カラムで表示しています。

補足情報(i)

補足情報(?)

補足情報(!)

補足情報(メモ)

補足情報(コメント)

補足情報(OK)

補足情報(NG)

補足情報(GOOD)

左補足情報(BAD)

補足情報(プロフィール)

ボックス(案内)

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

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

サクセス(薄い緑)

インフォ(薄い青)

ワーニング(薄い黄色)

デンジャー(薄い赤色)

ライト(白色)

ダーク(暗い灰色)

ボックス(白抜き)

灰色

黄色

赤色

青色

緑色

ボックス(タブ)

ボックス(チェック)

ボックス(コメント)

ボックス(ポイント)

ボックス(ティップス)

ボックス(ヒント)

ボックス(ブックマーク)

ボックス(メモ)

ボックス(ダウンロード)

 

ボックス(ブレイク)

ボックス(Amazon)

ボックス(OK)

ボックス(NG)

ボックス(GOOD)

ボックス(BAD)

ボックス(プロフィール)

ボックス(付箋風)

灰色

黄色

赤色

青色

緑色

 

バッジ

記事作成に使える拡張スタイル。バッジ編。
リンク前のワンポイントなどに利用するためのバッジ拡張スタイルの表示サンプルとコードです。

バッジ(オレンジ)

バッジ(レッド)

バッジ(ピンク)

バッジ(パープル)

バッジ(ブルー)

バッジ(グリーン)

バッジ(イエロー)

バッジ(ブラウン)

バッジ(グレー)

マイクロコピー

Cocoon 1.2.3公開。マイクロコピー拡張スタイル追加。
Cocoon 1.2.3のアップデート情報。

テキスト(上)左側

テキスト(上)中央

テキスト(上)右側

テキスト(下)左側

テキスト(下)中央

テキスト(下)右側

吹き出し(上)左側

 

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

ボタン

記事作成に使える拡張スタイル。ボタン編。
スタイル拡張ボタンの使い方。サンプルコードと表示例です。

ボタン

* すべての色に小中大があります。1段目のレッドで3種類の大きさを。残りは小で表示しました。

囲みブログカードラベル

囲みブログカード拡張スタイルの使い方
ブログカード作成用のURLを囲むだけで様々なタイプのブログカード表示ができるようになる機能の使用方法です。

スタイルは2018年10月30日現在のものです。

今後新たなスタイルの追加や変更があるかもしれませんので、

最新情報はこちらで確認してください。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100%GPLテーマです。

それでは!