Webデザイン アメブロ

【アメブロ記事用】囲み枠の作り方

 

パソコンが苦手な女性フリーランスの方に寄り添いたい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é (ラ・ピュルテ)では女性フリーランスの方向けにアメブロカスタマイズをしています。

ヘッダー画像で世界観をターゲットにアピールし、ナビゲーションメニューを設置してお申込み導線を整えます。

アメブロカスタマイズ詳細

 

お問い合わせ


WEB DESIGN La pureté ​へのお問い合わせはこちらからどうぞ。

お問い合わせ

LINE公式アカウントからもお気軽にご質問くださいませ♡

友だち追加
  • この記事を書いた人
WEB DESIGN La pureté 絢

WEB DESIGN La pureté 絢

藤本絢子 / Junko Fujimoto
Webデザイナー 東京都在住。
会社員時代はシステムエンジニアとしてソフトウエア開発に携わっていました。
女性や主婦の方が個人事業主として働く中で、本業に集中できるようパソコン関係のサポートを行っています。

-Webデザイン, アメブロ
-

© 2020 WEB DESIGN La pureté