f:id:metaru333kitigai777:20161227025828j:plain

 

サンプル
このような囲み枠線を色々とカスタマイズするよ！
カスタマイズの内容はとても簡単だよ！

 

 こんにちは、ブログをカスタマイズしている　よつば君です。

今回は、テキスト文を見出し付の囲み枠線でオシャレにするカスタマイズ方法をご紹介します。（上記のサンプルのような感じ）

ご紹介する方法は、はてなブログ等の各ブログサービスや、Ｗｏｒｄｐｒｅｓｓで使用できます。

はてなブログとＷｏｒｄｐｒｅｓｓでは確認済み。

気に入ったデザインがありましたら、コピペしてお使いください。

尚、今回の囲い枠にはリンクを挿入することもできます。

 

スポンサ－リンク

目次

 

見出し付囲み枠の基本形

次に示す見出し付の囲み枠を基本形として、様々な形態にカスタマイズします。 

タイトル
こんにちは
こんばんは

 基本形のコードです。

<div><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold;”>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>こんにちは<br /> こんばんは</div>

 

 見出し、枠線の色を変える

 見出しと枠線の色を変更します。今回は青色に変更します。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

好きな色に変更してください。

<div><span style=”padding: 6px 10px; background: #007bc3; color: #ffffff; font-weight: bold;”>タイトル</span></div>
<div style=”border: 2px solid #007bc3; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>こんにちは<br /> こんばんは</div>

 

 見出し文字の色を変える

 見出し文字の色を変えます。今回は黒に変更しています。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

好きな色に変更してください。

<div><span style=”padding: 6px 10px; background: #ff0000; color: #000000; font-weight: bold;”>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>こんにちは<br /> こんばんは</div>

 

囲み枠の背景色を変更

囲み枠の背景色を変えてみます。

今回はピンク色にします。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

好きな色に変更してください。

<div><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold;”>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #ffbfbf;”>こんにちは<br /> こんばんは</div>

 

囲み枠線の種類を変更

囲み枠線の線の種類を変えます。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

好きな線に変更してください。

div><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold;”>タイトル</span></div>
<div style=”border: 2px dotted #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>こんにちは<br /> こんばんは</div>

 枠線の種類

solid ⇒ 実践

dotted ⇒ 点線

double ⇒ 二重線

 

囲み枠線の太さの変更

囲み線の太さを変えます。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

囲み線を好な太さに変更してください。

<div><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold;”>タイトル</span></div>
<div style=”border: 10px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>こんにちは<br /> こんばんは</div>

 

スポンサ－リンク

囲み枠に影をつける。（ドロップシャドウ）

囲み枠に影を付けて、立体的にします。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

囲み枠の影を好きな距離に配置してください。

<div><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold;”>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0; box-shadow: 10px 10px 10px #AAA;“>こんにちは<br /> こんばんは</div>

 

見出しの横幅を変更 

見出しの横幅のサイズを変えます。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

見出しの横幅を好きなサイズに変更してください。

<div><span style=”padding: 6px 100px; background: #ff0000; color: #ffffff; font-weight: bold;”>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>こんにちは<br /> こんばんは</div>

 

見出しの高さを変更

見出しの高さを変えることができます。

 

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

見出しの高さ好きなサイズに変更してください。

<div><span style=”padding: 20px 10px; background: #ff0000; color: #ffffff; font-weight: bold;”>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>こんにちは<br /> こんばんは</div>

 

見出しの角部を丸く 

見出しの角部を丸くしてオシャレにします。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

見出しの角を好きな半径に変更してください。

<div><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold; border-radius: 10px 10px 0 0;”>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>こんにちは<br /> こんばんは</div>

 

見出しと囲み枠の角を丸く

見出しの角部と囲み線の角を丸くしてオシャレにします。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

見出しの角並びに囲み枠の角を好きな半径に変更してください。

<div><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold; border-radius: 10px 10px 0 0;”>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0; border-radius: 0 10px 10px 10px;”>こんにちは<br /> こんばんは</div>

 

見出しを囲み枠側に移動

見出しを囲み枠側に移動させます。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

見出し囲み線側に移動するよう好きな距離に変更してください。

<div style=”height: 15px;”><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold;”>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>こんにちは<br /> こんばんは</div>

 

見出しをズラす

見出しを向かて右側に少し移動させます。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

見出しを移動する際に利用しましょう。

<div style=”height: 15px;”><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold; margin-left: 20px;“>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>こんにちは<br /> こんばんは</div>

 

 

見出しをズラして角を丸く

見出しを向かて右側に少し移動させ、見出しの角を丸くします。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

見出しを移動させ見出しの角を丸くするときに利用しましょう。

<div style=”height: 15px;”><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold; margin-left: 20px; border-radius: 10px 10px 10px 10px;“>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>こんにちは<br /> こんばんは</div>

 

 見出しをズラして見出しと囲み枠線の角を丸く

見出しをずらして囲み枠と見出しの角部を丸くします。

タイトル
こんにちは
こんばんは

 

下記のコードで赤くなっている部分が基本形からの変更点です。

見出しを移動させ囲み枠線と見出しの角を好きな半径に丸くしましょう。

<div style=”height: 15px;”><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold; margin-left: 20px; border-radius: 10px 10px 10px 10px;“>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0; border-radius: 10px 10px 10px 10px;”>こんにちは<br /> こんばんは</div>

 

枠内の箇条書き（ulタグ）を揃える

 

タイトル
  • １行目ですよ。
  • ２行目ですよ！
  • ３行目だよーーーん

 

 下記のコードで赤くなっている部分が基本形からの変更点です。

 箇条書きにすることが出来ます。

<div><span style=”padding: 6px 10px; background: #ff0000; color: #ffffff; font-weight: bold;”>タイトル</span></div>
<div style=”border: 2px solid #ff0000; padding: 10px; font-size: 0.9em; margin-top: 0px; background-color: #fffff0;”>
<ul>
<li>１行目ですよ。</li>
<li>２行目ですよ！</li>
<li>３行目だよーーーん</li>
</ul>
</div>

 

 

枠内にリンクを貼り付ける

 下記に示すように、枠内にリンクを挿入することもできます。

タイトル

 

 

 

以上、見出し付 囲み枠線をカスタマイズ はてなブログやWordPressで。でした。