WordPressの編集画面でCSSが編集できない場合

サイトで、レイアウトを編集で管理画面からCSSを編集することがあるかと思います。

HTPからCSSファイルをダウンロードしてきて、編集、アップロードの作業をするのも中々手間ですよね。

ですが、管理画面でCSSを編集しても、サイトに反映されていないという経験をした人もいるのではないでしょうか。

原因の一つにキャッシュというものがあり、ブラウザ側が古いほうのCSSを読みに行くため、新しいCSSを読み込めないということがあります。

上記のように
PHP関数「filemtime()」を使い、そのファイルの最終更新日を取得して、新しいファイルを読み取りに行くように指定してあげることで、
キャッシュによる問題を解決することができます。

ファイルを更新してもサイトに変化がない場合、試してみるとよいでしょう

jQuery クリック連打を制限する

メニューボタンやプルダウンなど、アニメーションが終わる前に、開閉ボタンを連打すると、
何回もメニューの開閉をしたり、挙動が変わってレイアウトが崩れてしまうなど問題が起きてしまう場合があります。

何回もメニューボタンを押す人は少ないでしょうが、意図した問題が起きないように、
クリック対策をしておくのも必要でしょう。

連打によって連続で動作させたくない場所に .stop(true, false) を追加します。

上記のようにmenu.stop(true, false)を.animateの前に記述することで、連打したとしても、連続でメニューが開閉しないようになります。

font-feature-settingsで文字詰め

CSSのプロパティのfont-feature-settingsで自動カーニングをすることが可能です。

ですが、すべてのフォントで自動カーニングしてくれるわけではありません

利用できるフォントは、

1,OpenTypeフォント
2,プロポーショナルメトリクス情報がフォントに含まれている

上記の条件を満たすフォントは

ヒラギノ角ゴシックヒラギノ明朝、游ゴシック、游明朝

webフォントではNoto Sans CJK JPなどです。

文章などに基本的に使用するメイリオにはプロポーショナルメトリクスの情報は含まれていません。

ですのでfont-feature-settingsでは自動カーニングが残念ながらできません。

EdgeやIE11では

text-align:justify
text-justify:inter-ideograph
font-feature-setting : “palt”

上記をあわせて使用した場合、両端揃えができないなどの不具合がありますが、

プロパティ自体の対応状況は、大体のモダンブラウザで使用できます。
Notoフォントなど和文フォントを使用する際などに利用してみると、きれいに読みやすくなるサイトになるかと思います。

jqueryのみでrssを読み込み

Google Feed APIが終了したとのことで

Google Feed APIの代替策としてjqueryを使用したrssの収得方法です。

以下のコードでは同じドメイン内の RSS を読み込んで表示することが可能です。

jqueryのみで簡単にrssを取得可能なので、ブログの最新記事などをhtmlサイトに表示させたいときなどに便利ですね。

デバイスサイズなどでjsの条件分岐

レスポンシブサイトでは、pcやタブレット、スマートフォンなどで見え方やデザインが大きく変わったり、処理したいプログラムを変更したい場合があるかと思います。

今回はブレイクポイントごとににJavaScriptの切り替える方法を紹介します。

これを利用すれば、グローバルナビゲーションのpcからスマホ表示まで、
変更を十何にすることができます。

IEなどでフォントサイズcalc(% + vw)の計算

calc()は値を計算式で指定できる便利なプロパティです。

また、異なる単位で計算することができ、%やvw, vh、pxなどと計算できます。

ですが、フォントサイズをcalcで(100% * 2vw)などと計算するとIEやEdgeなどのブラウザでは、正確な計算をできません。

上記のように指定するとIE,Edgeのブラウザでは、ほかのブラウザと違う表示サイズになってしまいます。

なので%とvwの計算はせずに

上記のように%などではなくemなどの単位を使って計算をしてやる必要があります。

レスポンシブ対応のテクニック

レスポンシブ対応は、スマフォファーストの時代になったからこそ、サイトを作るうえでは必須になってきました。

画像の切り替えやフォントサイズの指定など、なかなか面倒な作業が多いのではないでしょうか。

ですが、htmlだけで、使用する画像の切り替えができます。

タグを使用すれば、
画像サイズなどをviewportに応じて使い分けることが可能です。

また、フォントサイズなどでは、

rem という単位があります。

html要素からの相対的なサイズが設定されるため、階層が変わったとしても影響がありません。
rootのフォントサイズを62.5%(10px)にすると、remでの計算が楽になります。

1.4rem = 14pxと1/10倍するだけでpxからremに単位を変えることができます。

Atomに入れて便利なプラグイン

CSS3が普及してきて、便利なプロパティも多いかと思います。
ですが、ブラウザによって、ベンダープレフィックスを付けないと使用できないものもあります。

存在しないベンダープレフィックスを書いてしまったり、いちいち調べるのも面倒くさいと思います。

そういう時に、Atomエディターには便利なプラグインが存在します。

autoprefixer

ショートカットのctrl+shift+pでautoprefixerと呼び出すと必要なベンダープレフィックスを付与してくれます。

Atomエディターを使用していない方でも

http://autoprefixer.github.io/

対応させたいブラウザややandoroidのバージョンなどによって必要なベンダープレフィックスを付けてくれます。

jQueryでタイマー処理

「setInterval」を使用すればJavaScriptでのfunctionを感覚を決めて、繰り返し処理を行うことができます。

タイマー処理には以下が存在します。

■setInterval 一定時間ごとに特定の処理を繰り返す
■setTimeout  一定時間後に特定の処理をおこなう(一度のみ)

簡単な画像のスライドショーなどを実装することもできるので、使い方によってはいろいろできそうです。

CSSのプロパティ記述順

Googleの書式ルールなどではアルファベット順になるように記述するのが一般的ですが、

会社によっては、複数人で仕事をする場合などでは、会社それぞれの記述ルールなどが存在します。

視覚整形モデルからボックスモデル、背景と視覚要素から順々に詳細な情報に分けていく方法などがあります。

例としては
1.要素の表示 有/無し display要素
2.要素の配置 float positionなど
3.要素のボックスモデル widthやheight margin,padding…など

ルールを決定するのは良いのですがやはり覚えるまで時間がかかり、作業時間も増えてしまうので、ツールを使うのもよいかもしれません。

それが、CSScombです。

定変更画面にあるプロパティの順を、会社のコーディングルールなど沿って設定しておけば、ショートカット一つで、CSSの記述順を整形してくれます。

テンプレートとして残しておけば共有もできるので、作成しておきたいですね