「cocoon」 スタイル サンプル
このホームページはWordPressテーマ「cocoon」を使用して作成しています。
以前のHP作成ソフトを使用してHTMLタグをコーディングしながらの作成を考えると、時代の流れを痛感しています。
cocoon便利さの一例がワンタッチで作成できる以下のスタイルです。
ここに表示されているのが「AMK情報館」現在のCSSスタイルです。
参考のため上段にタグを表示しています。
タグをコピーする場合には[" " ]が大文字になることがあるので注意して下さい[" " ]は小文字です。
見出し1 （ブロック編集）
※見出しスタイルはスキン適用なしの場合
<h1>見出し１ cocoon スタイル サンプル</h1>
見出し１ （クラシック編集）
<h2>見出し２ cocoon スタイル サンプル</h2>
見出し２ cocoon スタイル サンプル
<h3>見出し３ cocoon スタイル サンプル</h3>
見出し３ cocoon スタイル サンプル
<h4>見出し４ cocoon スタイル サンプル</h4>
見出し４ cocoon スタイル サンプル
<h5>見出し５ cocoon スタイル サンプル</h5>
見出し５ cocoon スタイル サンプル
<h6>見出し６ cocoon スタイル サンプル</h6>
見出し６ cocoon スタイル サンプル
整形済みテキストは、プラグインCrayon Syntax Highlighterを使用
<pre>
整形済みテキスト
</pre>
整形済みテキスト
インライン
<span class="bold">太字</span>
太字
<span class="red">赤字</span>
赤字
<span class="bold red">赤太字</span>
赤太字
<span class="red-under">赤アンダーライン</span>
赤アンダーライン
<span class="blue">青</span>
青
<span class="bold blue">青太字</span>
青太字
<span class="green">緑</span>
緑
<span class="bold green">緑太字</span>
緑太字
<span class="strike">打消し線</span>
打消し線
<span class="keyboard-key">キーボード</span>
キーボード
マーカー
<span class="marker">黄色マーカー</span>
黄色マーカー
<span class="marker-red">赤色マーカー</span>
赤色マーカー
<span class="marker-blue">青色マーカー</span>
青色マーカー
<span class="marker-under">黄色アンダーラインマーカー</span>
黄色アンダーラインマーカー
<span class="marker-under-red">赤色アンダーラインマーカー</span>
赤色アンダーラインマーカー
<span class="marker-under-blue">青色アンダーラインマーカー</span>
青色アンダーラインマーカー
フォントサイズ
<span class="fz-12px">12px</span>
12px
<span class="fz-14px">14px</span>
14px
<span class="fz-16px">16px</span>
16px
<span class="fz-18px">18px</span>
18px
<span class="fz-20px">20px</span>
20px
<span class="fz-22px">22px</span>
22px
<span class="fz-24px">24px</span>
24px
<span class="fz-28px">28px</span>
28px
<span class="fz-32px">32px</span>
32px
<span class="fz-36px">36px</span>
36px
<span class="fz-40px">40px</span>
40px
<span class="fz-44px">44px</span>
44px
<span class="fz-48px">48px</span>
48px
ボックス（アイコン）
<div class="information-box common-icon-box">補足情報(i)</div>
<div class="question-box common-icon-box">補足情報(?)</div>
<div class="alert-box common-icon-box">注意喚起(!)</div>
<div class="memo-box common-icon-box">メモ</div>
<div class="comment-box common-icon-box">コメント</div>
<div class="ok-box common-icon-box">OK</div>
<div class="ng-box common-icon-box">NG</div>
<div class="good-box common-icon-box">GOOD</div>
<div class="bad-box common-icon-box">BAD</div>
<div class="profile-box common-icon-box">プロフィール</div>
ボックス（案内）
<div class="primary-box">プライマリー（濃い水色）</div>
<div class="secondary-box">セカンダリー（濃い灰色）</div>
<div class="success-box">サクセス（薄い緑）</div>
<div class="info-box">インフォ（薄い青）</div>
<div class="warning-box">ワーニング（薄い黄色）</div>
<div class="danger-box">デンジャー（薄い赤色）</div>
<div class="light-box">ライト（白色）</div>
<div class="dark-box">ダーク（暗い灰色）</div>
ボックス（白抜き）
<div class="blank-box">灰色</div>
<div class="blank-box bb-yellow">黄色</div>
<div class="blank-box bb-red">赤色</div>
<div class="blank-box bb-blue">青色</div>
<div class="blank-box bb-green">緑色</div>
ボックス（タブ）
<div class="blank-box bb-tab bb-check">チェック</div>
<div class="blank-box bb-tab bb-comment bb-yellow">コメント</div>
<div class="blank-box bb-tab bb-point bb-red">ポイント</div>
<div class="blank-box bb-tab bb-tips bb-blue">ティップス</div>
<div class="blank-box bb-tab bb-hint bb-green">ヒント</div>
<div class="blank-box bb-tab bb-pickup">ピックアップ</div>
<div class="blank-box bb-tab bb-bookmark bb-yellow">ブックマーク</div>
<div class="blank-box bb-tab bb-memo bb-red">メモ</div>
<div class="blank-box bb-tab bb-download bb-blue">ダウンロード</div>
<div class="blank-box bb-tab bb-break bb-green">ブレイク</div>
<div class="blank-box bb-tab bb-amazon">Amazon</div>
<div class="blank-box bb-tab bb-ok bb-yellow">OK</div>
<div class="blank-box bb-tab bb-ng bb-red">NG</div>
<div class="blank-box bb-tab bb-good bb-blue">GOOD</div>
<div class="blank-box bb-tab bb-bad bb-green">BAD</div>
<div class="blank-box bb-tab bb-profile">プロフィール</div>
ボックス（付箋風）
<div class="blank-box sticky">灰色</div>
<div class="blank-box sticky st-yellow">黄色</div>
<div class="blank-box sticky st-red">赤色</div>
<div class="blank-box sticky st-blue">青色</div>
<div class="blank-box sticky st-green">緑色</div>
バッジ
<span class="badge">オレンジ</span>
オレンジ
<span class="badge badge-red">レッド</span>
レッド
<span class="badge badge-pink">ピンク</span>
ピンク
<span class="badge badge-purple">パープル</span>
パープル
<span class="badge badge-blue">ブルー</span>
ブルー
<span class="badge badge-green">グリーン</span>
グリーン
<span class="badge badge-yellow">イエロー</span>
イエロー
<span class="badge badge-brown">ブラウン</span>
ブラウン
<span class="badge badge-grey">グレー</span>
グレー
マイクロコピー
<div class="micro-top micro-left">テキスト（上）左側</div>
<div class="micro-top micro-center">テキスト（上）中央</div>
<div class="micro-top micro-right">テキスト（上）右側</div>
<div class="micro-bottom micro-left">テキスト（下）左側</div>
<div class="micro-bottom micro-center">テキスト（下）中央</div>
<div class="micro-bottom micro-right">テキスト（下）右側</div>
<div class="micro-top micro-balloon micro-balloon-left">吹き出し（上）左側</div>
<div class="micro-top micro-balloon micro-balloon-center">吹き出し（上）中央</div>
<div class="micro-top micro-balloon micro-balloon-right">吹き出し（上）右側</div>
<div class="micro-bottom micro-balloon micro-balloon-left">吹き出し（下）左側</div>
<div class="micro-bottom micro-balloon micro-balloon-center">吹き出し（下）中央</div>
<div class="micro-bottom micro-balloon micro-balloon-right">吹き出し（下）右側</div>
ボタン
<a class="btn btn-red">レッド（小）</a>
レッド（小）
<a class="btn btn-pink btn-m">ピンク（中）</a>
ピンク（中）
<a class="btn btn-purple btn-l">パープル（大）</a>
パープル（大）
以下中のみで表示
<a class="btn btn-deep btn-m">ディープパープル</a>
ディープパープル
<a class="btn btn-indigo btn-m">インディゴ</a>
インディゴ
<a class="btn btn-blue btn-m">ブルー</a>
ブルー
<a class="btn btn-light-blue btn-m">ライトブルー</a>
ライトブルー
<a class="btn btn-cyan btn-m">シアン</a>
シアン
<a class="btn btn-teal btn-m">ティール[緑色がかった青]</a>
ティール[緑色がかった青]
<a class="btn btn-green btn-m">グリーン</a>
グリーン
<a class="btn btn-light-green btn-m">ライトグリーン</a>
ライトグリーン
<a class="btn btn-lime btn-m">ライム</a>
ライム
<a class="btn btn-yellow btn-m">イエロー</a>
イエロー
<a class="btn btn-amber btn-m">アンバー[琥珀色]</a>
アンバー[琥珀色]
<a class="btn btn-orange btn-m">オレンジ</a>
オレンジ
<a class="btn btn-deep-orange btn-m">ディープオレンジ</a>
ディープオレンジ
<a class="btn btn-brown btn-m">ブラウン</a>
ブラウン
<a class="btn btn-grey btn-m">グレー</a>
グレー
囲みボタン
<span class="btn-wrap btn-wrap-red">レッド（小）</span>
レッド（小）
<span class="btn-wrap btn-wrap-red btn-wrap-m">レッド（中）</span>
レッド（中）
<div class="btn-wrap btn-wrap-red btn-wrap-l">レッド（大）</div>
以下中のみで表示
<span class="btn-wrap btn-wrap-pink btn-wrap-m">ピンク</span>
ピンク
<span class="btn-wrap btn-wrap-purple btn-wrap-m">パープル</span>
パープル
<span class="btn-wrap btn-wrap-deep btn-wrap-m">ディープパープル</span>
ディープパープル
<span class="btn-wrap btn-wrap-indigo btn-wrap-m">インディゴ</span>
インディゴ
<span class="btn-wrap btn-wrap-blue btn-wrap-m">ブルー</span>
ブルー
<span class="btn-wrap btn-wrap-light-blue btn-wrap-m">ライトブルー</span>
ライトブルー
<span class="btn-wrap btn-wrap-cyan btn-wrap-m">シアン</span>
シアン
<span class="btn-wrap btn-wrap-teal btn-wrap-m">ティール[緑色がかった青]</span>
ティール[緑色がかった青]
<span class="btn-wrap btn-wrap-green btn-wrap-m">グリーン</span>
グリーン
<span class="btn-wrap btn-wrap-light-green btn-wrap-m">ライトグリーン</span>
ライトグリーン
<span class="btn-wrap btn-wrap-lime btn-wrap-m">ライム</span>
ライム
<span class="btn-wrap btn-wrap-yellow btn-wrap-m">イエロー</span>
イエロー
<span class="btn-wrap btn-wrap-amber btn-wrap-m">アンバー[琥珀色]</span>
アンバー[琥珀色]
<span class="btn-wrap btn-wrap-orange btn-wrap-m">オレンジ</span>
オレンジ
<span class="btn-wrap btn-wrap-deep-orange btn-wrap-m">ディープオレンジ</span>
ディープオレンジ
<span class="btn-wrap btn-wrap-brown btn-wrap-m">ブラウン</span>
ブラウン
<span class="btn-wrap btn-wrap-grey btn-wrap-m">グレー</span>
グレー
囲みブログカードラベル
<div class="blogcard-type bct-related">
関連記事
</div>
<div class="blogcard-type bct-reference">
参考記事
</div>
参考記事
<div class="blogcard-type bct-popular">
人気記事
</div>
人気記事
<div class="blogcard-type bct-together">
あわせて読みたい
</div>
あわせて読みたい
<div class="blogcard-type bct-detail">
詳細はこちら
</div>
詳細はこちら
<div class="blogcard-type bct-check">
チェック
</div>
チェック
<div class="blogcard-type bct-pickup">
ピックアップ
</div>
ピックアップ
<div class="blogcard-type bct-official">
公式サイト
</div>
公式サイト
WordPressは、手軽に作成・設定できる機能がたくさんあります。特にこのcocoonには無料でたくさんの機能があり人気のテーマになっています。
この先どのように変化していくのか楽しみです。
ブログカード
cocoon汎用ブロック
ブロックエディタ
見出しボックス
タブ見出しボックス
ラベルボックス