枠付きの画像 + border-image の組み合わせで画像枠付きのボックスを作成する

ここでは、PhotoScape X 等の、画像に枠線を追加する機能と

2016-01-24 at 16.50.png

以下のツールで生成できる border-imgae を含む CSS を使って、

以下のような画像枠付きのボックスを作成する方法について覚え書きしたいと思います。

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

基本的な作成要領は以下の記事のとおりです。

この記事で着目したいところは、border-image の以下のパラメータ。

2016-01-24 at 17.06.png

以下のところで切り替えることができます。

2016-01-24 at 17.08.png

それぞれ、どんな命令であるのかについては、以下のリンク先を見れば百聞は一見に如かずで理解できると思います。

例えば「repeat」では、こんな感じになるところ、

2016-01-24 17.15.11.png

「stretch」するとこんな感じになります。画像が繰り返されるか、横にびよ〜んと伸び縮みするか、といった違いになります。ちなみに「round」は、端っこが揃う repeat みたいな感じです。

2016-01-24 17.15.52.png

このあたりの選択は、使用する画像によって変わってくると思います。例えば、以下のような画像では「stretch」の使用は避けたほうがよさそうです。

2016-01-24 17.05.27.png

なお、iPhone 等でもいい感じで表示できているようですし、

2016-01-24 17.17.24.png

例えば、見出し等に採用してみてもいいかもしれません。

2016-01-24 17.17.27.png

なお、border-image の場合は、ブログ全体への CSS の追加ではなく、記事内の div 要素等に直接追加することができるタイプのようですので、例えば、以下の HTML タグを記事に貼って、とりあえず、この CSS がどんなものか確かめることが可能です。なお、WordPress.com 以外のブログサービス等でも表示されると思います。

 

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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