【WordPress.com】border-image で画像の枠を付ける

CSS (CSS3) の中に「border-image」というプロパティがあります。以前は WordPress.com では使えませんでしたが、2016-01-22現在は使えるようになっています。

このプロパティの詳細については以下の記事等をご参照ください。

ここでは、このプロパティを使って、WordPress.com で実際に画像の枠を作成してみたので、その覚え書きです。

枠の作成にあたり使用したのは「border-image-generator」というツールです。

このツールは以下の記事で紹介されていました。

何も考えずに適当な画像を貼り付けたら、ものすごく太い枠になりました。

2016-01-22 at 12.34.png

とりあえず、ここでは実物大で反映されるものと判断し、PhotoScape X で画像を小さくし、角の丸さを再調整した上で

2016-01-22 at 12.31.png

再チャレンジしたところ、いい感じになりました。

2016-01-22 at 12.39.png

なお、調整作業は右上の画像で行うことが可能であり、拡大させることもできました。

生成された CSS を

2016-01-22 at 13.14.png

WordPress.com の CSS エディタの方へコピペし、適宜、調整し、 1

2016-01-22 at 13.15.png

記事に以下のような記述を追加したところ、

<div class="wood-img">てすてす
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文</div>

以下のような画像の枠を作成することができました。

2016-01-22 at 13.16.png

なお、今回、使用した画像は「CG Textures」からダウンロードしたものです。

また、私が試してみた限りにおいては、border-image と border-radius (これを使うと通常、角が丸くなる) との併用はできませんでした。

 

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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