cocoon スタイル サンプル

「cocoon」 スタイル サンプル

このホームページはWordPressテーマ「cocoon」を使用して作成しています。

以前のHP作成ソフトを使用してHTMLタグをコーディングしながらの作成を考えると、時代の流れを痛感しています。
cocoon便利さの一例がワンタッチで作成できる以下のスタイルです。

ここに表示されているのが「AMK情報館」現在のCSSスタイルです。

参考のため上段にタグを表示しています。
タグをコピーする場合には[" " ]が大文字になることがあるので注意して下さい[" " ]は小文字です。

※見出しスタイルはスキン適用なしの場合
<h1>見出し1 cocoon スタイル サンプル</h1>

見出し1 cocoon スタイル サンプル

<h2>見出し2 cocoon スタイル サンプル</h2>

見出し2 cocoon スタイル サンプル

<h3>見出し3 cocoon スタイル サンプル</h3>

見出し3 cocoon スタイル サンプル

<h4>見出し4 cocoon スタイル サンプル</h4>

見出し4 cocoon スタイル サンプル

<h5>見出し5 cocoon スタイル サンプル</h5>

見出し5 cocoon スタイル サンプル

<h6>見出し6 cocoon スタイル サンプル</h6>

見出し6 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>

補足情報(i)

<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>

OK

<div class="ng-box common-icon-box">NG</div>

NG

<div class="good-box common-icon-box">GOOD</div>

GOOD

<div class="bad-box common-icon-box">BAD</div>

BAD

<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>

Amazon

<div class="blank-box bb-tab bb-ok bb-yellow">OK</div>

OK

<div class="blank-box bb-tab bb-ng bb-red">NG</div>

NG

<div class="blank-box bb-tab bb-good bb-blue">GOOD</div>

GOOD

<div class="blank-box bb-tab bb-bad bb-green">BAD</div>

BAD

<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には無料でたくさんの機能があり人気のテーマになっています。
この先どのように変化していくのか楽しみです。

 

最初の頃のホームページはcssなしで各項目にスタイルを設定していた記憶があります。cssを使用して一括適用できるようになり便利さを感じていましたが、現在はhtmlタグを知らなくても作成できるようになりました。時代の流れですね…

ブログカード

cocoon汎用ブロック

ブロックエディタ

見出し

見出しボックス

見出し

タブ見出しボックス

見出し

ラベルボックス

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