芸能人や著名人だけでなく、たくさんの女性起業家にも愛用されているアメーバブログ。既存のテンプレートもたくさんありますが、近年は芸能人のアメブロのようなおしゃれにカスタマイズされたものもよく見かけますね。今回は、アメブロにオリジナルヘッダー画像は既に設置済みの方に向けて、Canvaを利用してメッセージボードを囲み枠でおしゃれにカスタマイズする方法についてご紹介いたします。
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
現役Web・グラフィックデザイナーのゆりかごが解説します
アメブロのメッセージボードとは?
アメブロのメッセージボードとはヘッダー画像の下にある、その名の通り『メッセージ』を掲載することができるスペースのことです。
![メッセージボードの画像](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover122-1024x538.jpg)
![メッセージボードの画像](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover122-1024x538.jpg)
「ご挨拶」「ご案内」としてメッセージを掲載することや、「お知らせ」の役割として利用することもできます。メッセージボードは付けずに使用しないことも可能ですが、アメブロを開いた際にパッと目に入る部分となるので「新着情報」などを掲載するのにもおすすめです。
今回ご紹介する方法は、既にCSS編集可能なテンプレートに変更しており、2カラムでアメブロにヘッダー画像が設置されている方向けの内容となります。(全てパソコン専用のカスタマイズとなり、スマホで見た際は表示されませんのでその点はご注意ください。)
- まだアメブロにオリジナルのヘッダー画像を設置していない
- アメブロにまずはヘッダー画像を設置したい
という方は、下記の記事でアメブロヘッダーの設置方法の手順について詳しく説明しているのでこちらを先にチェックしてください。
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover21-300x158.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover21-300x158.jpg)
ヘッダー画像下にメニューバーを設置する方法についてはこちらをご覧ください。
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover35-300x158.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover35-300x158.jpg)
アメブロのメッセージボードを囲み枠でおしゃれにカスタマイズする方法
今回は、メッセージボードのデザインをおしゃれでエレガントな飾り枠で作成していきます。通常、私は画像作成にはIllustrator(イラストレーター)を使用して作成しておりますが、今回はどなたでも無料で作成できるCanvaのツールを使って作成いたします。
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
既に2カラムでアメブロにヘッダー画像が設置されている方向けの内容となりますのでご注意ください。
Canvaを使っておしゃれな囲み枠を作ろう
①Canvaのページにログインし、右上にある「デザイン作成」をクリック
![Canvaのデザイン作成手順画像1](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover05-1024x538.jpg)
![Canvaのデザイン作成手順画像1](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover05-1024x538.jpg)
出典:Canva公式サイト
②「カスタムサイズ」をクリックし幅720px 高さ80pxを入力
![Canvaのデザイン作成手順画像2](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover123-1024x538.jpg)
![Canvaのデザイン作成手順画像2](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover123-1024x538.jpg)
③幅720px 高さ80pxのキャンバスが作成されるので、左側にある「素材」をクリック「飾り線」と入力します
![Canvaのデザイン作成手順画像3](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover124-1024x538.jpg)
![Canvaのデザイン作成手順画像3](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover124-1024x538.jpg)
④気に入った飾り線を選択しキャンバスに配置します。
![Canvaのデザイン作成手順画像4](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover125-1024x538.jpg)
![Canvaのデザイン作成手順画像4](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover125-1024x538.jpg)
⑤飾り線の横幅は画面いっぱいになるようにサイズを調整しましょう。
![Canvaのデザイン作成手順画像5](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover126-1024x538.jpg)
![Canvaのデザイン作成手順画像5](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover126-1024x538.jpg)
⑥カラーをお好みのものに変更します(黒のままでもOKです)
![Canvaのデザイン作成手順画像6](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover127-1024x538.jpg)
![Canvaのデザイン作成手順画像6](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover127-1024x538.jpg)
⑦キャンバスを複製します
![Canvaのデザイン作成手順画像7](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover128-1024x538.jpg)
![Canvaのデザイン作成手順画像7](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover128-1024x538.jpg)
⑧2つ目のキャンバスに配置している飾り線を反転します。赤い四角で囲んでいる紫のマークをクリックし、くるっと反転させます。
![Canvaのデザイン作成手順画像8](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover131-1024x538.jpg)
![Canvaのデザイン作成手順画像8](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover131-1024x538.jpg)
⑨キャンバスをもう1つ複製し(合計3つ)、そちらは飾り線を削除し白紙のキャンバスにします。
![Canvaのデザイン作成手順画像9](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover132-1024x538.jpg)
![Canvaのデザイン作成手順画像9](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover132-1024x538.jpg)
(※この部分は、メッセージボード上下枠の中間部分にあたるデザインとなります。本来こちらもデザインを入れることはできますが、今回は簡易的に説明するため、白紙にしております)
⑩右上の「共有」をクリックし、「ダウンロード」します。(保存形式はPNGでOKです)
![Canvaのデザイン作成手順画像10](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover133-1024x538.jpg)
![Canvaのデザイン作成手順画像10](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover133-1024x538.jpg)
⑪ダウンロードしたzipフォルダを解凍すると先ほど作成した画像が3つ入っております。
![作成した画像が入ったフォルダ](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover134-1024x538.jpg)
![作成した画像が入ったフォルダ](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover134-1024x538.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
これで飾り枠の画像作成は完了です!
作成した囲み枠をアメブロに設置しておしゃれにカスタマイズしよう
①アメブロへログインし、ブログ管理画面にて「ブログを書く」をクリック
![作成した囲み枠をアメブロに設置する方法1](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover47-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法1](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover47-1024x538.jpg)
②先ほど作成した画像を3種類全てアップロードします。(ドロップまたはクリック)
![作成した囲み枠をアメブロに設置する方法2](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover135-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法2](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover135-1024x538.jpg)
③アップロードした3つの画像をそれぞれクリックして「ブログを書く」の記事内に入れます。Canvaで作成した順番になるようにしましょう。(飾り線上むき、下向き、真っ白のもの)※「通常表示」になっているので、真っ白の画像は一見何も見えません
![作成した囲み枠をアメブロに設置する方法3](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover136-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法3](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover136-1024x538.jpg)
④「HTML表示」に切り替えます。黄色マーカー部分の画像のURLをコピーします(https://〜から始まり、語尾がpngのもの)画像3つ分をコピーしたらこのURLをどこかにメモしておきましょう。
![作成した囲み枠をアメブロに設置する方法4](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover137-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法4](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover137-1024x538.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
1つの画像につき同じURLが2回表示されているので混乱するかもしれませんがどちらをコピーしても構いません。
⑤ブログ管理に戻り、デザインの設定→CSSの編集をクリック
![作成した囲み枠をアメブロに設置する方法5](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover11-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法5](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover11-1024x538.jpg)
⑥CSSコードの一番下に、下記コードを追記します。画像のURLの部分に④でコピーした画像のURLをそれぞれ入力しましょう。
/* メッセージボード */ .skin-message { padding-left: 60px; padding-right: 60px; padding-top: 70px; padding-bottom: 70px; background-repeat: no-repeat, no-repeat, repeat-y; background-position: center top, center bottom, center top; background-image: url(一番上の画像のURL), url(一番下の画像URL), url(真っ白のURL); }
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/困り-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/困り-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/困り-150x150.jpg)
左右にある()は消さないように注意してください
![作成した囲み枠をアメブロに設置する方法6](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover139-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法6](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover139-1024x538.jpg)
⑦URLもそれぞれ3つ入力ができたら「保存」をクリック。(この時点では何も表示されません。)
![作成した囲み枠をアメブロに設置する方法7](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover140-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法7](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover140-1024x538.jpg)
⑧ブログ管理に戻り、設定管理をクリック。
![作成した囲み枠をアメブロに設置する方法8](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover56-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法8](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover56-1024x538.jpg)
⑥メッセージボードに移動します。
![作成した囲み枠をアメブロに設置する方法9](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover138-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法9](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover138-1024x538.jpg)
⑦メッセージボードに下記のコードをコピーして貼り付けます。文章の部分は自由に書き換えてください。(改行はそのまま反映されます。)
<center><font color="#756b4e"> ご訪問ありがとうございます ここにテキストが入ります ここにテキストが入ります ここにテキストが入ります ここにテキストが入ります ここにテキストが入ります ここにテキストが入ります </font></center>
#756b4eの部分は、文字色のカラーコードになります。このままでも問題ありませんが、好きな文字色に変更したい場合はカラーコード表を参考に変更してみてください
カラーコード参照:HTMLカラーコード: WEB色見本 原色大辞典
⑧文章の部分を書き換えてから、表示を確認するをクリック。
![作成した囲み枠をアメブロに設置する方法10](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover142-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法10](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover142-1024x538.jpg)
⑨メッセージボードが問題なく表示されているのを確認できてから、公開をクリックしましょう。
![メッセージボードの表示確認](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover143-1024x538.jpg)
![メッセージボードの表示確認](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover143-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover141-1024x538.jpg)
![作成した囲み枠をアメブロに設置する方法](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover141-1024x538.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
これでメッセージボードの設置は完了です。お疲れ様でした!
アメブロカスタマイズのご依頼方法
![アメブロカスタマイズ制作事例](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover63-1024x538.jpg)
![アメブロカスタマイズ制作事例](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover63-1024x538.jpg)
今回はメッセージボードの設置方法をご紹介しましたが、アメブロ全体をカスタマイズしたい方や、自分で作るのは大変なのでプロに頼みたい!という方はぜひ一度ユリカゴデザインにご相談ください。
アメブロカスタマイズのご依頼はユリカゴデザインのホームページ、またはココナラから承っております。
・アメブロのデザインをプロに頼みたい!
・洗練されたデザインにすることで信頼度を上げたい
・お客様におしゃれで素敵な印象をもってもらいたい
・オリジナルデザインにすることによってブランディング力を高めたい
・自分で作ったけどうまくいかない!&素人感が出てしまう‥
という方はぜひ一度ホームページよりご相談ください。媒体問わず、女性向けデザインの実績は200件以上ございます。ご相談は無料ですのでお気軽にお問い合わせください♪
ココナラからアメブロカスタマイズのご依頼も承っております。
ココナラプロ認定取得+プラチナランク+販売実績200件強+総合評価5
※ココナラからのご依頼の場合、制作料金は同じですがココナラへお支払いいただくサービス手数料が発生いたします。ココナラのご登録がまだの方はこちらから。招待コード:KKTKBK
ユリカゴデザインにご依頼いただいた、アメブロカスタマイズの事例は下記の記事で紹介しています。ご興味のある方は、ぜひあわせてご覧ください。
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover67-300x158.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/cover67-300x158.jpg)
まとめ
今回は、アメブロのメッセージボードを囲み枠でおしゃれにカスタマイズする方法についてご紹介いたしました。
- メッセージボードを設置することで、訪れたユーザーにメッセージやお知らせ、新着記事などをみてもらうことができる
- Canvaを使えば、おしゃれでエレガントな飾り枠のメッセージボードが作成できる
- 自分で作るのは難しい&アメブロ全体をカスタマイズしたい方はプロに依頼しよう!
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
![](https://yurikagodesign.com/column/wp-content/uploads/2023/06/swellアイコン-150x150.jpg)
アメブロをカスタマイズして自分好みのデザインに整えることで、ブログを書くのが楽しみになりますよ♪
最後までお読みいただきありがとうございました!