こんにちは！
マイナンバーポイント申し込まなきゃ、の千明です。
さて、アメブロやってますか？
ワードプレスとは違った集客ができるので、特に女性相手の起業家にはおすすめです。
でも、
- アメブロの記事は、カスタマイズしにくい
- メリハリが出ない
など、ちょっと使いにくい面も。
アメブロは作りがシンプルなので、自分で囲み枠を作らないと、実装ができないのです。
お知らせやメニューなど、枠を作って目立たせることがとても大事ですよね。
そこで、今回は、アメブロでそのままコピペで使える囲み枠をご紹介します。
アメブロ記事内に枠を入れる方法
最初にアメブロ記事に枠を入れる手順です。
いつも通り、記事のエディター画面に行きます。
そのままだと、通常は見た目そのままに記事が書ける、ビジュアルエディターになっています。
囲み記事はHTMLというコードを使用するので、HTML表示の方に切り替えます。というわけで、画面下の方のHTML表示をクリックします。
すると、このようなエディターになるので、次章にあるお好みのデザインのコードを丸々コピーして、そのまま貼り付けます。
貼り付けたら、再度エディターを通常表示に直します。すると、このように表示されます。↓
枠の中の文章は、通常通り、変更すれば、OKです。
「ここに本文」から「枠デザイン3」に変更したところ。
枠の中で改行する
枠の中での改行は、普通にするとうまくいきません。
Shiftを押しながらEnterを押します。するとこのようにできますよ！
枠の中に画像を貼る
一度ビジュアルエディターにすれば、枠の中にも自由に画像を入れられます。
やり方はいつもと同じです。
画像を入れたい場所に画像をドラッグアンドドロップするだけです。
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種類ご紹介しました。
カスタマイズも慣れたらやってみてくださいね。
私はカスタマイズを始めるとうっかりはまり込んでしまって困るほどです。楽しいですよ。バックアップは忘れずにしてくださいね。
また、今回のコードは検証していますが、間違いなどあったら、教えてくださいませ！
