アメブロの枠線デザイン29選!コピペで簡単!カスタマイズ方法も

こんにちは!
マイナンバーポイント申し込まなきゃ、の千明です。

さて、アメブロやってますか?

ワードプレスとは違った集客ができるので、特に女性相手の起業家にはおすすめです。

でも、

  • アメブロの記事は、カスタマイズしにくい
  • メリハリが出ない

など、ちょっと使いにくい面も。

アメブロは作りがシンプルなので、自分で囲み枠を作らないと、実装ができないのです。

お知らせやメニューなど、枠を作って目立たせることがとても大事ですよね。

そこで、今回は、アメブロでそのままコピペで使える囲み枠をご紹介します。

アメブロ記事内に枠を入れる方法

最初にアメブロ記事に枠を入れる手順です。

いつも通り、記事のエディター画面に行きます。

そのままだと、通常は見た目そのままに記事が書ける、ビジュアルエディターになっています。

囲み記事はHTMLというコードを使用するので、HTML表示の方に切り替えます。というわけで、画面下の方のHTML表示をクリックします。

アメブロ記事内に枠を入れる方法

すると、このようなエディターになるので、次章にあるお好みのデザインのコードを丸々コピーして、そのまま貼り付けます。

アメブロ記事内に枠を入れる方法

貼り付けたら、再度エディターを通常表示に直します。すると、このように表示されます。↓

枠の中の文章は、通常通り、変更すれば、OKです。

アメブロ記事内に枠を入れる方法

「ここに本文」から「枠デザイン3」に変更したところ。

アメブロ記事内に枠を入れる方法

枠の中で改行する

枠の中での改行は、普通にするとうまくいきません。

Shiftを押しながらEnterを押します。するとこのようにできますよ!

アメブロ記事内に枠を入れる方法

枠の中に画像を貼る

一度ビジュアルエディターにすれば、枠の中にも自由に画像を入れられます。

やり方はいつもと同じです。

画像を入れたい場所に画像をドラッグアンドドロップするだけです。

アメブロ記事内に枠を入れる方法

1度作った枠を保存して再利用する

記事の最初や最後に枠を使ってお知らせなどを固定したいときのやり方です。

考え方としては、ひな形記事を何度も再利用するわけです。

今回、タイトルタイトルというひな形記事を作成しました。

アメブロ記事内に枠を入れる方法 1度作った枠を保存して再利用する

この記事はこのまま下書き保存します。

次に書く記事は、ブログを書くではなく、記事の編集・削除の画面から、ひな形記事を選び、複製を押します。

アメブロ記事内に枠を入れる方法 1度作った枠を保存して再利用する

複製すると、[コピー]と表記された記事が複製されるので、これを編集して、新たな記事にします。

アメブロ記事内に枠を入れる方法 1度作った枠を保存して再利用する

こんな風になってます。タイトルから直して使用してくださいね。

アメブロ記事内に枠を入れる方法 1度作った枠を保存して再利用する

ざっくりと囲み枠デザインの使い方でした。

次はデザイン集です。

囲み枠デザイン集

シンプルデザイン

何にでも使えるシンプルなデザインです。

シンプルな枠線

最もシンプルな枠線です。

シンプル枠

コードはこちらです。コピペで使えます。

<div style="border: #6495ed dashed 3px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding: 20px; font-size: 90%;">点線角丸</div>

シンプルな角丸枠

角を丸くしました。

点線角丸

コードはこちらです。コピペで使えます。

<div style="border: #6495ed solid 1px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding: 20px; font-size: 90%;">点線角丸</div>

線を太くしました。太くすると、かわいい感じになりますね。

シンプルな角丸

コードはこちらです。コピペで使えます。

<div style="border: #6495ed solid 3px;  border-radius: 10px; -webkit-border-radius: 10px;  -moz-border-radius: 10px;  padding: 20px; font-size: 90%;">ここに本文</div>

角丸枠を点線に

点線角丸

コードはこちらです。コピペで使えます。

<div style="border: #6495ed dashed 2px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding: 20px; font-size: 90%;">点線角丸</div>

点線太目に

色を変えて、点線を太目にしました。感じが変わりますね。

点線角丸

コードはこちらです。コピペで使えます。

<div style="border: #7fffd4 dashed 3px; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; padding: 20px; font-size: 90%;">点線角丸</div>

背景色あり

背景色をつける

コードはこちらです。コピペで使えます。

<div style="padding: 20px; margin-bottom: 10px; border: none; #7fffd4; 
border-radius: 5px; background-color: #d6eaff; font-size: 90%;">背景色をつける</div>

点線で囲み背景色あり

周りの線を点線にし、背景色をつけました。

点線で囲み背景色をつける

コードはこちらです。コピペで使えます。

<div style="padding: 20px; margin-bottom: 10px; border: 3px dashed #6495ed; border-radius: 5px; background-color: #d6eaff; font-size: 90%;">点線で囲み背景色をつける</div>

おしゃれデザイン

ちょこっと個性が出るデザインです。

ふわっと枠

ふわっとデザイン

コードはこちらです。コピペで使えます。

<div style="padding: 10px 20px; margin: 10px; background: #d6eaff; box-shadow: #d6eaff 0 0 10px 10px; -webkit-box-shadow: #d6eaff 0 0 10px 10px; -moz-box-shadow: #7fffd4 0 0 10px 10px; font-size: 90%;">ふわっとデザイン</div>

ボタン風

ボタン風

コードはこちらです。コピペで使えます。

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #d6d6ff inset; -moz-box-shadow: 0 0 50px #d6d6ff inset; box-shadow: 0 0 50px #d6d6ff inset; font-size: 90%;">ボタン風</div>

角丸ボタン風

角丸ボタン風

コードはこちらです。コピペで使えます。

<div style="padding: 20px; background: #fff; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 0 0 50px #d6d6ff inset; -moz-box-shadow: 0 0 50px #d6d6ff inset; box-shadow: 0 0 50px #d6d6ff inset; font-size: 90%;">角丸ボタン風</div>

グラデーション

グラデーション

コードはこちらです。コピペで使えます。

<div style="padding: 20px; background: linear-gradient(to bottom, #fff, #d6d6ff); -webkit-gradient(linear, left top, left bottom, from(#fff), to(#d6d6ff)); -moz-linear-gradient(top, #fff, #d6d6ff); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#FFffffff', endColorstr='#FFd6d6ff'); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d6d6ff',GradientType=0 ); border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; box-shadow: 0 0 2px 1px rgba(0,0,0,0.1); font-size: 90%;">グラデーション</div>

紙を2枚重ねた風

紙を二枚重ねた風

コードはこちらです。コピペで使えます。

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #cecece; -moz-box-shadow: 0 0 50px #d6d6ff inset, 5px 5px 0 #cecece; box-shadow: 0 0 50px #d6d6ff inset, 5px 5px 0 #cecece; font-size: 90%;">紙を二枚重ねた風</div>

紙を2枚重ねた風の後ろの紙をピンクにしてみました。

可なり個性がでますね。

紙を二枚重ねた風かわいいバージョン

コードはこちらです。コピペで使えます。

<div style="padding: 20px; background: #fff; -webkit-box-shadow: 0 0 50px #add8e6 inset, 5px 5px 0 #ffe0ff; -moz-box-shadow: 0 0 50px #d6d6ff inset, 5px 5px 0 #ffe0ff; box-shadow: 0 0 50px #d6d6ff inset, 5px 5px 0 #ffe0ff; font-size: 90%;">紙を二枚重ねた風かわいいバージョン</div>

棒で囲んだ風

4本の棒で囲んだ風のデザインです。

シンプルに棒で囲んだ風

コードはこちらです。コピペで使えます。

<div class="l-border l-p-t l-p-r l-p-b l-p-l" style="margin: 15px auto; padding: 20px; background-size: 2px 2px; background-position: 9px 0,0 9px,right 9px top 0,left 0 bottom 9px; background-repeat: repeat-y,repeat-x,repeat-y,repeat-x; background-image: linear-gradient(#7fffd4,#7fffd4),linear-gradient(#7fffd4,#7fffd4),linear-gradient(#7fffd4,#7fffd4),linear-gradient(#7fffd4,#7fffd4);">シンプルに棒で囲んだ風</div>
付箋風

コードはこちらです。コピペで使えます。

<div style="border: #6495ed solid 1px; border-left: #6495ed solid 10px; padding: 20px; background: #fff; font-size: 90%;">付箋風</div>
付箋風背景色付き

コードはこちらです。コピペで使えます。

<div style="border: #6495ed solid 1px; border-left: #6495ed solid 10px; padding: 20px; background: #ffffe0; font-size: 90%;">付箋風背景色付き</div>

かわいいデザイン

ドット柄

ドット柄

コードはこちらです。コピペで使えます。

<div style="background: #fceff2; background-image: radial-gradient(#ffc0cb 10%, transparent 20%), radial-gradient(#ffc0cb 10%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 90%; padding: 20px;">ドット柄</div>
ドット柄

コードはこちらです。コピペで使えます。

<div style="background: #ffc0cb; background-image: radial-gradient(#fceff2 10%, transparent 20%), radial-gradient(#fceff2 10%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 90%; padding: 20px;">ドット柄</div>
ドット柄濃い青

コードはこちらです。コピペで使えます。

<div style="background: #f7f6fb; background-image: radial-gradient(#a1d8e2 20%, transparent 20%), radial-gradient(#a1d8e2 20%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 90%; padding: 20px;">ドット柄濃い青</div>
ドット柄薄い青

コードはこちらです。コピペで使えます。

<div style="background: #a1d8e2; background-image: radial-gradient(#f7f6fb 10%, transparent 20%), radial-gradient(#f7f6fb 10%, transparent 20%); background-size: 20px 20px; background-position: 0 0, 10px 10px; font-size: 90%; padding: 20px;">ドット柄薄い青</div>

ストライプ

斜めストライプ太目

コードはこちらです。コピペで使えます。

<div style="background-image: linear-gradient( -45deg, #d6eaff 25%, #fff9fc 25%,#fff9fc 50%, #d6eaff 50%, #d6eaff 75%, #fff9fc 75%, #fff9fc ); background-size: 30px 30px; font-size: 90%; padding: 20px;">斜めストライプ太目</div>
斜めストライプ太目

コードはこちらです。コピペで使えます。

<div style="background-image: linear-gradient( -45deg, #fff9fc 25%, #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 ); background-size: 30px 30px; font-size: 90%; padding: 20px;">斜めストライプ太目</div>
斜めストライプ細目

コードはこちらです。コピペで使えます。

<div style="background-image: linear-gradient( -45deg, #fff9fc 25%, #ffe5f2 25%,#ffe5f2 50%, #fff9fc 50%, #fff9fc 75%, #ffe5f2 75%, #ffe5f2 ); background-size: 10px 10px; font-size: 90%; padding: 20px;">斜めストライプ細目</div>
斜めストライプ細目

コードはこちらです。コピペで使えます。

<div style="background-image: linear-gradient( -45deg, #fff9fc 25%, #d6eaff 25%,#d6eaff 50%, #fff9fc 50%, #fff9fc 75%, #d6eaff 75%, #d6eaff ); background-size: 10px 10px; font-size: 90%; padding: 20px;">斜めストライプ細目</div>

手書き風

手書き風 

コードはこちらです。コピペで使えます。

<div style="border: 4px solid #d6eaff; border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px; margin: 1em 0; padding: 1em;">手書き風 </div>
手書き風

コードはこちらです。コピペで使えます。

<div style="border: 4px solid #ffc0cb; border-radius: 240px 15px 185px 15px / 15px 200px 15px 185px; margin: 1em 0; padding: 1em;">手書き風</div>

ちょっとだけカスタマイズ

今回の囲み枠の色を変えて、自分好みの囲み枠にカスタマイズすることは簡単です。

色のコード

コードの中にある#○○○○○○という、#のあとに6桁の半角英数字がありますが、これは色コードです。

また、”#fff””もありますが、これは、白の色コードです。

色見本はこちらのサイトです。いつも私も使っています。和色もあって、とても豊富です。原色大辞典

ちょこっと枠線カスタマイズの方法

線の太さを変えると表情がかなり変わりますね。

太さは、px であらわされています。

コードの最初の方に、

<div style="border: #7fffd4 dashed 3px

という記述がありますが、border というのは、枠線です。

そのあとの#と半角英数字6桁がカラーコードです。

そのあとのdashed というのは、枠線の種類です。

  • dashed 破線
  • solid  普通の線
  • double 二重線
  • dotted 点線

そのあとにある、3px というのは、線の太さです。数字が大きいほど太くなります。

この辺のコードを変えるだけでも、デザインは無限大です。

カスタマイズをするときは、メモ帳などにコピーしてから行うと、バックアップになりますよ。

アメブロの枠の作り方のまとめ

簡単にコピペで作れる囲み枠を29種類ご紹介しました。

カスタマイズも慣れたらやってみてくださいね。

私はカスタマイズを始めるとうっかりはまり込んでしまって困るほどです。楽しいですよ。バックアップは忘れずにしてくださいね。

また、今回のコードは検証していますが、間違いなどあったら、教えてくださいませ!

タイトルとURLをコピーしました