アメブロの記事・サイドバーに【角丸】の枠線を使いたいひとはこちらをご覧くださいね | パソコン講師が教える。アメブロ作成でみんなが知りたい11のこと

パソコン講師が教える。アメブロ作成でみんなが知りたい11のこと

パソコン講師、パソコンインストラクターが教えるアメブロ作成・アメブロの使い方。自分でできるアメブロカスタマイズ、写真加工、ヘッダーの作り方、メニューバーの設置の仕方、リンクの貼り方、広告の消し方、サイドバーの変更、初心者の方にも画像でわかりやすく解説

アメブロの記事・サイドバーに【角丸】の枠線を使いたいひとはこちらをご覧くださいね

こんにちは!『アメブロの使い方』を教えるパソコンインストラクター本田奈美です。

以前、記事で枠線のつくりかたを記事にしました。

大好評記事です^^

その枠線は【長方形】なんです。こんな感じで。

で、読者さまから

『角丸の枠線を見たことがあるんですけど、どうやって作るんですか?』

とお問い合わせがありましたので、こちらで公開しておきますね^^

以下から好みのものをコピーして貼り付けていただくと作成できます!!

記事を書く画面が「タグ編集エディタ」の方はそのまま貼り付け。

記事を書く画面が「標準エディタ」の方は【HTML表示】にした状態で貼りつけてくださいね。

【実線】
<div style="padding:10px;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border: 1px solid #ff0000;">ここに文章を入力</div>


【二重線】
<div style="padding:10px;border-radius: 10px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border: 5px double #ffff00;">ここに文章を入力</div>


【点線】
<div style="padding:10px;border-radius: 20px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border: 3px dotted #00ff00;">ここに文章を入力</div>

#の後ろの6ケタの数字が色番号です。

枠の色を変えたいときにはここを変更してくださいね。

長方形の形でも枠線をつくりたい!!という方はこちらの記事も参考にしてください~。