ブログの左右に画像の飾り枠(フレーム)を表示する方法

アメブロカスタマイズのわざめーばです。

こんにちは。

今回は、CSS編集用デザインを適用したアメブロで、ブログの左右に画像の飾り枠(フレーム)を表示するカスタマイズ方法をご紹介します。

例えばリボンやレース素材を使ってガーリーなイメージにしたり、『影』風の素材を使って立体感を演出したりできますね。

では、やり方です。

上の画像のように、ブログの左右に画像の飾り枠(フレーム)を表示するには、ユーザーCSSの末尾に次のような設定を追加します。

.skinFrame {
  background-image: url(飾り枠として使う画像のURL);
  background-repeat: repeat-y;
  background-position: center top;
}

飾り枠として使う画像には、次のような画像を準備してその画像のURLを指定してください。

(実際のものとはサイズが違います。申し訳ありませんが、実際に使った素材は僕には配布がありません)

おわかりかと思いますが、このような画像を縦に隙間なく並べることで、画像の両側の飾り部分がブログの飾り枠として表示されるようになるわけです。

また、横方向には拡大縮小はしませんので、飾り枠部分のはみ出しを考慮に入れつつ、ブログ幅に合わせたサイズの画像にする必要があります。

なお、画像の内側部分(上記素材画像で単色で塗られている部分)は、左右を飾り枠ではさまれた領域の背景として使われます。

今回は単色ベタ塗りにしましたが、(縦に隙間なく並べることを前提として)好みのデザインにすることも可能ですし、もちろん透明にするという方法もあります。

なお、CSSセレクタ.skinFrameが、ヘッダー画像をヘッダー部の上下にはみ出すように表示する方法などで使用しているため使えないという場合は、代わりに『.skinBody3』,『.skinBody2』,『.skinBody』が使える可能性が高いので検討してみて下さい。

以上、ブログの左右に画像の飾り枠(フレーム)を表示するカスタマイズ方法をご紹介しました。

よかったら参考にして下さいね。

関連記事

アメブロカスタマイズ用デザイン『CSS編集用デザイン』
CSSの編集によるカスタマイズ
アメブロの画像アップロード方法と画像のURL取得方法

アメブロカスタマイズで人が集まるブログ作り