記事内に高さの同じ枠つきの欄を作成する – 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】more タグの右寄せ

以下の CSS を追加すると

.more-link {
    text-align: right;
    display: block;
}

「続きを読む」のところが右側に移動します。

2016-02-19 at 12.50

comemoarrow

2016-02-19 at 12.51.png

【WordPress.com】transition 等の delay を「0s」に設定すると機能しない?

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

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

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

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

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

【WordPress.com】ソースコードの記述を折り返すための CSS

WordPress.com にソースコードを貼り付ける際に折り返して、スクロールが表示されないようにする方法についての覚え書きです。

続きを読む

【WordPress.com】半透明の画像を使って、背景全体の色合いや明暗の調整をしやすくする

WordPress.com のカスタマイズ機能では、一般に、背景に画像や色を設定することができますが、画像を設定した場合には、色の設定は画像の下に隠れてしまい、見かけ上、無効となります。

2016-02-09 at 16.49.png

そのため、WordPress.com にあらかじめ準備されている不透明な背景パターンを背景画像として使用する場合、その色合いや明暗の調整をするためにはその都度、画像を編集し、差し替える必要があります。

2016-02-09 at 16.50.png

ここでは、画像を半透明にすることにより、下色を使って、背景の色合いや明暗を調整しやすくする方法について覚え書きしたいと思います。

2016-02-09 at 16.54.png

comemoarrow

2016-02-09 at 16.55.png

続きを読む

サムネイル画像のセンタリングについての考察

最終更新日:2016-01-19

サムネイル画像のセンタリングについての考察です。

この記事は、私自身も決して詳しいわけではなく、かつ、説明が面倒なので手抜きである程度、CSS の知識があるという前提で端的にお話しします。

私自身は、例えば、こういう縦長のサムネイル画像があった場合、

2016-01-18 at 11.45.png

続きを読む

CSS を使って背景をぼかす方法についての考察

以下の記事で紹介されていた CSS を WordPress.com に適用できるかどうかの確認です。

続きを読む