記事内に高さの同じ枠つきの欄を作成する – flexbox を使う方法 –

記事「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改) | comemo com|2013-04-10」で紹介した CSS の flexbox 版です。

一番下の段は、幅が広くなると2列から4列になります。

2016-02-19 at 18.19

comemoarrow

2016-02-19 at 18.17

まだ、細かい検証はしていませんが、とりあえず、公開しておきます。

記事内に高さの同じ画像枠つきの欄を作成する

続きを読む

【WordPress】手書き風の枠を記事に貼る方法

以下のような手書き風の枠を記事に貼る方法についての覚え書きです。

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

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

続きを読む

記事の中に欄を作るための HTML タグに border-image で画像を追加する

最終更新日:2016-02-19

記事に以下の HTML タグを貼ると

以下のような画像付きボックスを追加することができます。

見出し

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

見出し

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

この画像付きボックスは、

の合わせ技です。

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

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

2016-01-24 at 16.50.png

以下のツールで生成できる 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 タグが2つ必要なので、テーマのウィジェットや記事のタイトル部分では使いにくいと思ったので、CSS だけで画像の枠線を表示する方法について検討してみました。

記事等に以下の HTML タグを追加し、

<div class="test">てすてす</div>

以下の CSS を CSS スタイルシートエディターへ追加すると、

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

adfasdfads

続きを読む

#2013