コンテナーとコンテンツを分離

管理しやすいcssを記述するうえで必要なのは、
コンテナーとコンテンツを分離は場所に依存しないセレクタを書くことです。

サイトのロゴやバナーなど、ヘッダーやフッター、コンテンツエリアで渡って使われることのあるオブジェクトの場合、#headerなどのコンテナーと切り離して記述したほうが良いです。

フッターにもロゴが必要になった場合

上記のようになると、ヘッダーやフッタのロゴに対して指定することになってしまうので、logoというパーツとして

という風にすれば、ヘッダーやフッターという場所に関係なく、修正も必要がなくなります。
場所に依存しないようにパーツ化してcssを記述することが拡張性の高いcssを書く上でのポイントとなります。

なので、フッターだけロゴサイズを小さくしたい場合

ではなく、新しい定義として、

として、場所に依存しないようにしてやることが望ましいでしょう。

cssでの絶対値

デザインデータからコーディングするとき要素ごとの余白やフォントサイズの値をcssに反映させることがあるでしょう。

絶対値で行間を指定すると上記のように.textや.text_box対してどちらも行間が文字サイズの1.5倍となっています

今度はline-heightを相対値にすることでフォントサイズが変わっても.text_boxの子要素に対し、行間が文字サイズの1.5倍でされます。
この利点としてフォントサイズの調整があっても行間の値を修正する必要がなくなります。

また、フォントのプロパティ(color,font-size,line-height)などは親要素に設定した値を子要素に継承することが可能なので、子要素にそれぞれ指定する必要がなくなります。

絶対値や単位による指定をする必要がない限り、相対値で指定したほうが、のちの修正など、管理しやすいcssの記述をすることが可能です。

WordPressでの条件分岐

WordPressで固定ページやフロントページなどによって処理内容や記述を変えたい場合があります。
そんな時に便利なよく使う条件分岐を記載しました。

elseを省略して

条件以外では何も処理をしたくない場合else文を省略して記述することも可能です。

またelseifを記述して

ifに当てはまらなかったときに、elseifの条件を判定してくれます。

複数の条件を組み合わせでは

ifの()内で、&&(かつ)と||(又は)を使って、2つ以上の条件を組み合わせることができます。

また、
下記のようにページによって条件を変えることが可能です。

FontAwesomeのWebフォントを背景として扱う

FontAwesomeのWebフォントを背景として扱う場合:afterや:beforeなどの疑似要素を使用して使用する必要があります。

Twitter

疑似クラスbg:beforeにはtwitterのuniコードである\f099をcontent: ‘\f099’;に記載し、
font-familyにfontAwesomeを指定してあげます。

ここで、font-familyには
Font Awesomeのverが 4 から 5 になり、フォントファイルが3つに分けられることになったので、

それが、下記の3つなので、
Brands
Regular
Solid

使いたいフォントファミリーの指定方法を変える必要があります。

iOSでoverflowのスクロールをなめらかにする

overflow:scroll で長い文章をスクロールするように指定した場合、iOSだと挙動が遅く、カクついたりします。

このカクついたスクロールをなめらかにする方法があります。
それは「慣性スクロール」です。

慣性スクロールは、スマホなどのタッチデバイスで、画面をスクロールさせた際、指を画面から離しても急に止まらず、スクロールがある程度持続される機能のことです。

-webkit-overflow-scrolling を指定することによって、動きがスムーズになります。

WP「MW WP Form」のエラー文言を変更する

MW WP Formのメールフォーム作成画面のバリデーション設定から必須項目にチェックを入れることができ、未入力の場合にエラーを表示するなどといったことが可能です。

その際に表示されるエラー文言を任意の文言に変更ことが可能です。

■functions.php

$key === ‘XXX’にはフォーム要素のname属性が入ります。
mw-wp-form-○○○にはメールフォームの自分が作成したフォームのkeyになります。

gradientの書き方

■linear-gradient

アンドロイドや、 iOSに対応するために、webkitのベンダープレフィックス付きで記述する必要があります。

■linear-gradientで途中の色を指定する

■円形のグラデーション radial-gradient

開始位置の初期値はcenterです。
left, right, top, bottomをpx, %の数値で指定できます。

IEで<br>が正しく表示されない

HTML上で改行するには、「br要素」を使用します。
<br>と記述すれば、改行を行ってくれます。

ですが、IEでは「letter-spacing」を使うと、
二つ以上の改行タグを連続で記述しても1つしか改行されないバグがあります。

で改行(空行)をとっている場合、brタグに対してletter-spacingを、

上記のようにbrタグにだけ、letter-spacingを0を設定すると解決できます。

font-familyに小塚ゴシック

小塚ゴシックをfont-familyで指定すると、ブラウザでの表示に少し問題が出てきます。

IEで見ると、文字が上付いて、レイアウトがずれてしまいます。

フォント上端からベースラインまでの高さが、IEではうまく計算されていないためです。

対処方法として考えられるのは、
@font-faceで源ノ角ゴシックなど日本語書体が小塚ゴシックと似たフォントをを読み込むなどの方法があります。

簡単に記事順序の入れ替えができるプラグインIntuitive Custom Post Order

WordPressの投稿記事の表示順序を変えたいという場合があるかと思います。
投稿した記事は投稿日の新しい順番で表示されるようになっています。

上部に表示させたい記事の公開日時を、編集画面から順に修正していくのはとても時間のかかる作業です。

ですが、Intuitive Custom Post Orderというプラグインを使用すると並べ替えの作業が簡単にできてしまいます。

WordPress管理画面からIntuitive Custom Post Orderとプラグインを検索してインストールします。

プラグインをインストールして有効化すると「並び替え設定」という項目が追加されるので、並べ替えを行いたい投稿タイプを指定すると、ドラッグアンドドロップで記事の入れ替えができるようになっています。