記事「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -（改） | comemo com｜2013-04-10」で紹介した CSS の flexbox 版です。
一番下の段は、幅が広くなると２列から４列になります。
まだ、細かい検証はしていませんが、とりあえず、公開しておきます。
カテゴリー別アーカイブ: 枠
記事内に高さの同じ画像枠つきの欄を作成する
【WordPress】手書き風の枠を記事に貼る方法
以下のような手書き風の枠を記事に貼る方法についての覚え書きです。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
記事の中に欄を作るための HTML タグに border-image で画像を追加する
最終更新日：2016-02-19
この画像付きボックスは、
と
の合わせ技です。
枠付きの画像 + border-image の組み合わせで画像枠付きのボックスを作成する
ここでは、PhotoScape X 等の、画像に枠線を追加する機能と
以下のツールで生成できる border-imgae を含む CSS を使って、
以下のような画像枠付きのボックスを作成する方法について覚え書きしたいと思います。
本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文 本文
【WordPress.com】border-image で画像の枠を付ける
CSS (CSS3) の中に「border-image」というプロパティがあります。以前は WordPress.com では使えませんでしたが、2016-01-22現在は使えるようになっています。
このプロパティの詳細については以下の記事等をご参照ください。
ここでは、このプロパティを使って、WordPress.com で実際に画像の枠を作成してみたので、その覚え書きです。
background-image + before,after で画像の枠を作成する
最終更新日：2016-01-22
以前、記事「background-image + padding で画像の枠を作成する」において、画像の枠線を表示する方法について検討しましたが、HTML タグが２つ必要なので、テーマのウィジェットや記事のタイトル部分では使いにくいと思ったので、CSS だけで画像の枠線を表示する方法について検討してみました。
記事等に以下の HTML タグを追加し、
<div class="test">てすてす</div>
以下の CSS を CSS スタイルシートエディターへ追加すると、
画像の枠線つきのボックスを表示することができました。
