記事を囲む枠

●　記事を囲む枠

こんにちは、石川聡です。

記事の中に、枠入りの囲みを入れる方法です。

見本のサンプルとコードを書いておきます。■タイトルを入れる■を消してあなたが書きたいタイトルを入れます。

ここに文章を書く、が本文になります。あなたが書きたい文章を書いてください。

色ですが、#000000となっている#の後ろの６桁を変えると色が変ります。

・タイトル幅が文字幅だけのタイプ

■タイトルを入れる■

ここに文章を書く

使うコードはこちらです。コピー＆ペーストでお使い頂けます。

下の枠内のコードをすべてコピーしてお使いください。

<font style="padding:6px 10px; background:#000066; color:#ffffff; font-weight:bold; height:15px;">■タイトルを入れる■</font><div style="border:1px solid #000066; padding:10px; margin-top:2px;">ここに文章を書く</div>

・タイトル枠幅と記事枠幅が同じタイプ

■タイトルを入れる■

ここに文章を書く

使うコードはこちらです。コピー＆ペーストでお使い頂けます。

下の枠内のコードをすべてコピーしてお使いください。

<div style="background:#000066; border:1px solid #000066; padding-left:10px;"><font style="color:#ffffff; font-weight:bold; line-height:25px;">■タイトルを入れる■</font></div><div style="border:1px solid #000066; padding:10px;">ここに文章を書く</div>

・タイトル枠幅と記事枠幅が同じで角を丸くしたタイプ

■タイトルを入れる■

ここに文章を書く

使うコードはこちらです。コピー＆ペーストでお使い頂けます。

下の枠内のコードをすべてコピーしてお使いください。

<div style="background:#000066; border:1px solid #000066; padding-left:10px; border-radius: 5px 5px 0 0; line-height:25px;"><font style="color:#ffffff; font-weight:bold;">■タイトルを入れる■</font></div><div style="border:1px solid #000066; padding:10px; border-radius: 0 0 5px 5px;">ここに文章を書く</div>

・タイトルが浮き出ているタイプ

■タイトルを入れる■

ここに文章を書く

使うコードはこちらです。コピー＆ペーストでお使い頂けます。

下の枠内のコードをすべてコピーしてお使いください。

<div style="height:12px;"><span style="margin-left:8px; padding:6px 10px; background:#000066; color:#ffffff; font-weight:bold; border-radius:5px;">■タイトルを入れる■</span></div><div style="border:1px solid #000066; padding:22px 10px 10px; border-radius:5px;">ここに文章を書く</div>

・影を付けたタイプ

■タイトルを入れる■

ここに文章を書く

使うコードはこちらです。コピー＆ペーストでお使い頂けます。

下の枠内のコードをすべてコピーしてお使いください。

<div style="border:1px solid #000066; margin:0 3px; padding:0;border-radius:5px; box-shadow:#ccc 3px 3px 3px;"><p style="margin:0; padding:3px 10px; background:#000066; color:#ffffff; font-weight:bold; line-height:20px;">■タイトルを入れる■</p><div style="padding:10px;">ここに文章を書く</div></div>

また、アレンジを変えるとこのようなこともできます。

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

また色違いのタイプもサンプルとして入れておきます。リクエストがあれば、色違いのサンプルとコードを追加しようと思います。

・色違いのタイプ

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

・色違いのタイプ

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

・色違いのタイプ

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

・色違いのタイプ

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

■タイトルを入れる■

ここに文章を書く

このように、色を変えるだけあなたのブログにあったタイプが使えますよ。

お役に立てれば幸いです。

コメントにリクエストなど、気軽にお書きくださいね。

お仕事ブログのつくり方と基礎からサポート

営業時間：９時から２３時
定休日：不定休
山梨県甲府市千塚３－８－５
090-9310-1160

日本一わかりやすい！アメブロのはじめ方
お仕事ブログのつくり方と基礎からサポート
お客さまの声
お問い合わせ
メール　satoshi.vw@gmail.com
電話　090-9310-1160

初心者の方のための、お店やお仕事ブログづくりを基礎からお手伝い。アメブログのプロフィール写真のアップの方法。

記事への画像の入れ方。リンクのつけ方、問合せ申し込みフォームの入れ方、デザイン、カスタマイズをサポートします。