記事の詳細

前の記事はこちら

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

アップデートが入りまして、前回より若干の項目変更が行われているようです。が、基本的な使い方は前回とほぼ一緒。
ブロックを重ねていく方法がわかれば、Gutenbergはレスポンシブに対応している非常に使い勝手のよいエディタです。積極的に取り入れていくことを推奨します。

前回は「一般ブロック」の使い方を紹介しましたが、今回は「レイアウト要素」のご紹介をしていきます。

ボタン

 

ボタンを作成することができます。ワンクリックで色を変えることも。
他ページに遷移するほか、外部リンクなども利用可能です。オンマウスアクションはCSSで指定する他ありませんが、「スタイル」から角丸・四角など、3つのパターンからシェイプを選ぶことが出来ます。

 

カラム

縦列を増やすことができます。
増やした縦列の中にはいずれのブロック要素も挿入可能で、様々にコンテンツを整えることができます。
カラムを重ねたい場合はブロック要素のカラムの下にさらにカラムを作る事で対応可能です。
なお、カラムの中にカラムを入れ子にすることも可能。CSSなどを使って制御する場合は入れ子にすることもあるかと思います。

レスポンシブになっていて、ブレイクポイントは782pxと600px。
基本は600pxブレイクポイントとなっているようです。

 

メディアと文章

よくある写真の横にテキスト、という配置を作ることが出来ます。
レスポンシブにするとこんな感じ。下に落ちないでずっと隣にいます。

「モバイルで重ねる」をオンにするとこんな感じです。

 

続きを読む

「続きを読む」を設定した前の文章がアーカイブページに抜粋として表示されます。が、基本ここは文字数制限がかかっているので、テーマなどに依存してしまう部分が大きいです。
「続きを読む」タグの前のティザーを非表示 をオンにすると、「続きを読む」タグの前のコンテンツ、アーカイブページに抜粋として表示されている部分が記事内部では表示されなくなります。

 

改ページ

「改ページ」タグを入れたところで次のページに遷移できるようになります。長い文章などを扱う場合は、ほどよく改ページをいれたほうがいいでしょう。

 

区切り

区切り線を入れることができます。線のスタイルは三つ、「短い線」「幅広線」「ドット」の3パターンで色を付けることはできません。

 

スペーサー

任意の空きスペースを作ることができます。

 

レイアウト要素を使いこなすとhtmlやcssを使わずともレスポンシブ対応が可能

過去のエディタではできなかったレイアウトの機能が実装されていて、誰でも簡単に見た目を整えることが出来るようになった上、それがレスポンシブで表示されるようにできています。これは投稿記事も凝ったものが作れるようになってきますね。
ワードプレスは次々に便利な機能を実装してきています。遅れないようについていきましょう!

 

 

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

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

The following two tabs change content below.
久保田 里美

久保田 里美

価値あるコンテンツ制作部インクループ株式会社
デザイナー。コンセプト設立からデザインを理論立てて起こすことをポリシーに、WEB媒体から紙媒体まで幅広く手掛けていきたいデザイナー。日々勉強日々精進。

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

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

AD

ページ上部へ戻る