記事の詳細

基本的な使い方はこちら。

WordPressの見た目が変わった?投稿画面(エディタ)はどうやって使えばいいの?WordPress5.0で追加された「Gutenberg」とは。

新しいWEBサイトを建ててWordPressを入れた時、投稿画面が見慣れない様子に変わっていました。「ついに来ちゃった」感ハンパない、WordPress5.0にて追加されたエディタ...

WordPress5.0で追加された「Gutenberg」の投稿画面(エディタ)使い方【レイアウト編】

前の記事はこちらアップデートが入りまして、前回より若干の項目変更が行われているようです。が、基本的な使い方は前回とほぼ一緒。ブロックを重ねていく方法がわかれ...

WordPress5.0で追加された「Gutenberg」の投稿画面(エディタ)使い方【フォーマット編】

前の記事はこちら1回目で「一般ブロック」の使い方、2回目で「レイアウト要素」使い方をご紹介しました。今回は「フォーマット」の使い方をご紹介します。フォーマット...

 

グループ化機能の使い方

いくつかのブロックを選択したのち、アイコンまたは詳細メニューからグループ化を選択します。

グループ化機能の使い方

グループ化機能を利用してできること

大概のWordPressテンプレートは、固定ページや記事ページのwidthが決まっています。
例としてインクループの記事ページのwidthは1050pxが固定で決まっています。

インクループの記事ページのwidthは1050pxが固定で決まっています

このテンプレートの固定ページや記事ページのwidthがフルワイド(全画面)表示で設定されていると、バックグラウンドに任意の色を設定し、全体的にフルワイドのデザインでページや記事を作成することが出来ます。

この画面は全て固定ページ内で作成しています。

この画面は全て固定ページ内で作成しています。

以下、エディタ編集ページです。

この画面は全て固定ページ内で作成しています。

エディタ編集ページ

 

各ブロックにCSSを設定する

各ブロックには細かくCSSを設定することが出来ます。

各ブロックには細かくCSSを設定することが出来ます。

グループ化したブロックにもCSSを指定することができ、上記のレイアウトには以下のようなCSSを設定しています。

CSSレイアウト

これにより、group-960をクラスに指定した要素の一階層下のdivにはmax-width:960pxが適応されることになります。
こうすることにより、

グループ化ブロック:フルワイド
その一階層下のdivブロック:max-widthが960px

となり、グループ化された部分はフルワイドデザインとなります。

 

グループ化されたブロックには背景色・アンカーリンクが設定可能

グループ化されたブロックには、背景色とアンカーリンクが設定可能になります。

グループ化されたブロックには、背景色とアンカーリンクが設定可能になります。

グループ化がフルワイド設定されていると、バックグラウンドカラーが一面に伸びるので、きっちりとコンテンツが分けられます。
使い方をマスターして、よりわかりやすいコンテンツ作りをしていきましょう!

 

 

この記事であなたの課題を解決することができましたか?

疑問点があったり、解決できなかったことがありましたら、お気軽にご相談してください。

The following two tabs change content below.
インクループ株式会社

インクループ株式会社

「お客様が嬉しくて思わず自慢したくなるような仕事の成果を提供する!」を全員の目標として頑張っています。そしてもう一つの目標が社員が世界一働きやすい会社になることです。従業員の幸せ、お客様の幸せ、そして社会に貢献することができる会社を目指して、社員全員の力を合わせて頑張っています。

ほかの投稿も読んでみませんか?

コメントは利用できません。

相模原のお店やサービスをどんどん紹介!

行ってみよう相模原 相模原市のお店限定

飲食店

ページ上部へ戻る