wordpress JIN ボックスデザイン　チートシート｜もしも普通のサラリーマンがお金とITを学んだら

Contents

シンプルボックス

太枠ボックス

<div class="simple-box1">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

太点線ボックス

<div class="simple-box2">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

二重線ボックス

<div class="simple-box3">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

細枠背景ボックス

<div class="simple-box4">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

細点線背景色ボックス

<div class="simple-box5">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

背景色ボックス

<div class="simple-box6">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

太枠背景色ボックス

<div class="simple-box7">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

左線ボックス

<div class="simple-box8">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

端折れボックス

<div class="simple-box9">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

注意点ボックス

<div class="concept-box2">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

良い例ボックス

<div class="concept-box3">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

悪い例ボックス

<div class="concept-box4">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

参考ボックス

<div class="concept-box5">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

メモボックス

<div class="concept-box6">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

ポイントボックス

<div class="concept-box1">
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ol>
</div>

アイコンボックス

注意

<div class="wp-block-jin-gb-block-icon-box jin-icon-caution jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-caution jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

星

<div class="wp-block-jin-gb-block-icon-box jin-icon-caution jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-star jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

電球

ここに本文を入力

<div class="wp-block-jin-gb-block-icon-box jin-icon-caution jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-bulb jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

カート

<div class="wp-block-jin-gb-block-icon-box jin-icon-caution jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-cart jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

お知らせ

<div class="wp-block-jin-gb-block-icon-box jin-icon-speaker jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-speaker jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

吹き出し

<div class="wp-block-jin-gb-block-icon-box jin-icon-comment jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-comment jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

チェック

<div class="wp-block-jin-gb-block-icon-box jin-icon-checkcircle jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-checkcircle jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

鉛筆

<div class="wp-block-jin-gb-block-icon-box jin-icon-pencil jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-pencil jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

情報

<div class="wp-block-jin-gb-block-icon-box jin-icon-information jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-information jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

歯車

<div class="wp-block-jin-gb-block-icon-box jin-icon-gear jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-gear jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

クリップボード

<div class="wp-block-jin-gb-block-icon-box jin-icon-clipboard jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-clipboard jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

<div class="wp-block-jin-gb-block-icon-box jin-icon-like jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-like jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

よくない

<div class="wp-block-jin-gb-block-icon-box jin-icon-unlike jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-unlike jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

ハート

<div class="wp-block-jin-gb-block-icon-box jin-icon-heart jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-heart jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

はてなマーク

<div class="wp-block-jin-gb-block-icon-box jin-icon-question jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-question jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

旗

<div class="wp-block-jin-gb-block-icon-box jin-icon-flag jin-iconbox">
    <div class="jin-iconbox-icons">
        <i class="jic jin-ifont-flag jin-icons">
        </i>
    </div>
    <div class="jin-iconbox-main">
        <p>ここに本文を入力</p>
    </div>
</div>

2カラム

aaa

bbb

<div class="wp-block-columns">
    <div class="wp-block-column">
        <div class="wp-block-jin-gb-block-icon-box jin-icon-like jin-iconbox">
            <div class="jin-iconbox-icons">
                <i class="jic jin-ifont-like jin-icons">
                </i>
            </div>
            <div class="jin-iconbox-main">
                <p>aaa</p>
            </div>
        </div>
    </div>
    <div class="wp-block-column">
        <div class="wp-block-jin-gb-block-icon-box jin-icon-unlike jin-iconbox">       <div class="jin-iconbox-icons">
                <i class="jic jin-ifont-unlike jin-icons">
                </i>
            </div>
            <div class="jin-iconbox-main">
                <p>bbb</p>
            </div>
        </div>
    </div>
</div>