background-image + padding で画像の枠を作成する

以下の HTML を記事にはりつけると

<div style="background-image:url('http://comemo508forum.files.wordpress.com/2013/03/skinimage07.jpg');border-radius:5px;padding:5px;margin-bottom:2em;">
<div style="border-radius:5px;background-color:white;padding:10px 15px;">
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
</div>
</div>

画像の枠つきのボックスを表示することができます。

本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文

CSS には「border-image」という、枠に画像をつけるためのものがありますが、ie では使用できないせいなのか、WordPress.com では使えないようになっています。構造上、テーマのカスタマイズでは使えないケースがあると思いますが、記事内であれば十分、利用できる方法ではないかと思います。

なお、同じ要領で background-image + margin を使って作成しようとすると、以下のような感じで上下の枠線が表示されなくなります。

「background-image」で枠線をつくる | comemo demo-1

  • 画像はCG Texturesのものを使用しています。

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。