記事内に高さの同じ枠つきの欄を作成する – 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】 カスタムデザイン機能を使わないで、ショートコード「display-posts」によるカテゴリー or タグ毎の段組み、かつサムネイル画像付きの記事リストを表示する方法についての考察

昨日、記事「【WordPress-com】ショートコード「display-posts」をカスタム CSS なしにそれなりに表示させる -プロパティ「columns」を使って、レスポンシブっぽくする- | comemo」において、以下の記述を記事に貼れば、テーマに CSS を追加しなくても、それなりにレスポンシブっぽい、サムネイル画像付きの記事リストを表示できることについて検討しましたが、

[display-posts image_size="thumbnail" wrapper="div" posts_per_page="10" include_date="true" date_format="Y年n月j日"]

ここでは、これをさらにカテゴリー毎、タグ毎の記事リストに拡張する方法についての覚え書きです。

続きを読む

【WordPress-com】ショートコード「display-posts」をカスタム CSS なしにそれなりに表示させる -プロパティ「columns」を使って、レスポンシブっぽくする-

先日、記事「【WordPress-com】ショートコード「display-posts」をカスタム CSS なしにそれなりに表示させる | comemo|2015-02-15」において、WordPress.com をカスタムデザイン等にアップロードしなくても、ショートコード「display-posts」を使って、サムネイル画像付きの記事リストをそれなりに表示させる方法について検討しましたが、今回はその改良版です。

以下の記述を記事中に追加すると、

続きを読む

CSS で作成された表・テーブルに画像を貼り付けてもレイアウトが歪まないようにするには「table-layout:fixed」を追加すればいいようだ

最近まで、表・テーブルに画像を貼り付けたりしたときにテーブルの幅のバランスが崩れたりして困っていたのですが、「table-layout: fixed」を追加すればいいらしいことがわかったので、その覚え書きです。

table タグや display: table を指定している要素に「table-layout: fixed;」を追加すると、以下のような感じで、表の中に大きな画像を挿入しても、指定した幅内に収まってくれるようです。

いや、これだけの話なんですけれども、個人的にはかなりすっきりしました。

参考

テーマ「Hemingway Rewritten」の記事にワイドなカラムを挿入するための CSS

個人的に以下のように1ページで全体を俯瞰してみれるタイプのサイトが好きで、

続きを読む

IE8 や IE9 では1カラムになるけれども、簡単に2カラムとか3カラムに変更できる方法

記事「記事内に高さの同じ枠つきの欄を作成する –display: table を使う方法 -(改)」等において、記事を複数のカラムにする方法について検討しましたが、カラムの高さを揃えたり、複数のカラムが解かれて、1カラムになるのはまずい、ということでなければ、「column-count」という CSS を使えば、簡単に複数のカラムにできるようです。

たとえば、Wikipedia の出典の部分で使われています。

sadgaga
イチロー – Wikipedia

続きを読む

#2013

「display:table-cell」を使って欄の高さを揃えているボックス内の要素の一部を下に移動する

image

続きを読む

#2013