WordPress「BOX」のデザイン作成

WP(WordPress）の投稿に使う「BOX」のデザインを作成してみました。

WPの「BOX」は、見出しと文章で構成された枠付きのデザインです。文章の中で注釈などにつかえてアクセントになります。

こんな感じのBOX

デザイン設置手順

デザインの作成はこちらのサイトを利用させていただきました

デザインを選ぶ

良さそうなデザインを選びます。

数種類のBOXデザインの中からこれを使うことにしました。

左の基調色をクリックし色を設定します。

次に進み、HTML文をコピーし、投稿記事に　カスタムHTML　ブロックを使って貼り付けます。

今回、コピーしたHTML文

<div class="box-013">
    <span>タイトル</span>
    <p>枠内の上中心にタイトルを付けたボックス。タイトルをより目立たせたい場合や文字数が長くなる場合におすすめです。</p>
</div>

次に進み、CSS文をコピーします。

今回、コピーしたCSS文

.box-013 {
    max-width: 400px;
    margin: 0 auto;
    border: 2px solid #d02536;
    border-radius: 3px;
}

.box-013 span {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .5em 0;
    background-color: #d02536;
    color: #fff;
    font-weight: 600;
}

.box-013 p {
    margin: 0;
    padding: 1em 1.5em;
    color: #333;
}

コピーしたCSS文をWPの管理画面　カスタマイズ　→　追加CSS　を開き貼り付けます。

以上で設置完了です。

投稿記事を編集します

記事に貼り付けたHTML文を編集しBOXの文章を整えます。

次のサイトは素敵なデザインが沢山掲載されています。