この記事は最後に更新してから1年以上経過しています。
説明
レスポンシブ対応したWordPressの管理画面。プラグインやテーマのカスタマイズで管理画面を拡張しているなら、切り替わるタイミングはきっちり押さえておきたいところではないだろうか。
確認方法は簡単で、ブラウザで幅を狭くしたり、広くしたりすればいい。整理すると、次のような感じになる（他にもあるかもしれないが）。
| 幅 | 内容 |
|---|---|
| 901ピクセル以上 | 標準設定 |
| 900ピクセル以下 | サイドナビゲーションがアイコンのみ |
| 850ピクセル以下 | 投稿画面のウィジェットが1段 |
| 782ピクセル以下 | サイドナビゲーションが消え、フォントが大きくなる |
画面の見た目がはっきり変わるのが、幅が782ピクセル以下か783ピクセル以上かである。782ピクセル以下の場合は、ページ構成がシンプルになり、フォントサイズが変わることは意識しておきたい。
スタイルシートのスケルトンは次の通り。
<style type="text/css">
/* 幅が901px以上のスタイル */
@media screen and (max-width: 900px) {
/* サイドナビゲーションがアイコンのみ */
}
@media screen and (max-width: 850px) {
/* 投稿画面のウィジェットが1段になる */
}
@media screen and (max-width: 782px) {
/* サイドナビゲーションが消え、フォントが大きくなる */
}
</style>
まあ3.8と3.9ではスタイル設定が微妙に違っているので、最終的には実際の画面で確認してほしい。
最終更新 : 2014年06月03日 18:08
関連
お勧め
home_url（2023年3月31日 更新）
string home_url( [ string $path = '' [ , string $scheme = null ] ] )
現在のブログ（サイト）のホームURLを取得する。ホームURLは、管理者ページの「設定」-「一般」の「サイトのアドレス(URL)」のこと。get_comment_meta（2014年3月9日 更新）
mixed get_comment_meta( int $comment_id [ , string $key = '' [ , bool $single = false ] ] )
コメントメタ情報の値を取得する。
wp_maybe_inline_styles（2025年12月4日 更新）
void wp_maybe_inline_styles()
CSSファイルの追加情報をインライン化する。
next_posts_link（2018年5月27日 更新）
void next_posts_link( [ string $label = 'Next Page »' [ , int $max_page = 0 ] ] )
カテゴリーやタグなどのアーカイブページにおいて、1ページの投稿件数以上の投稿があった場合に次ページへのリンクを表示する。
wp_lazy_loading_enabled（2023年8月11日 更新）
bool wp_lazy_loading_enabled( string $tag_name, string $context )
要素にloading属性を追加するか判定する。