display: box

要素の横幅を均等に分けたレイアウトをコーディング
したいとき、Flex boxは便利なプロパティです。

box-flexプロパティは子要素を並べた時の余白の領域を分配する比率を指定してくれます。

width: 100%」とするとすべての子要素が同じ100%の横幅になろうとしますが、均等に縮めるように配置されるため、均等幅になります。

wpでurlで表示する内容を分岐

ワードプレスで、urlによって表示させる内容を分岐させる方法です。

動的に吐き出されるソースで、urlさえわかっていれば、メイン画像の切り替えなどが可能になります。

カスタム投稿のアーカイブページにもAll in One SEOのディスクリプション設定を反映する

カスタム投稿のアーカイブページにもAll in One SEOのディスクリプション設定を反映する方法です。アーカイブページなどにAll in One SEOのメタ情報を適用するためにはfuction.phpに下記の記述をする必要があります。

カスタム投稿のタクソノミーとアーカイブページの固定ページを作って、できたpageIDを以下に入れると、meta情報が反映されます。

tdが横に伸びない

レスポンシブサイトでtableを扱うとき、横並びになっていたthやtdのセルをブロック要素にして、横幅100%で表示させることがあります。

指定方法は、thおよびtdにdisplay:blockを指定するだけです。
これで、tdがブロック要素として表示されるので、各ボックスが横幅100%になり、たてに順に並びます。

単にtableにもdisplay:blockをするだけではできません。

blockにするのはthとtdにしてtable の横幅を100%にします。

ボックスの高さを揃える

横並びのボックスの高さ(下辺)を揃えたい時は、Flexboxを使うと高さを揃えることが可能です。

文字数などで高さがばらばらのボックスを高さを揃えて配置したいときなどに便利です。

例えば、float: left; で横並びのボックスを配置した時、文章量などが変わるとボックスの高さがバラバラで揃いません。

そんな時、Flexbox を使うと、文字量が多いボックスの高さにに他のボックスの高さが揃ってくれるのです。

■html

■css

便利なFlexboxですが、
Flexboxは全てのブラウザとバージョンに対応しているワケではないので、ベンダープレフィックスを使用したほうが良いでしょう

Noto Fonts

Noto Fontsは、GoogleとAdobeが連携して制作したフォントです。
世界の言語を1つのフォントセットで表現したものです。

フォントセットにない文字を表示させようとすると豆腐文字が出てきてしまいますが。
Noto Fontsではそんなことはありません。

フォントの名前もno more tofuからきているそうです。

文字数ですが、Noto Sans JPが6,992文字
Noto Sans Japaneseが6,934文字。です。
Noto Sans JPでは漢字が35文字増えており、漢字以外は23文字増えています。

ですが問題点もあり、

文字を表示するのに時間がかかってしまうので、使用する文字などできるだけ少なくしたほうがよさそうです。

CDNのWebフォントを利用し、
日本語のWebフォントはサイズが大きいので、CDNなどの利用者のブラウザにキャッシュされているものを使用し、Note Fontsの場合で言えば、Googleのサーバのものを指定することです。

jQueryでCSSの編集

jQueryでCSSの属性値を変更したりできます。これを応用すれば動的にcssの変更などができるようになります。
基本的には下記のようになります。

■css

■js

上記のように記述すれば同じ効果が得られます。

文字の先頭と最後をあわせる

文字の先頭と最後をあわせるのにTABや空白などを入れて調整するときもありますが、text-justify-lastを使うと、文字の頭と最後を揃えて字間が調整されるので、便利です。

letter-spaceなどで調整もできますが、字間の調整も一括でできるのでより使いやすい方法だと思います。

カテゴリ名をリンク付きでリスト表示する WordPressタグ

フッターなどにカテゴリのリストをリンク付きで表示させることができるWordPressタグです。
カテゴリーを直接記述するのもいいですが、カテゴリーの数が多くなってくると管理も大変なので、
カテゴリを管理画面から編集することができるので、システムで動的に吐き出したほうが、制作は楽です。

     

:matches()

:matches()擬似クラスは複数のセレクタをたった1行で簡潔に記すことができるものです。

FirefoxやChromeではベンダープレフィックス対応で:any()擬似クラスを使用したほうが良いです。