アメブロ記事を囲むかわいい囲み枠の作り方

　こんにちは。水上里美です。
今日から１２月ですね。

今年も残すところ１ヶ月、やりたいことがたくさん
あるので体調に気をつけて行きたいですね～。

タグ編集エディタを使い始めてから、慣れてないので
１記事書くのに時間がかかりますが、
・リンクした時にバグったり。
・色が変わらない～。
・文字の大きさ変えたのに変わってない。
ということがなくなりましたよ


よく使う囲み枠をまとめてみました。

見出し付きの枠


■ピンク用のタグ

ここにタイトルを入れます。

ここに枠で囲みたい内容を入れます。

■オレンジ用のタグ

ここにタイトルを入れます。

ここに枠で囲みたい内容を入れます。

■グリーン用のタグ

ここにタイトルを入れます。

ここに枠で囲みたい内容を入れます。

■ブルー用のタグ

ここにタイトルを入れます。

ここに枠で囲みたい内容を入れます。

点線の囲み枠

■ピンク用のタグ

ここに枠で囲みたい内容を入れます。

■イエロー用のタグ

ここに枠で囲みたい内容を入れます。

■グリーン用のタグ

ここに枠で囲みたい内容を入れます。

■ブルー用のタグ

ここに枠で囲みたい内容を入れます。

※アトリエカルネさんからお借りしました。



そして、ここからワンポイントレッスン

シンプルな囲み枠１

<div style=\"padding:10px; border:1px solid #9900ff;\">シンプルな囲み枠１<br>
</div>

シンプルな囲み枠１

<div style=\"padding:10px; border:3px solid #ff7fbf;\">シンプルな囲み枠１<br>
</div>

ピンクの数字が枠線の太さ、数字が大きくなると線が太くなる。

ブルーのコードは色を表しています。
カラーコードはこちらを参考にしてね。
パステルカラーの囲み枠が作れますよ！


線を実線にしたいときは？
「dotted」の部分を「solid」に変更します。

角丸でない四角にしたいときは？
「border-radius:10px;」の部分を削除します。



試してみてくださいね＾＾


やってみたけど、わからない
作っていたら形が崩れた
上手く表示されないというときは、

こちらの初心者向けPC個人レッスンもおすすめですよ！

忙しくて入園グッズを作る

暇のないお母さんはHPをみてね♪

りんごの木 ホームページはこちらから

↓イベントのご案内♪

大須観音（名古屋市）の目の前の雑貨屋さんです。

お買い物がてら遊びにきてね

イベントのFacebookページを開設しました！



出来上がったグッズをどんどんアップしていきます。

製作の裏話やお得情報もお知らせしますので、

facebookをお使いの方々は、ぜひ「いいね！」

ボタンのクリックをお願いいたします！！

facebookページはこちら