この記事は最後に更新してから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


お勧め

get_the_post_type_description(2018年5月27日 更新)

string get_the_post_type_description()
投稿タイプアーカイブページ向けの説明を取得する。

get_next_post_link(2015年5月28日 更新)

string get_next_post_link( [ string $format = '%link &raquo;' [ , string $link = '%title' [ , bool $in_same_cat$in_same_term = false [ , mixed $excluded_categories$excluded_terms = '' [ , string $taxonomy = 'category' ] ] ] ] ] )
直後の投稿ページのリンクを取得する。

get_block_editor_settings(2021年8月17日 更新)

array get_block_editor_settings( array $custom_settings, WP_Block_Editor_Context $block_editor_context )
ブロックエディター設定内容を取得する。

get_header_image_tag(2018年5月27日 更新)

string get_header_image_tag( array $attr = array() )
カスタムヘッダーのimg要素を取得する。

get_status_header_desc(2019年2月22日 更新)

string get_status_header_desc( int $code )
HTTPステータス説明文を取得する。