【WordPress】スタイルシート（css）とhtmlで作成した囲い枠

cssとhtmlのみで本文中にメリハリを出す為、枠を作りました。

超参考にさせていただきました。
ありがとうございます。

サルワカ | サルでも分かる図解説明マガジン

【CSS】おしゃれなボックスデザイン（囲み枠）のサンプル30

https://saruwakakun.com/html-css/reference/box

HTMLとCSSのコピペですぐに表示できる『囲み枠』『ボックスデザイン』の例を30個紹介します。Webサイトやブログでご活用ください。

シンプルな囲い枠

css

/* シンプルな囲いグレー */
.box3 {
    width:95%;
    margin: 2em auto 2em ;
    padding: 2em 1em;
    border: solid 2px #7f7f7f;
}
.box3 p {
    margin: 0; 
    padding: 0;
}

html

<div class="box3">
    <p>ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
</div>

枠の途中にタイトルBOX

css

/* タイトル付き囲い */
.box26 {
    position: relative;
    width:95%;
    margin: 3em auto 2.5em ;
    padding: 2em 1em 1.5em;
    border: solid 2px #7f7f7f;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #fc3c3c;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

html

<div class="box26">
    <span class="box-title">ここにタイトル</span>
    <p>ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
</div>

枠線ではなく影によりボックス領域が分かる

css

/* 影付き囲い */
.box11{
    width:95%;
    margin: 2em auto 2em ;
    padding: 2em 1em;
    color: #5d627b;
    background: white;
    border-left: solid 3px #5d627b;
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.22);
}
.box11 p {
    margin: 0; 
    padding: 0;
}

html

<div class="box11">
    <p>ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章ここに文章</p>
</div>

まとめ

少しcssを調整したりはしましたが基本そのままです。
だいぶ華やかになってきました。
シンプルにしたいので、また調整予定です。

文字装飾とボタンデザイン

YUSUKEITO.co

【WordPress】文字装飾とボタンデザイン

https://yusukeito.co/wordpress-text-button-design

hタグ以外でも文字の装飾をして記事内やサイト全体を盛り上げたいと思い、いろいろ作ってみました。アンダーライン（リンク無し）蛍光ペンでラインを引いたようなデザインです。YUSUKEITO.co YUSUKEITO.co YUSUKEITO.co文字に枠を付ける（リンク無し）シンプルな枠のみのデザイン。YUSUKEITO.coリンクボタン上記の枠と似てますがこちらはリンクボタンです。ホバー時に色が反転します。YUSUKEITO.coYUSUKEITO.co同じくリンクボタンですが、ホバー時のアクションを逆にしてみました。赤いボックスロゴ代表のあそこを少し意識し...