alt属性

画像のalt属性はWordPressでは代替テキストとして扱われていますが、
面倒くさくて、空欄のままにしていることも多いのではないでしょうか。

旧バージョンのWordPressではalt属性にファイル名が自動設定されていましたが、
アクセシビリティ向上から自動挿入機能がなくなりました。

googleなど検索エンジンを巡回するクローラーは、
画像の文章を読み取ることができないためalt属性から画像を認識します。

そのため、alt属性にはファイル名ではなく、画像の説明が好ましいからです。

altを自動で入力してくれるプラグインは存在しますが、ファイル名などを自動でaltに設定したり、ランダムな文字列をaltに設定するのは好ましくありません。

altは必ず設定しなければいけないということではありませんが、
・装飾的に使用した画像
・存在しなくても意味的に大丈夫な画像など
設定しないほうがマイナスになりにくいでしょう。

図の説明など、アクセシビリティに直結するような場合、意識的にaltを設定することでSEO対策につながるので、面倒くさがらずに設定をしていきたいですね

flex-directionを指定した時のIE11で表示くずれ

display Flex使用時でテキストを上揃え、画像だけを下に揃えで、
テキスト量にかかわらず、常に画像を下にはい位置したいい場合、下記のように記述すると、
実現可能ですが、IEで見たときに画像の下に空白ができてしまう不具合があります。

解決方法は、
画像を囲む親要素に対してmin-height: 0%;を指定してあげることで解決が可能です。

Atomエディタの文法チェッカー「W3C Markup Validator」

HTML 内に文法のミスが無いか、W#CのHTMLとCSSの文法チェッカーを使用した方もいるかと思いますが、
今回はエディタ上で簡単に行える、htmlのチェックしてくれるプラグインの紹介です。

そのプラグインの名前は「W3C Markup Validator」です。

W3C Markup Validatorの基本的な使い方は、
記述したHTMLをctrl+sなどで保存すると、
エディタの下部にあるインフォメーションに

文法の誤りなどがあると、バリデート結果のパネルが表示され
エラー情報などが表示されます。

また、エラー情報をクリックするとエラーのある場所に飛んでくれます。

致命的なエラーなど、チェックすることができるため、大幅なミスなどを未然に防ぐためにも、入れておきたいプラグインですね。

WordPress の固定ページのリビジョン機能

WordPressには「リビジョン」という、元の状態に復元できる機能が実装されています。

編集に失敗して、いざというときに復元したいい場合役に立つときがあります。

編集前の状態に戻すには、投稿ページにあるメニューの公開にあるリビジョンを選択、
そこで、戻したいバージョンの記事を選択するだけです。

デメリットとしては、
リビジョン管理をするとデータが増大してしまうことです。
リビジョンの管理に制限がなくどんどん作成されてしまうので、データを圧迫してしまう可能性があります。

データを圧迫したくないという方は、
リビジョンを無効にすくことも可能です。

無効にするには、
wp-config.phpに記述してあげればOKです。

保存するリビジョン数を制限したい場合は以下を記述します。

バリデート付きの条件分岐フォーム作成

mw wpformで条件分岐フォームでありながら、それぞれのフォームにバリデーションを付与する方法です。

以下では選んだラジオボタンによって、
切り替えるフォームを作成する方法です。

funnction.phpに以下の記述をします。

$data[‘投稿’] にあたる部分がラジオボタンのname属性にあたる部分です。
あとはset_ruleにバリデートを付与したいフォームエリアのname属性を指定してあげればOKです。

あとはスクリプトでname=”投稿”のvalの値によって表示非表示の条件分岐をしてあげれば、
選んだ選択肢によって表示非表示を切り替えられるマルチフォームを作成することができます。

WP Theme Test

サイトリニューアルで新しくテーマを作成したけれども、現在のサイトテーマを維持したまま、
公開前までに裏側で作業したいなんて場面があります。

そんな時には管理者のみが適用したテーマを閲覧することができるテーマが存在します。
もちろん 、スマホなどの実機でも閲覧が可能です。

WP Theme Test

インストールが完了したら、設定画面のtestthemeからテーマを選択しcurrentstateでonを選択するだけです。

ちなみに、見せる管理者権限はrolesから選択することができます。

IEでposition:absolute;が崩れる場合

コーディングでposition関連のプロパティを使う機会はとても多いと思います。

今回ではIEでchromeなどのブラウザとちがっいぇレイアウトが崩れる現象に遭遇したのでメモです。

二倍で書き出した画像に対して、画像に対してzoomを指定し半分のサイズで表示させていましたが、
ブラウザ上では画像は半分サイズで表示されているにもかかわらず、親要素に対して、
指定している位置がおかしいという現象がありました。

上記のように指定してしまうと、画面上は正常な画像サイズに見えていても、実際は2倍サイズとして扱われてしまっているため
positionの位置が崩れていたということです。

表示とコードの差異がわかりずらく、解決に時間がかかってしまったので、zoomなど、問題のありそうなプロパティなどに注意して、
コーディングを行っていきたいですね。

SVGで使える便利なサイト

サイト制作においてSVGを使用する機会が多く増えてきました。

アニメーションも非常に軽快で使用しやすいものなので、効果的に使用すれば、サイトのデザインを魅力的に見せることが可能です。

そこでSVGアニメーションを使用で便利なサイトを紹介します。

https://maxwellito.github.io/vivus-instant/

SVG画像を、ドラッグ&ドロップでアップロードして、左側のメニューでアニメーションの設定をするだけで簡単に調整が可能です。

メニュー項目のAnimation typeでアニメーションのタイプや、描く順番、時間や、ループの設定が可能です。

項目の設定し、SVGファイルをダウンロードしたら
CSSで動かす設定をしてあげれば、OKです。

文字をアウトライン化したデータや複数の線画をアニメーションさせたいけれども、設定が難しいなんて方も使用してみてはどうでしょうか。

要素が見えたタイミングでイベントを開始させる

CSS3のアニメーションなどで、要素が見えた瞬間にアニメーションさせたいという場面があったので、
備忘録的なメモです。

ブラウザ上で見えたときに処理を実行するには、
要素までのスクロール量を収得してイベントを発火させるか,
プラグインで、イベントさせるかがあります。

jquery.inview

プラグインを使用する場合

ダウンロードしたquery.inview.jsをhead内で読み込み、

.on(‘inview’, function(){});でイベントの記述をします。

上記のように記述することで、見えたときにアニメーションのフェードインをさせることができます。

単にjsで実行する場合下記のように記述すればOKです。

wp_is_mobile()でPCとSPで表示を切り替える

WordPressには条件分岐タグが存在します。
このタグを使用することで、デバイスによって表示の変更が可能です。

それが、wp_is_mobileという条件分岐タグです。
スマホからのアクセスされているかどうかを判定し、表示の切り替えが可能です。

PCとスマホで別々の広告を表示させるときや、
PCとスマホでメニューの表示の仕方を変えたい場合に有効です。

メディアクエリーと似たように表示の切り替えが可能ですが、wp_is_mobile()では、端末によって判別するところが大きく違うところです。

注意点として、タブレットもスマホ扱いになってしまうため、スマホ以外はPC表示にしたいい場合は、
function.phpに以下の記述をして、is_mobile()で条件分岐をしてあげます。