＜お役立ち情報＞私好みの囲み枠一覧
お待たせしました
私がよく使っている囲み枠の一覧を作成しました。
囲み枠を使うとどうなるの
スッキリまとまる
見た目が綺麗
知りたい情報がわかりやすい
など、
言うことなし
よかったら使ってみて下さいね
どのブログでもお使い頂けます。
使い方は最後に。
まずはお好みの囲み枠をお選び下さい。
＊枠のカラーはお好みのものに変更して頂けます。
（私がピンク系が好きなのでピンクが多いです）
<div style=”padding:10px;border-radius: 5px;border: 1px solid #FF409F;”>本文</div>
<div style=”padding:10px;border-radius: 5px;border: 2px solid #FF409F;”>本文</div>
<div style=”padding:10px;border-radius: 5px;border: 2px solid #CCCCCC;”>本文</div>
<div style=”background: #fcfae1; padding: 10px; border-radius: 10px; border: 2px dotted #ff8080;”>本文</div>
<div style=”background:#fcfae1; padding:10px; border-radius: 10px; border: 2px solid #ff8080;”>本文</div>
<div style=”background:#eeeeff; padding:10px; border:2px dotted #ff8080;”>本文</div>
<div style=”padding:10px;border-radius: 10px; border: 5px double #ff8080;”>本文</div>
タイトル
本文
<div style=”border: #ff8080 3px double; padding: 6px; background-color: #ffffff; margin: 5px; color: #333333; border-radius: 10px; box-shadow: 5px 5px 5px #AAAAAA”><p><strong>タイトル</strong></p><p>本文</div>
<div style=”background:#000066; border:1px solid #000066; padding-left:10px; font-size:1.16em;”><font style=”color:#ffffff; font-weight:bold;”>■タイトル■</font></div><div style=”border:1px solid #000066; padding:10px; font-size:1em;”>本文</div>
＊＊＊
使い方
上記のお好み枠のタグ＜div＞～＜/div＞
最初から最後までをコピーし
お使いのブログに張り付けて下さい。
例えば
この囲み枠の場合
タグはこちらになります
<div style=”padding:10px;border-radius: 5px;border: 1px solid #FF409F;”>本文</div>
<div style=”padding:10px;border-radius: 5px;border: 1px solid #FF409F;”>本文</div>
タグ全部をコピーします。（全部選び、右クリックでコピー）
そしてご自分のブログの貼りたい場所に張り付ける。
（右クリックで張り付け）
＊必ず、ＨＴＭＬ表記のページに張り付けて下さいね！
↓それだけで囲み枠が出て来ます。
あとは、タグを良く見て・・・
<div style=”padding:10px;border-radius: 5px;border: 1px solid #FF409F;”>本文</div>
本文のところに文字を入力するだけです。
難しかったら・・・
＜div～～～～～＞本文＜/div＞
これをよ～く見ます
＜＞本文＜＞
＜＞カッコの位置を見つける。
＜＞ＨＴＭＬタグにはある法則があります
作文を思い出して下さい
『先生あのね、今日雪が降ったよ。』
『←このカッコをつけたら』←このカッコで閉じる
この法則を使うだけ
＜＞このかっこの中に文章を入れる＜＞←このカッコで閉じること
出来ましたか
やってみたけど・・・
- わからない
- 出来ない
- もういやだ
そんな方はコメント下さい
お手伝いします
もちろん、枠のカラー変更も出来ます
枠のカラーを変えたい場合は
<div style=”padding:10px;border-radius: 5px;border: 1px solid #FF409F;”>本文</div>
この＃から始まるカラー表記をお好みのものに変更するだけです。
カラーコードはこちら
参考
カラーコード
来週、マンツーマンサポートの会で
囲み枠のご説明をします。
それに向けてまとめてみました
あと数点追加しておこうと思います。
困った時はここに書いてあったな～
そんなお役に立てるブログになればいいな～
ブログカスタマイズのお問い合わせは
こちら
コメントもお気軽に
コメント♪