記事内に高さの同じ枠つきの欄を作成する – 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.com】transition 等の delay を「0s」に設定すると機能しない?

CSS に関する、ややマニアックな話題です。

CSS を使うと、一般的には以下のようなアニメーションを表示することができますが、

WordPress.com だとうまくいかないケースがあるようです。その傾向については、まだ、把握しきれていません。

うまくいかないケースとして、例えば、animation の delay を「0s」に設定すると、2016-02-18現在、WordPress.com では、少なくとも mac の Firefox でアニメーションが機能しなくなるようです。

なお、例えば、「.001s」等、極小の値を入力するか、「0s」自体を削除(初期値が「0s」なので問題ない)すれば問題ないようです。

WordPress.com にゴーストボタンを貼る

以下の記事で紹介されていたボタンを WordPress.com で試してみたところ、うまくいくことを確認しました。

表示のようすはこんな感じです。HTML を記事に貼って、CSS を WordPress.com に適用すれば、以下のようなボタンが反映されると思います。

【WordPress.com】画像周りの枠やスペースの調整方法

ここでは、WordPress.com の記事に貼り付けられている画像まわりの枠やスペースを調整する方法について覚え書きしたいと思います。

2016-02-10 at 10.14.png

続きを読む

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

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

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

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

続きを読む

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

最終更新日:2016-02-19

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

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

見出し

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

見出し

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

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

の合わせ技です。

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

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

2016-01-24 at 16.50.png

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

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

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

続きを読む