WordPressのis_front_page()とis_home()はsiteの先頭pageと投稿一覧を分けて使う
- WordPressのis_front_page()はsiteの先頭URL、is_home()は時系列の投稿一覧を判定します。最新投稿を先頭に出す場合と固定pageを先頭にする場合を分け、themeで表示を誤らない確認方法を解説します。
カテゴリー: ホームページ制作
main要素は共通headerとfooterを外しpage固有の本文を囲む
- HTMLのmain要素は、そのpage固有の中心内容を示します。共通header、navigation、sidebar、footerと分ける基準、WordPress themeで確認する場所、入れ子にしない理由を解説します。
WordPressのinline linkはURLを貼る前にリンク文言と移動先をそろえる
- WordPress 4.5では投稿画面のinline linkが使えます。URLを貼る操作より先に、何を説明する文言から、どのpageへ進ませるかを決める基本を解説します。
WordPressのthemeを翻訳対応にするときは表示文言をText Domainへまとめる
- WordPressのthemeを翻訳対応にするなら、画面へ直接書いた文言を増やさず、Text Domainを決めて翻訳できる文字列へそろえます。修正と引継ぎをしやすくする基本を解説します。
Web App Manifestはiconを置く前にnameとstart URLを決める
- Web App Manifestは、web applicationのname、icon、起動URLなどをまとめるJSON fileです。iconだけを先に用意せず、nameとstart URLを決める手順を解説します。
preconnectは必要な外部domainだけへ指定し広告やfontの読込先を確認する
- preconnectは、後で必要になる外部domainへ早めに接続するためのresource hintです。すべての外部domainへ足さず、実際の読込先を確認して指定する方法を解説します。
WordPressのtheme logoは画像を替える前にsite titleの表示条件を決める
- WordPressのtheme logoは、logo画像を設定する仕組みです。site titleとtaglineを消すか残すかを先に決め、headerの表示条件を確認する方法を解説します。
WordPressのwp_add_inline_scriptは外部fileの依存関係を決めてから使う
- WordPressのwp_add_inline_scriptは、登録済みのscriptへinline JavaScriptを追加するfunctionです。処理順と設定値を混ぜないための確認方法を解説します。
WordPressのSelective Refreshはpreviewだけで決めず保存後のheaderを確認する
- WordPressのSelective RefreshはCustomizerのpreviewの一部を更新する仕組みです。previewだけを正解にせず、保存後のheader、title、taglineを確認する順序を解説します。
WordPressのresponsive previewは画面幅を替えるだけでなくmenuとformを操作する
- WordPressのresponsive previewは、画面幅を見るだけの機能ではありません。mobile、tablet、desktopでmenu、本文、formを操作して確認する順序を解説します。
Flexboxのorderは見た目だけを並べ替え本文と操作の順番を変えない
- Flexboxのorderは表示順を変えられます。本文、見出し、buttonの意味上の順番まで入れ替えないために、HTMLと画面を分けて確認する方法を解説します。
CSSのbackground-blend-modeは画像と背景色だけを重ねて文字の可読性を別に確認する
- CSSのbackground-blend-modeは背景画像と背景色を重ねるpropertyです。文字まで予想外に混ぜないための使い分けと、画面で確認する項目を解説します。
Service Workerはoffline対応より先にcacheの更新方法を決める
- Service Workerでoffline対応を始める前に、cacheへ入れるfile、更新の検知、古いcacheの削除を決めます。更新後の表示を確認する順序を解説します。
CSS custom propertiesは共通値を集めてもfallbackを別に確認する
- CSS custom propertiesは共通する色や寸法を名前付きで扱う仕組みです。var()のfallbackと、仕様段階の機能を本番へ入れる前の確認を解説します。
AMP HTMLは通常のスマホpageを置き換えず先に載せる内容を決める
- AMP HTMLはモバイルpageを軽く作るためのopen frameworkです。通常pageを急に置き換えず、先に対応する記事と、同じ内容を保つ確認範囲を解説します。
WordPress 4.4のレスポンシブ画像はsrcsetとsizesを自動で出力する
- WordPress 4.4は生成する画像markupへsrcsetとsizesを追加します。自動出力の対象、画像size、テーマでの確認、既存画像の扱いを解説します。
