Monthly Archives: April 2019

New!

CSS3: flex でマージンが設定された行のカラム数を調整する

CSS の flex レイアウトでレイアウトを組むのが当たり前になりました。 今回は flex コンテナ内のマージンが設定されたボックスの1行カラム数を、好みのレイアウトに調整する説明をしたいと思います。 目次 flex でマージンが設定された行のカラム数を調整する まとめ flex でマージンが設定された行のカラム数を調整する 今回は li に margin: 10px が設定されたリストの1行のカラム数をコントロールしたいと思います。 HTML flex(flex-basis)を 33%(100%/3 = 33.333% を切り上げ)とすることで margin が存在するボックスも 2列でレイアウトすることができます。 CSS 1行を3列にしたい場合は flex: 26%(100%/4 = 25+1% )とすることで 4列ではなく 3列になります。 まとめ 2014年の CSS Flexible Box Layout Module Level 1 最終草案から、多くの年月が経過し、デバイス環境の変化により float レイアウトが不要となりつつあります。 これからも float が必要なコーディングはなくならないと思いますが、メインのレイアウトは、コスト面において flex で行うのがメリットが多い時代になってしまったと思います。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

WordPress: 親テーマのスクリプトを子テーマ内のファイルへ置換する

WordPress である親テーマの子テーマを作成した場合、スクリプトファイルは親テーマのものを参照しています。 スクリプトファイルに変更を加えたい場合、親テーマのスクリプトファイルを直接書き換えるのも間違いではないですが、テーマファイルのアップデートにより変更内容が消失するリスクがあります。 今回は、親テーマ内のスクリプトファイルに変更を加えたい場合、子テーマ内のファイルに置換するための function.php のサンプルを掲載したいと思います。 目次 親テーマのスクリプトを子テーマ内のファイルへ置換する まとめ 親テーマのスクリプトを子テーマ内のファイルへ置換する 親テーマ(テーマ名 xyz)の wp-content/themes/xyz/js/xxx.js を、子テーマ(テーマ名 abc)内の wp-content/themes/abc/js/xxx.js に置換する説明となります。 あらかじめ、親テーマのスクリプトファイルを子テーマの同階層へコピーし、子テーマの function.php に以下のコードを記載することで、スクリプトファイルが置換され読み込まれるようになります。 まとめ 親テーマにはなるべく変更を加えず、子テーマの function.php や style.css 等でカスタマイズすれば、WordPress 本体や、テーマファイルのアップデート時に予期せぬ動作不良を回避できます。 ゼロからテーマファイルを制作できるのも WordPress の魅力ですが、参考になる親テーマから子テーマを派生させカスタマイズし、WordPress を利用したい方は今回のサンプルをご活用ください。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。
Update!

WordPress: ログイン画面をカスタマイズする(子テーマ対応)

Web 案件を WordPress で納品する場合、ログイン画面をオリジナルのものにすれば格段に品質が向上します。 今回はログイン画面カスタマイズの基本であるロゴ画像や、ボタンのデザインを変更してみたいと思います。 目次 ログイン画面をカスタマイズする(子テーマ対応) まとめ WordPress: ログイン画面をカスタマイズする(子テーマ対応) みなさんもご存知の WordPress デフォルトのログイン画面です。 ここからは https://xxx.com で運用されている WordPress に以下のような xxx という子テーマがあると仮定し説明します。(※印のファイルは今回使用するファイルです) functions.php 以下のようにログイン画面が変更されました。 まとめ 久しぶりに WordPress を触っていますが、基本構造はあまり変化ないにも関わらず、できることが増え、ユーザビリティが格段に良くなっていることにびっくりしました。 これまで WordPress のテーマファイルは自作していたのですが、なるべく工数をかけず優秀なテーマファイルを利用し、子テーマで運用するのも面白いと感じました。 この記事がみなさんのお役に立ちましたら、下記「Share it」よりブックマークやSNSで共有していただければ幸いです。