目次

【アメブロカスタマイズ】メッセージボードに画像枠をつける方法

「新CSS編集用デザイン」向けです

アメブロの新CSS編集用デザインでは、トップページのメッセージボードが境界線もなにも無い非常にシンプルなものになっています。

ですがこの場所は、トップページの訪問者に様々なアピールを行うのに最適な場所ですので、もう少し目を引くことができたほうが良い場合もあるでしょう。

そこで、当記事では、メッセージボードに画像枠を付けて、目を引くデザインにするカスタマイズ方法をご紹介します。

CSSの編集をしますので、やり方がわからない場合は先にチェックしておいて下さい。

CSSを編集してアメブロをカスタマイズをする手順
アメブロをカスタマイズするための専用のデザイン「CSS編集用デザイン」に用意されている「ブログデザインCSS」を編集してアメブロをカスタマイズする手順について説明します。

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

それでは、以下の手順を説明していきます。

画像枠になる画像を準備する

まず、画像枠に必要な画像を準備しましょう。

当記事で紹介するメッセージボードに画像枠をつけるカスタマイズ方法では、

  • 上部背景画像
  • 全体背景画像
  • 下部背景画像

の3種類の画像を使用します。

つまり、枠の模様のある背景画像を利用します。

今回は、以下のような画像を用意しました。

【上部背景画像】

【全体背景画像】

【下部背景画像】

それぞれの画像は、以下の画像のように背景画像として配置します。

全体背景画像をメッセージボードの上から下まで縦方向に敷き詰め、上部背景画像をメッセージボードの上端に、下部背景画像をメッセージボードの下端に、どちらも全体背景画像に重ねて配置します。

画像を重ねますので、透明あるいは半透明部分のある画像は使えません(使う場合は別の方法を検討する必要ががあります)のでご注意下さい。

画像の大きさは、2カラムの場合は横幅が720ピクセル、3カラムの場合で横幅が500ピクセルにするとピッタリ納まります。

なお、画像枠に加工できそうな画像は、こちらの無料ダウンロードサイトで「フレーム」というキーワードで検索するとたくさん見つかりましたので、よろしければ探してみて下さい。

画像をアップロードしてURLを取得する

画像の準備が用意できたらアメブロにアップロードして、それぞれ画像のURLを取得しましょう。

もし、やり方がわからない場合はこちらの記事を参考にしてください。

アメブロのカスタマイズに使う画像のアップロード方法と画像のURLの取得方法
アメブロのカスタマイズに利用する画像はアメブロにアップロードして使いますが、そのアップロード方法と、アップロードした画像をCSS等から呼び出すのに必要なの画像のURLの取得方法についてまとめます。

取得した画像の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】);
}

「【上部背景画像URL】」「【下部背景画像URL】」「【全体背景画像URL】」は、それぞれ該当する画像のURLに置き換えます。

「上部」「下部」「全体」の順ですので、間違えないよう注意して下さい。

また、4つある余白の設定は、枠と文字表示領域の間に設ける余白の設定で、枠の太さなどにより異なるため、デザインに合わせて調整が必要です。

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

まとめ

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

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

(準備中)
(準備中)