ブログ（アメブロ）をかっこよくデザイン！囲み枠

ホームページを立ち上げたのが2005年。

サーバー　えっ？

HTML　何それ？

ヘッダー　はぁ？

何にもわからず、試行錯誤をしながら構築し、何とか自身の作品発表の場として作成。

当時は、イラストレーション作品専用として使っておりました。

それから更新を繰り返し、現在の形になっています。

全て独学からはじまったサイト制作です。

かまゆみアート研究所トップページ

ブログ上でもかっこよくデザイン！

わたしがレイアウトに使う囲み枠デザインを紹介します。

ブログをかっこよくデザイン！囲み枠

囲み枠のタグをコピーして、記事編集エディタの「HTML表示」に切り替えて貼り付け。

改行する時は※Shift+Enter　

これをしなければ形が崩れるので、気をつけましょう！

【シンプル囲み枠】

■太枠

ここに文をいれる

<fieldset style="border: 2px solid #51b4db;">ここに文をいれる</fieldset>

・・

ここに文をいれる

<fieldset style="border: 1px solid #db51ad;">ここに文を入れる</fieldset>

・・

ここに文をいれる

<fieldset style="border: 1px solid #51dba8;">ここに文を入れる</fieldset>

・・

ここに文をいれる

<fieldset style="border: 1px solid #e3b6ba;">ここに文を入れる</fieldset>

・・

■細枠

ここに文を入れる

<fieldset style="border: 1px solid #4d7362;">ここに文を入れる</fieldset>

・・

こここに文を入れる

<fieldset style="border: 1px solid #e00707;">ここに文を入れる</fieldset>

・・

ここに文を入れる

<fieldset style="border: 1px solid #4d4e73;">ここに文を入れる</fieldset>

・・

ここに文を入れる

<fieldset style="border: 1px solid #bf365d ;">ここに文を入れる</fieldset>

・・

■二重線枠

ここに文をいれる

<fieldset style="border: 4px double #33ccff; padding: 15px;">ここに文をいれる</fieldset>

・・

こここに文をいれる

<fieldset style="border: 4px double #800a0e; padding: 15px;">ここに文をいれる</fieldset>

・・

ここに文をいれる

<fieldset style="border: 4px double #4e1899; padding: 15px;">ここに文をいれる</fieldset>

・・

■点線枠

ここに文を入れる

<fieldset style="border: 2px dotted #ff0000;">ここに文をいれる</fieldset>

・・

ここに文を入れる

<fieldset style="border: 2px dotted #c9b94d;">ここに文を入れる</fieldset>

・・

ここに文を入れる

<fieldset style="border: 2px dotted #4dc966;">ここに文を入れる</fieldset>

・・

■ベタ塗り枠

ここに文を入れる

<fieldset style="background:#fabeec; padding:10px; border:none;">ここに文を入れる</fieldset>

・・

ここに文を入れる

<fieldset style="background:#374e73; padding:10px; border:none;">ここに文を入れる</fieldset>

・・

ここに文を入れる

<fieldset style="background:#bddec2; padding:10px; border:none;">ここに文を入れる</fieldset>

・・

■タイトル（見出し）枠

タイトル

ここに文を入れる

<div style="background:#09686b; border:1px solid #09686b ; padding-left:10px; font-size:1.16em;"><font style="color:#ffffff; font-weight:bold;">タイトル</font></div><div style="border:1px solid #09686b; padding:10px; font-size:1em;">ここに文を入れる<br></div>

・・

■タイトル（見出し）二重線枠

タイトル

ここに文を入れる

<fieldset style="border:4px double #0075c2;"><legend>タイトル</legend>ここに文をいれる</fieldset>

・・

■タイトル（見出し）枠

タイトル

<div style="border-left: 10px solid #ef454a; border-bottom: 2px solid #ef454a; padding-left: 10px; font-weight: bold; font-size: 130%; color: #000000;">タイトル</div>

・・

カラーをアレンジ！自分好みに変更

それぞれある〈#〇〇〇〇〇〇〉

例えば〈#0075c2〉の英数字（６文字）を変えるだけで色変更可能！

カラー見本はこちら

（ただしかっこよく見やすくするには、色の統一感も必要です）

　

子供向け講座➡イラストレーター体験講座・イラスト制作講座・夏休み宿題講座

ブログ囲み枠デザイン➡アメブロ囲み枠

デザイン/イラスト/工作制作承ります➡先生の名刺デザインetc

■All About子育て・暮らし関連記事発信中➡子供の絵画工作ガイドかまゆみ記事

■全国招致受付しております！➡お問い合わせはこちら

■マスメディアからの取材・依頼➡依頼はこちら