Contents
導入契機になったフロントページ
WordPressでフロントページのデザインを変えたい衝動に駆られました。
今回のミッションは表示速度の重視。
それがこちらですフロントページ
これはPCからのスクリーンショットです。
画面中央を青いWebアイコンの配置でデザインしてみました。
表示速度が高まることを期待して作っています。
実際、AIOSEOのスコアは100点になりました。(理由はよくわかってませんが…)
レスポンシブデザインが崩れた
Webアイコンたちはグループ化したらmobileでも配置が崩れないのではないか。
そんな仮説の検証実験も兼ねていましたが…
見事に崩れました！
細かくアイコン配置を指定すればうまく表示できると思います。
しかし表示できたところで縦配置になるので、矢印アイコンが何だか変。
いっその事表示されなければいいのに…
そんな時に見つけたのが今回紹介するプラグインです。
Responsive Block Control
このプラグインは、Mobile、Tablet、Desktop、Wide の４つのメディアでの表示方法をブロックごとに指定できるようになります。
導入方法
Responsive Block Control でプラグイン検索して有効化することで使用できるようになります。
まだ日本語化されていませんが、説明ページはこちら。
使用方法
投稿編集画面でブロックにカーソルがあるとき、サイドメニューに Visibility という項目ができています。
ブロックを隠したいときは Mobile、Tablet、Desktop、Wide のそれぞれのスイッチをオンにするだけです。
メディア判断基準は画面幅で、それぞれの上限は以下の通りです。
Mobile 400px
Tablet 800px
Desktop 1000px
Wide 1600px
シンプルかつ有用なプラグイン
レスポンシブデザインのサイト作りはほぼWordpressにお任せです。
しかし実際表示してみてデザインを崩すブロックが特定できれば、このプラグインは大活躍すると思います。
私のお気に入りプラグインです
