アメブロ旧CSS：メッセージボードに画像で飾り枠をつけるカスタマイズ方法

アメブロの旧CSS編集用デザインで、トップページに表示されるメッセージボードに画像を利用した飾り枠を付けて、目を引くデザインにするカスタマイズ方法をご紹介します。

新CSS編集用デザイン向けはこちら

アメブロの新CSS編集用デザインでトップページに表示されるメッセージボードに画像を利用した飾り枠を付けて、目を引くデザインにするカスタマイズ方法をご紹介します。

1 飾り枠にする画像を準備する
2 メッセージボードに画像で飾り枠をつける
- 2.1 旧CSS編集用デザインの場合
- 2.2 コードを編集する
3 まとめ

飾り枠にする画像を準備する

まず、飾り枠に使う画像を準備します。

ここで紹介するカスタマイズ方法では、

上端用画像
敷き詰め用画像
下端用画像

の3種類の画像を使います。

今回は、例として以下のような画像でやってみます。

上端用画像

敷き詰め用画像

下端用画像

これらの画像を、枠に見えるよう以下のようにメッセージボードの領域の背景画像として配置します。

このような飾り枠に加工できそうな画像は、例えばこちらの無料ダウンロードサイトなどで「フレーム」や「飾り枠」といったキーワードで検索するとたくさん見つかると思います。

なお、当記事で紹介する方法では画像を重ねる部分があるため、基本的に背景が透明や半透明の画像は使えませんのでご注意下さい。

なお、画像のサイズは、画像の幅を以下のようにすると拡大縮小無く表示されます。

2カラムの場合 → 665ピクセル
3カラムの場合 → 470ピクセル

画像の準備ができたら全ての画像をアメブロにアップロード＆画像のURLを取得して控えておいて下さい。

カスタマイズに使う画像のアップロード方法と画像のURLの取得方法

アメブロで画像を使ったカスタマイズをする場合に必要な、カスタマイズで使用する画像をアメブロにアップロードする方法と、アップロードした画像をCSSなどから呼び出すために必要な画像のURLを取得する方法について解説します。

メッセージボードに画像で飾り枠をつける

次に、CSSの編集でカスタマイズを行います。

CSSを編集する手順：カスタマイズで必須の基本操作です！

CSS編集用デザインをベースにアメブロをカスタマイズするためにCSSを編集するときの手順について解説します。アメブロのカスタマイズ時には必須で頻繁に行う作業ですのでマスターしておくことをお勧めします。

以下のようなコードをCSSの末尾に追加して下さい。

旧CSS編集用デザインの場合

/************************************************
  旧CSS：メッセージボードに画像の飾り枠をつける
************************************************/
.skinMessageBoard3 {
  padding-left: 30px; /* 左側余白 */
  padding-right: 30px; /* 右側余白 */
  padding-top: 50px; /* 上側余白 */
  padding-bottom: 50px; /* 下側余白 */
  background-size: contain;
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: center top, center bottom, center top;
  background-image:
    url("上端用画像のURL"),
    url("下端用画像のURL"),
    url("敷き詰め用画像のURL");
}
/* 上下に点線(区切り線)を消す場合 */
.skinMessageBoard {
  border: none;
}

コードを編集する

CSSにコードを追加できたら、そのコードの一部を編集します。

具体的には、飾り枠用としてアメブロにアップロードした3つの画像のURLを、それぞれ該当する箇所に記述します。

3つの画像のURLの設定順は重要で、「上端」「下端」「敷き詰め」の順ですので間違えないようご注意下さい。

上下左右の余白は枠として使用する画像のデザインによって最適値が違うと思いますので、実際にカスタマイズする際に確認しながら調整して下さい。

CSSの編集が終わったら、保存、表示確認して完了です。

まとめ

以上、アメブロの旧CSS編集用デザインで、トップページに表示されるメッセージボードに画像を使った飾り枠を表示するカスタマイズ方法をご紹介しました。

まとめると、

画像を3つ用意し、アメブロにアップロードして画像のURLを控えておく
CSSに必要なコードをコピペする
コピペしたコードに画像のURLを設定する

という流れになります。

当記事の方法は、透明・半透明画像には対応しませんが、その分設定が簡単ですので、よかったら試してみてください。