\当ブログも使用のおすすめテーマSWELL/

アメブロのメッセージボードを囲み枠でおしゃれにカスタマイズする方法

当ページはアフィリエイト広告を利用しています
アメブロのメッセージボードを囲み枠でおしゃれにカスタマイズする方法

芸能人や著名人だけでなく、たくさんの女性起業家にも愛用されているアメーバブログ。既存のテンプレートもたくさんありますが、近年は芸能人のアメブロのようなおしゃれにカスタマイズされたものもよく見かけますね。今回は、アメブロにオリジナルヘッダー画像は既に設置済みの方に向けて、Canvaを利用してメッセージボードを囲み枠でおしゃれにカスタマイズする方法についてご紹介いたします。

ゆりかご

現役Web・グラフィックデザイナーのゆりかごが解説します

目次

アメブロのメッセージボードとは?

アメブロのメッセージボードとはヘッダー画像の下にある、その名の通り『メッセージ』を掲載することができるスペースのことです。

メッセージボードの画像

「ご挨拶」「ご案内」としてメッセージを掲載することや、「お知らせ」の役割として利用することもできます。メッセージボードは付けずに使用しないことも可能ですが、アメブロを開いた際にパッと目に入る部分となるので「新着情報」などを掲載するのにもおすすめです。

今回ご紹介する方法は、既にCSS編集可能なテンプレートに変更しており、2カラムでアメブロにヘッダー画像が設置されている方向けの内容となります。(全てパソコン専用のカスタマイズとなり、スマホで見た際は表示されませんのでその点はご注意ください。)

  • まだアメブロにオリジナルのヘッダー画像を設置していない
  • アメブロにまずはヘッダー画像を設置したい

という方は、下記の記事でアメブロヘッダーの設置方法の手順について詳しく説明しているのでこちらを先にチェックしてください。

ヘッダー画像下にメニューバーを設置する方法についてはこちらをご覧ください。

アメブロのメッセージボードを囲み枠でおしゃれにカスタマイズする方法

今回は、メッセージボードのデザインをおしゃれでエレガントな飾り枠で作成していきます。通常、私は画像作成にはIllustrator(イラストレーター)を使用して作成しておりますが、今回はどなたでも無料で作成できるCanvaのツールを使って作成いたします。

ゆりかご

既に2カラムアメブロにヘッダー画像が設置されている方向けの内容となりますのでご注意ください。

Canvaを使っておしゃれな囲み枠を作ろう

①Canvaのページにログインし、右上にある「デザイン作成」をクリック

Canvaのデザイン作成手順画像1

出典:Canva公式サイト

②「カスタムサイズ」をクリックし幅720px 高さ80pxを入力

Canvaのデザイン作成手順画像2

③幅720px 高さ80pxのキャンバスが作成されるので、左側にある「素材」をクリック「飾り線」と入力します

Canvaのデザイン作成手順画像3

④気に入った飾り線を選択しキャンバスに配置します。

Canvaのデザイン作成手順画像4

飾り線の横幅は画面いっぱいになるようにサイズを調整しましょう。

Canvaのデザイン作成手順画像5

カラーをお好みのものに変更します(黒のままでもOKです)

Canvaのデザイン作成手順画像6

⑦キャンバスを複製します

Canvaのデザイン作成手順画像7

⑧2つ目のキャンバスに配置している飾り線を反転します。赤い四角で囲んでいる紫のマークをクリックし、くるっと反転させます。

Canvaのデザイン作成手順画像8

⑨キャンバスをもう1つ複製し(合計3つ)、そちらは飾り線を削除し白紙のキャンバスにします。

Canvaのデザイン作成手順画像9

(※この部分は、メッセージボード上下枠の中間部分にあたるデザインとなります。本来こちらもデザインを入れることはできますが、今回は簡易的に説明するため、白紙にしております)

⑩右上の「共有」をクリックし、「ダウンロード」します。(保存形式はPNGでOKです)

Canvaのデザイン作成手順画像10

⑪ダウンロードしたzipフォルダを解凍すると先ほど作成した画像が3つ入っております。

作成した画像が入ったフォルダ
ゆりかご

これで飾り枠の画像作成は完了です!

作成した囲み枠をアメブロに設置しておしゃれにカスタマイズしよう

①アメブロへログインし、ブログ管理画面にて「ブログを書く」をクリック

作成した囲み枠をアメブロに設置する方法1

②先ほど作成した画像を3種類全てアップロードします。(ドロップまたはクリック)

作成した囲み枠をアメブロに設置する方法2

③アップロードした3つの画像をそれぞれクリックして「ブログを書く」の記事内に入れます。Canvaで作成した順番になるようにしましょう。(飾り線上むき、下向き、真っ白のもの)※「通常表示」になっているので、真っ白の画像は一見何も見えません

作成した囲み枠をアメブロに設置する方法3

④「HTML表示」に切り替えます。黄色マーカー部分の画像のURLをコピーします(https://〜から始まり、語尾がpngのもの)画像3つ分をコピーしたらこのURLをどこかにメモしておきましょう。

作成した囲み枠をアメブロに設置する方法4
ゆりかご

1つの画像につき同じURLが2回表示されているので混乱するかもしれませんがどちらをコピーしても構いません。

⑤ブログ管理に戻り、デザインの設定→CSSの編集をクリック

作成した囲み枠をアメブロに設置する方法5

⑥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);
}
ゆりかご

左右にある()は消さないように注意してください

作成した囲み枠をアメブロに設置する方法6

⑦URLもそれぞれ3つ入力ができたら「保存」をクリック。(この時点では何も表示されません。)

作成した囲み枠をアメブロに設置する方法7

⑧ブログ管理に戻り、設定管理をクリック。

作成した囲み枠をアメブロに設置する方法8

⑥メッセージボードに移動します。

作成した囲み枠をアメブロに設置する方法9

⑦メッセージボードに下記のコードをコピーして貼り付けます。文章の部分は自由に書き換えてください。(改行はそのまま反映されます。)

<center><font color="#756b4e">

ご訪問ありがとうございます

ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります
ここにテキストが入ります


</font></center>

#756b4eの部分は、文字色のカラーコードになります。このままでも問題ありませんが、好きな文字色に変更したい場合はカラーコード表を参考に変更してみてください
カラーコード参照:HTMLカラーコード: WEB色見本 原色大辞典

⑧文章の部分を書き換えてから、表示を確認するをクリック。

作成した囲み枠をアメブロに設置する方法10

メッセージボードが問題なく表示されているのを確認できてから、公開をクリックしましょう。

メッセージボードの表示確認
作成した囲み枠をアメブロに設置する方法
ゆりかご

これでメッセージボードの設置は完了です。お疲れ様でした!

アメブロカスタマイズのご依頼方法

アメブロカスタマイズ制作事例
ユリカゴデザイン:アメブロカスタマイズ制作事例

今回はメッセージボードの設置方法をご紹介しましたが、アメブロ全体をカスタマイズしたい方や、自分で作るのは大変なのでプロに頼みたい!という方はぜひ一度ユリカゴデザインにご相談ください。

アメブロカスタマイズのご依頼はユリカゴデザインのホームページ、またはココナラから承っております。

・アメブロのデザインをプロに頼みたい!
・洗練されたデザインにすることで信頼度を上げたい
・お客様におしゃれで素敵な印象をもってもらいたい
・オリジナルデザインにすることによってブランディング力を高めたい
・自分で作ったけどうまくいかない!&素人感が出てしまう‥

という方はぜひ一度ホームページよりご相談ください。媒体問わず、女性向けデザインの実績は200件以上ございます。ご相談は無料ですのでお気軽にお問い合わせください♪



ココナラからアメブロカスタマイズのご依頼も承っております。
ココナラプロ認定取得+プラチナランク+販売実績200件強+総合評価5
※ココナラからのご依頼の場合、制作料金は同じですがココナラへお支払いいただくサービス手数料が発生いたします。ココナラのご登録がまだの方はこちらから。招待コード:KKTKBK

ユリカゴデザインにご依頼いただいた、アメブロカスタマイズの事例は下記の記事で紹介しています。ご興味のある方は、ぜひあわせてご覧ください。

まとめ

今回は、アメブロのメッセージボードを囲み枠でおしゃれにカスタマイズする方法についてご紹介いたしました。

  • メッセージボードを設置することで、訪れたユーザーにメッセージやお知らせ新着記事などをみてもらうことができる
  • Canvaを使えば、おしゃれでエレガントな飾り枠のメッセージボードが作成できる
  • 自分で作るのは難しい&アメブロ全体をカスタマイズしたい方はプロに依頼しよう
ゆりかご

アメブロをカスタマイズして自分好みのデザインに整えることで、ブログを書くのが楽しみになりますよ♪

最後までお読みいただきありがとうございました!

アメブロのメッセージボードを囲み枠でおしゃれにカスタマイズする方法

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

ユリカゴデザイン|Web・グラフィックデザイナー
美術大学デザイン学部卒。企業インハウスと制作会社のデザイナー経験を経て、2021年4月よりフリーランスで活動中。デザイナー歴12年〜
ココナラでは取得率0.05%のPRO認定を取得。ココナラで得た豆知識、インハウス・制作会社・フリーランスのデザイナー経験で得たweb知識や考えを綴っています。

目次