コピペするだけ！タイトルを自由に変えられる枠組みのHTMLコード

みなさんこんにちはあやぴんです。
今回はタイトル付きの枠組みのHTMLコードをご紹介したいと思います。
非常に自由が高いので、お好きなようにカスタマイズも可能なものです。

HTMLをコピペするだけで使える枠組み！

枠組みイメージ

枠組みイメージとポイント

• これが枠組みイメージです
• タイトル部分は自由に変更可能です。
• 箇条書きや番号付きリストも使用できます
• 文字の大きさも変更可能なので、自由に使ってください。

今回紹介する大きな特徴としては、タイトルの文章を自由に変えられるという点です。
よく紹介されているタイトル付き枠組みは、タイトルの文章が固定されているものが多いと思います。

今回紹介する枠組みはタイトル文を自由に編集することができます。
しかも、HTMLをコピペするだけで使えるので、より使い勝手が良いと思います。

使い方

 <div style="
            padding:3px;
            margin-bottom:0px;
            border: 2px solid #df8182;
            background-color: #df8182;
            color: #ffffff;
            text-align: center;
            font-weight: bold;
            vertical-align: middle;">
            タイトルがここに入ります。
</div>
<div style="
            padding: 10px;
            margin-bottom: 10px;
            border: 2px solid #df8182;
            background-color: #fffbf5;">
            本文がここに入ります。

</div>

使い方は非常に簡単です。

上記のHTMLコードをコピーしてください。コピーしたら、そのHTMLコードを張り付けるだけです。はてなブログをご利用の方は「HTML編集」というところから、張り付けてください。

タイトルを編集したい場合は、コード内の「タイトルがここに入ります。」を編集してください。同様に、本文を編集したい場合は、コード内の「本文がここに入ります。」を編集してください。

カスタマイズも簡単

カスタマイズも非常に簡単です。上記のHTMLコードを編集するだけとなっています。
様々変更することができますが、今回は枠の色を変更したいと思います。

枠の色を変える

 <div style="
            padding:3px;
            margin-bottom:0px;
            border: 2px solid #df8182;
            background-color: #df8182;
            color: #ffffff;
            text-align: center;
            font-weight: bold;
            vertical-align: middle;">
            タイトルがここに入ります。
</div>
<div style="
            padding: 10px;
            margin-bottom: 10px;
            border: 2px solid #df8182;
            background-color: #fffbf5;">
            本文がここに入ります。

</div>

枠の色を変えたい場合は、上記赤字部分を変更してください。
カラーコードを使用して色を指定することができます。

変更すると以下のような色の変更が行われます。

枠の色変更

• 枠の色を変更してみました
• 今回は青色(#0079c2)にしています。

カラーコードのサンプルサイト

カラーコードの変更するにあたって、参考になる色のサンプルサイトを紹介します。上記サイトでは様々な色のサンプルと、カラーコードを確認することができます。ブログのカスタマイズに参考になるサイトなので、非常におすすめです。

まとめ

今回はタイトル付きの枠組みを紹介しました。
是非利用していただき、より素敵なブログにしてみてください。