アメブロの新CSS編集用デザインで、トップページに表示されるメッセージボードに画像を利用した飾り枠を付けて、目を引くデザインにするカスタマイズ方法をご紹介します。
飾り枠にする画像を準備する
まず、飾り枠に使う画像を準備します。
ここで紹介するカスタマイズ方法では、
- 上端用画像
- 敷き詰め用画像
- 下端用画像
の3種類の画像を使います。
今回は、例として以下のような画像でやってみます。
上端用画像
敷き詰め用画像
下端用画像
これらの画像を、枠に見えるよう以下のようにメッセージボードの領域の背景画像として配置します。
このような飾り枠に加工できそうな画像は、例えばこちらの無料ダウンロードサイトなどで「フレーム」や「飾り枠」といったキーワードで検索するとたくさん見つかると思います。
なお、当記事で紹介する方法では画像を重ねる部分があるため、基本的に背景が透明や半透明の画像は使えませんのでご注意下さい。
なお、画像のサイズは、画像の幅を以下のようにすると拡大縮小無く表示されます。
2カラムの場合 → 720ピクセル
3カラムの場合 → 500ピクセル
画像の準備ができたら全ての画像をアメブロにアップロード＆画像のURLを取得して控えておいて下さい。
メッセージボードに画像で飾り枠をつける
次に、CSSの編集でカスタマイズを行います。
以下のようなコードをCSSの末尾に追加して下さい。
/************************************************
新CSS：メッセージボードに画像の飾り枠をつける
************************************************/
.skin-message {
padding-left: 60px; /* 左側余白 */
padding-right: 60px; /* 右側余白 */
padding-top: 70px; /* 上側余白 */
padding-bottom: 70px; /* 下側余白 */
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");
}コードを編集する
CSSにコードを追加できたら、そのコードの一部を編集します。
具体的には、飾り枠用としてアメブロにアップロードした3つの画像のURLを、それぞれ該当する箇所に記述します。
3つの画像のURLの設定順は重要で、「上端」「下端」「敷き詰め」の順ですので間違えないようご注意下さい。
上下左右の余白は枠として使用する画像のデザインによって最適値が違うと思いますので、実際にカスタマイズする際に確認しながら調整して下さい。
CSSの編集が終わったら、保存、表示確認して完了です。
まとめ
以上、アメブロの新CSS編集用デザインで、トップページに表示されるメッセージボードに画像を使った飾り枠を表示するカスタマイズ方法をご紹介しました。
まとめると、
- 画像を3つ用意し、アメブロにアップロードして画像のURLを控えておく
- CSSに必要なコードをコピペする
- コピペしたコードに画像のURLを設定する
という流れになります。
当記事の方法は、透明・半透明画像には対応しませんが、その分設定が簡単ですので、よかったら試してみてください。
