テーマ「Shoreditch」付属の CSS を使って最新記事一覧を作成する

私自身は、2016-05-02現在、独自の CSS を追加するなどして以下のような最新記事リストを表示させていますが、

2016-05-02 at 21.57.png

テーマ「Shoreditch」にあらかじめ準備されている CSS を使うことでもある程度、再現することができたので、その覚え書きです。

続きを読む

WordPress.com のテーマ「Origin」のアーカイブ表示をワイドにするための CSS

最終更新日:2016-05-07

WordPress.com のテーマ「Origin」に以下の CSS を追加すると、

続きを読む

記事内に高さの同じ枠つきの欄を作成する – 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】カテゴリーの枠に色をつける

 

記事「【WordPress.com】カテゴリーを大カテゴリー毎にボックス分割するためのCSS | comemo com|2016-02-18」で紹介した CSS に以下の CSS を追加したりしたものです。

テーマ「Origin」で調整したものです。他のテーマで適用するためには微修正が必要かもしれません。

【WordPress.com】カテゴリーを大カテゴリー毎にボックス分割するためのCSS

HTML の記述の方はカテゴリーウィジェットのダミーデータです。CSS の記述を WordPress.com に適用すると、カテゴリーウィジェットがボックス分割されると思います。

うまくいかないテーマもあるかと思いますが、とりあえず、公開しておきます。

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

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

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

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

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

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