PCインストラクターの川上です。
最近、囲い枠をお探しの方から、私のブログにお越しになる方が多いような気がします(笑)
・・・で、みなさん・・・
なんか・・・
パワーアップしているような気がするのは、私だけでしょうか・・・(笑)
今回は、記事内の囲い枠でも、チェックマークのついた囲い枠をご紹介いたしますね。
チェック項目その1
チェック項目その2
チェック項目その3
チェック項目その4
チェック項目その5
チェック項目その2
チェック項目その3
チェック項目その4
チェック項目その5
こちら↓のHTMLソースを、「HTML表示」or「HTMLタグ」でコピペして、中の文字「チェック項目その〇」を書き換えてくださいね。
<div style="padding:10px; border-radius: 10px; border: 2px dotted #ff0000;"><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その1<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その2<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その3<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その4<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その5</div>
さらに、枠に影をつけたいのであれば、「width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #999;」を追加すればできます。↓↓↓(ただし、IE8以前だと影は見えませんのでご注意を)
一応、影付きのパターンものせておきますね^^!
チェック項目その1
チェック項目その2
チェック項目その3
チェック項目その4
チェック項目その5
チェック項目その2
チェック項目その3
チェック項目その4
チェック項目その5
<div style="padding:10px; border-radius: 10px; border: 2px dotted #ff0000; width: auto; margin-right: 6px; box-shadow: 5px 5px 5px #999;"><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その1<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その2<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その3<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その4<br><img src="http://emoji.ameba.jp/img/user/cy/cyber-systems/261729.gif" amebaid="cyber-systems" emojiid="261729" alt="チェック"> チェック項目その5</div>
よかったら、チェックしてもらいたい記事を書くときにでも、お使いくださ~~い^^!
ちなみに・・・
この
は
新エディタの右欄の「装飾」タブ内の「みんなの絵文字」(みなさんが作った絵文字)で、「チェック」と検索すると出てきます。
この使用したチェックマークは
cyber-systemsさんが作った絵文字を使っております^^!
みなさんも、「絵文字を描く」を押して、作ることができますので!!
<参考>
コメントにて、「具体的にどのように使うのですか~?」
といったご質問いただいております^^;
それは、こちらの方の記事をご覧になってくださいませ↓↓↓
ふえるさんから
*** 使用例 *** チェックマークのついた囲い枠を使ってみよう
ネット集客コンサルタントの武藤正隆さんから
札幌雪まつりは2月5~2月11日まで開催です。
以上、ワンポイントレッスンでした。
LIDS澄川・ライフデザインスクール
川上 雄大