壊れかけのブラウザ
※追記
・iPhoe(スマホ)から枠を作る方法はこちらをご覧くださいませ→『』
・出演情報のテンプレート枠はこちらをご覧くださいませ→『』
● アメブロ 記事内に枠で囲む方法(囲い枠・囲み枠・枠囲い)
いつも私の記事をご覧になっていただいている(きっと…、多分…^^;)読者の方から、次のご質問をいただきました。
強調したい記事を枠で囲む方法をお願いします!
機会があったらで結構です。
今度こそ!チャレンジしたいです。
★素直な自分を大切にするふわりまみ★さん
って・・・
↑↑↑このような枠のことですよね~^^!
囲い枠・囲み枠・枠囲いを使うと、記事内で目立たせることができますものね^^!
私も勇気をもって、お答えしたいと思います^^
ご質問ありがとうございます!
まず、この枠はどうやって作ったか、というと・・・
(「タグ編集エディタ」の場合はそのまま)
※ご自分の利用しているエディタが何かがわからない場合は、こちらの記事『』をご参照くださいませ。)
&bsp;
(↑2017年5月8日をもって《旧エディタ》の利用は停止になります。→『』)
<div style="backgroud:#ffeeee; paddig:10px; border:2px dotted #ff0000;">枠内の記事本文</div><br>
(「タグ編集エディタ」の場合はそのまま、貼り付けます)
(「タグ編集エディタ」の場合はそのまま、そこで編集します)
すると、このようなピンク色の枠ができているはずです↓↓↓
以上ですが、要は貼り付ける場所を間違えないことです!
([タグ編集エディタ]の場合は、そのままタグを貼り付けて編集します。)
それから、枠囲いのタグをいくつか用意しておきますので、そのまま使いたいのがあれば、ご利用ください^^!
<div style="backgroud:#eeeeff; paddig:10px; border:2px dotted #0000ff;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
角を丸くするには、「border-radius: 10px;」を追加すればよいだけですので。
(ただし、角丸はIE8以前だと丸く見えませんのでご注意を!)
(角を丸くするのに、もっと万全を期したい方は下の
<div style="backgroud:#eeeeff; paddig:10px; border-radius: 10px; border: 2px dotted #0000ff;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="backgroud:#ffeeee; paddig:10px; border:2px dotted #ff0000;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="backgroud:#ffeeee; paddig:10px; border-radius: 10px; border: 2px dotted #ff0000;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="backgroud:#bfffdf; paddig:10px; border:2pxdotted #00bf00;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="backgroud:#bfffdf; paddig:10px; border-radius: 10px; border: 2px dotted #00bf00;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="backgroud:#f7f7f7; paddig:10px; border:2px dotted #CCCCCC;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="backgroud:#f7f7f7;paddig:10px;width: auto;margi-right:6px;box-shadow: 5px 5px 5px #AAA;border: 2px dotted #CCCCCC;">枠内の記事本文</div><br>
枠内の記事本文
<div style="backgroud: rgb(247, 247, 247); paddig: 10px; border: 1px dotted rgb(204, 204, 204);">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="backgroud:#f7f7f7; paddig:10px; border-radius: 10px; border: 2px dotted #CCCCCC;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="backgroud:#f9f9f9;paddig:15px;border:3px dotted #999999;border-radius:10px;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="backgroud:#f9f9f9;paddig:15px;border:3px dotted #999999;border-radius:10px;">
さらに、枠に影をつけたいのであれば、「box-shadow: 5px 5px 5px #999;」を追加すればできます。↓↓↓(ただし、IE8以前だと影は見えませんのでご注意を)
<div style="backgroud:#ffeeee; paddig:10px; border-radius: 10px; border: 2px dotted #ff0000; width: auto; margi-right:6px; box-shadow: 5px 5px 5px #999;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="backgroud:#f7f7f7;paddig:10px;width: auto;margi-right:6px;border-radius: 10px;box-shadow: 5px 5px 5px #AAA;border: 2px dotted #CCCCCC;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="backgroud:#f7f7f7;paddig:10px;border:3px dotted #ffb6c1;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
(ただし、角丸はIE8以前だと丸く見えませんのでご注意を)
<div style="backgroud:#f7f7f7; paddig:10px; border-radius: 10px; border: 3px dotted #ffb6c1;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="paddig:10px;border-radius: 5px;border: 2px solid #ff0000;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="paddig:10px;border-radius: 10px; border: 5px double #0000ff;">枠内の記事本文</div><br>
複数行ほしい方はこちら↓
<div style="paddig:10px;border-radius: 20px; border: 3px dotted #00ff00;">枠内の記事本文</div><br>
<div style="paddig:10px;border-radius: 20px; border: 3px dotted #00ff00;">・1行目<br>・2行目<br>・3行目<br>・4行目<br>・5行目</div><br>
本文1
本文2
本文3
本文4
本文5
<div style="border: #b0e0e6 3px double; paddig: 6px; backgroud-color: #ffffff; margi: 5px; color: #333333; border-radius: 10px; box-shadow: 5px 5px 5px #AAAAAA"><p><strog>タイトル</strog></p><p>本文1<br>本文2<br>本文3</p><p>本文4<br>本文5</p></div><br>
実線 → solid
点線&bsp;→&bsp;dotted
破線&bsp;→&bsp;dashed
二重線&bsp;→&bsp;double
線なし&bsp;→&bsp;oe
(IE10以降で有効)
(画像表示↓)
(現在のブラウザ表示↓)
○○○
○○○
○○○
○○○
<div style="backgroud-image:liear-gradiet(#dd4a5c,#e4707e,white,#e4707e,#dd4a5c);backgroud-color:#ffeeee; paddig:10px; width: auto;margi-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
(IE10以降で有効)
(画像表示↓)
(現在のブラウザ表示↓)
○○○
○○○
○○○
○○○
<div style="backgroud-image:liear-gradiet(#e4707e,white,white,white,#e4707e);backgroud-color:#ffeeee; paddig:10px; width: auto;margi-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
(IE10以降で有効)
(画像表示↓)
(現在のブラウザ表示↓)
○○○
○○○
○○○
○○○
<div style="backgroud-image:liear-gradiet(#ffeeee,#ffdddd,#ff9999);backgroud-color:#ffeeee; paddig:10px; width: auto;margi-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">&bsp;○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
(IE10以降で有効)
(画像表示・・・IE10以降)
(現在のブラウザ表示↓)
○○○
○○○
○○○
○○○
<div style="backgroud-image:liear-gradiet(#f7fbfc,#d9edf2,#add9e4);backgroud-color:#eeffff; paddig:10px; width: auto;margi-right:6px; border-radius: 10px;border: 2px dotted #333333; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
(背景をグラデーションにしたい場合は、こちらをご参照くださいませ。)
<fieldset><leged><strog>◆枠の見出し</strog></leged>1)枠内の記事本文1<br>2)枠内の記事本文2<br>3)枠内の記事本文3</fieldset><br>
枠線を変えるにはこちらをご覧ください↓
この<fieldset>タグには1つ注意点があります。
それはケータイやスマホ(モバイル版)では機能しないということです。(スマホもパソコン版なら大丈夫ですが…)
今この記事をケータイやスマホ(モバイル版)で見ているのであれば、上記の「◆枠の見出し」の部分は囲まれてませんよね。
記事内に<fieldset>タグを使って枠を表示すると、パソコンでは枠がきれいに表示されますが、ケータイやスマホ(モバイル版)から見ると枠なしになります。
あとは、ご自分のお好きな色で枠を作るといいですね^^
当ブログでも色関係の記事があります↓
(ちなみに、この↑↑↑見出しのタグは・・・
<div style="paddig: 0px 0px 1px 5px; fot-size: 1.2em; fot-weight: bold; border-bottom-color: rgb(0, 0, 102); border-left-color: rgb(0, 0, 102); border-bottom-width: 2px; border-left-width: 8px; border-bottom-style: solid; border-left-style: solid;">この記事も参考にして!</div><br>
・・・になります。)
実はすでに、「この記事内に枠で囲む方法」を書いている方がいらっしゃいます。
ほんとに、たくさんたくさ~んいらっしゃると思います・・・
その中で、いつもご紹介していただいたり、コメントをしていただたり、とお世話になっている方の記事をご覧になってみてください。参考になりますので!
それは・・・
読まれるブログの育て方:西川先生の
になります。
この記事を
↓ ↓ ↓
角を丸くするのに、「border-radius」を追加するだけでよい、と書きましたが、
-webkit-border-radius: 10px;&bsp;/* Safari,Google Chrome用に */
-moz-border-radius: 10px;&bsp;&bsp;&bsp;&bsp;&bsp;/* Firefox12まで */
border-radius: 10px;&bsp;&bsp;&bsp;&bsp;&bsp;&bsp;&bsp;&bsp;&bsp;&bsp;/* Firefox13以降 */
と万全を期して、
<div style="backgroud:#ffeeee; paddig:10px; border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border: 2px dotted #ff0000;">枠内の記事本文</div><br>
を使用してもOKですね!
枠囲いの具体的な使い方はこちらの記事をご参照くださいませ。
また、このような↓見出し付きの囲い枠を作りたい方は
改行後の本文はこちら(ここは削除してください。)
本文記事2
本文記事3
改行後の本文はこちら(ここは削除してください。)
改行後の本文はこちら(ここは削除してください。)
&bsp;
(↑クリックすると記事に飛びます。)
&bsp;
(↑クリックすると記事に飛びます。)
&bsp;
■タイトル■
本文1
【見出し2】
本文2
【見出し3】
本文3
<フェイスブックの青(Facebook Blue)の背景色(色コード #3b5998、RGB(59,89,152))>
こちらの記事をご覧ください↓
そうそう・・・
この囲み枠、囲い枠を使って、記事下に定型文を挿入したい、という方はこちらの記事をご参照くださいませ↓↓↓
<追記2>
需要あるかわかりませんが・・・
このようなレインボー囲み枠をやってみたい方はこちらになります^^
(IE10以降で有効)
(画像表示↓)
(現在のブラウザ表示↓)
○○○
○○○
○○○
○○○
<div style="backgroud-image:liear-gradiet(#F5B090,#FCD7A1,#FFF9B1,#A5D4AD,#A3BCE2,#A59ACA,#CFA7CD);backgroud-color:#ffeeee; paddig:10px; width: auto;margi-right:6px; border-radius: 10px;border: 2px dotted #ff0000; box-shadow: 5px 5px 5px #AAA;">○○○<br>○○○<br>○○○<br>○○○<br>○○○</div><br>
『』
<追記3>
ちなみに、ソース(HTMLタグ)を囲っている枠は
こちら↑になります。
<追記4(2014.11.26)>
この囲み枠の幅を狭くしたり、中央に配置したりするにはこちらの記事をご覧くださいませ↓↓↓
『』
<追記5(2015.10.24)>
あ、あとこんな枠もあんな枠もあります~~
『』
『』
<追記6(2016.12.20)>
『』
以上、アメブロ便利ワザでした。
LIDS札幌・ライフデザインスクール
川上 雄大
ブラウザは僕らをどこにも連れてってはくれない
なかなか子供ができない夫婦が妊活をしながら
節約も頑張っています
ブログを書く事で記録に残したいのと
節約意識を高め、できれば皆さんと情報共有したり
してみたいなぁと思って始めました
よろしくお願いします
?*.りんご家の家計とか自己紹介とか?*.
&bsp;