パソコンが苦手な女性フリーランスの方に寄り添いたいWebデザイナー絢です。
アメブロのカスタマイズやホームページを制作しています。
アメブロで記事を書かれている方は、ご自身のメニューなどを見やすくするために、囲み枠を使用されている方も多いと思います。
まだ囲み枠をご使用になられていない方は、ぜひ試してみてください。
◇囲み枠
寄り添いたいWebデザイナー絢です
アメブロのカスタマイズやホームページを制作しています
プロフィール / Instagram / LINE公式アカウント
アメブロの記事に使える囲み枠の作り方
囲み枠を表す文字列をコピーする
囲み枠を表す以下の文字列をあらかじめコピーしておく。
<div style="background: #f8f1f0; padding: 10px; border-radius: 10px; border: 2px dotted #f8f1f0; text-align: center;">枠線で囲みたい文章を入力してください<br> 改行する場合は+enterキーと一緒にShiftキーを押します</div>
アメブロのブログ記事を書く画面を表示する
アメブロにログインし、「ブログを書く」画面を表示します。
下にある「HTML表示」をクリックします。
囲み枠の文字列を貼り付ける
あらがじめコピーしておいた文字列をここに貼り付けます。
囲み枠を確認
下のタブの「通常表示」をクリックします。
囲み枠が完成しました。
枠の中を書き換えます
枠の中をクリックし、枠の中のテキストをお好みで変更します。
枠の中で改行する場合は、シフトキーとEnterキーを一緒に押します。
囲み枠の中にリンクや画像も入れることができます。
これで完成です。
（参考）他の囲み枠
◇ピンク直線枠
改行する場合は+enterキーと一緒にShiftキーを押します
<div style="padding: 10px; border: 1px solid #ff7fbe; text-align: center;">枠線で囲みたい文章を入力してください<br> 改行する場合は+enterキーと一緒にShiftキーを押します</div>
◇薄いピンク直線枠
改行する場合は+enterキーと一緒にShiftキーを押します
<div style="padding: 10px; border: 1px solid #ffbfde; text-align: center;">枠線で囲みたい文章を入力してください<br> 改行する場合は+enterキーと一緒にShiftキーを押します</div>
◇ピンク点線枠
改行する場合は+enterキーと一緒にShiftキーを押します
<div style="padding: 10px; border: 1px dotted #ff7fbe; text-align: center;">枠線で囲みたい文章を入力してください<br> 改行する場合は+enterキーと一緒にShiftキーを押します</div>
◇ピンク背景枠
改行する場合は+enterキーと一緒にShiftキーを押します
<div style="padding: 10px; margin: 10px; text-align: center; background: #ffebf5;">枠線で囲みたい文章を入力してください<br />改行する場合は+enterキーと一緒にShiftキーを押します</div>
◇ピンク背景丸枠
改行する場合は+enterキーと一緒にShiftキーを押します
<div style="background: #ffebf5; padding: 10px; border-radius: 10px; border: 2px dotted #ffebf5; text-align: center;">枠線で囲みたい文章を入力してください<br> 改行する場合は+enterキーと一緒にShiftキーを押します</div>
◇ピンクぼんやり背景枠
改行する場合は+enterキーと一緒にShiftキーを押します
<div style="padding:10px; margin:10px; box-shadow:#ffebf5 0px 0px 10px 10px; text-align: center; background:#ffebf5;">枠線で囲みたい文章を入力してください<br>
改行する場合は+enterキーと一緒にShiftキーを押します</div>
ポイント
- ブログ編集画面はHTML表示にする
- 囲み枠の中で改行するときは、ShiftキーとEnterキーを一緒に押す
女性フリーランスの方向けのアメブロカスタマイズをしています
WEB DESIGN La pureté （ラ・ピュルテ）では女性フリーランスの方向けにアメブロカスタマイズをしています。
ヘッダー画像で世界観をターゲットにアピールし、ナビゲーションメニューを設置してお申込み導線を整えます。
