【Gutenberg】ブロックデバイスごと表示機能

【Gutenberg】ブロックデバイスごと表示機能

ブロックを選択したデバイスのみで表示することができる機能です。

デバイス表示ボタン

記事作成にあたり、スマートフォンとPCのレイアウトを別にしたい場合がありますね?

そのような時に一々CSSを利用してレスポンシブさせるのも結構手間がかかります。

デバイス表示設定は、選択したデバイスのみ表示させるので、レスポンシブ対応せずにデザイン別の同じコンテンツを準備して、デバイス表示設定することで記事作成の時間を減らすことができます!

使用例

スマートフォンの場合は、ツイッターのつぶやきが表示され、PCではYoutubeが表示されます。

スマートフォンのみ表示

PCのみ表示

Writer Profile

donyのサムネイル

WEB関連の営業から制作まで幅広く経験したフロント・バックエンジニア。
今までのクライアントの要望や制作者としてのノウハウをまとめて「DG-STYLE」を開発しました。

Recommend Post

DG-STYLE「Guteberg」オリジナル機能紹介のサムネイル

DG-STYLE「Guteberg」オリジナル機能…

ローコードWordpressテーマ「DG-STYLE」で利用できる「Gutenbergオリジナル機能」について説明します

2021-08-30
【Gutenberg】広告スクリプトブロックのサムネイル

【Gutenberg】広告スクリプトブロック

Googleアドセンスなど、Javascriptコードで追加する広告を設置できるブロックです。広告スクリプトブロック広告

2021-08-08
【Gutenberg】テキストデザイン機能のサムネイル

【Gutenberg】テキストデザイン機能

テキストに背景やアンダーバーを追加できる機能ですテキストデザインショートカットキーで設定可能下のデザイン例に書いているシ

2021-07-29
【Gutenberg】既存ブロックLazyload機能のサムネイル

【Gutenberg】既存ブロックLazyload…

LazyLoadが適用されなかった、ツイッターやTiktokの埋め込みブロックや、カスタムHTMLブロックでJavasc

2021-07-29
【Gutenberg】ステップブロックのサムネイル

【Gutenberg】ステップブロック

利用流れなどに使えるステップブロックです。ステップブロックステップブロック例STEP1記事編集画面を開く新しい投稿もしく

2021-07-25
【Gutenberg】記事リストブロックのサムネイル

【Gutenberg】記事リストブロック

現在記事の関連記事や指定したカテゴリーorタグなどに属している記事を表示できるブロックです。記事リストブロック記事リスト

2021-07-25
TOP