Gutenbergエディターを使いこなす：実践的なヒントと高度な機能 (03)

この記事では、WordPressのGutenbergエディタについて詳しく解説し、コンテンツ制作をさらに強化するための高度な機能や便利なヒントを紹介します。ブロックへのアンカーやカスタムスタイルの追加から、重要なブロックの種類の使い分けまで、これらの機能がより柔軟でプロフェッショナルなページレイアウトを実現するためにどのように役立つのか、順を追って説明します。より魅力的なブログ記事を作成したい方、UXやSEOのためにページを最適化したい方など、このガイドをぜひ参考にしてください。

 10、ブロックにアンカーを追加

アンカーポイントとは何ですか？アンカーとは、ハイパーリンクの一種であり、例えば特定のブログのエントリーにおいてフランスのスター、リサシェがホークス史上初の1巡目指名選手にこのサブタイトルのタイトルは、2QKI3OHKアンカーを追加し、もちろん、アンカーの名前は、あなたが私と同じである必要はありませんに独自のカスタムをインストールし、その後、https://xxx.com/博客主标题/#2QKI3OHK、サブタイトルの記事内容ではなく、ああ記事のメインタイトルを開きます！

ステップ：アンカーポイントを追加するブロックを ブロック>詳細設定>HTMLアンカー</block アンカー名を入力して保存します。(下図のように)

11, カスタムブロックCSSスタイル

ブロ ッ クのプリ セ ッ ト ス タ イ ルは、 私たちのニーズを完全に満た し ていない可能性があ り ますので、 DIY が好きなユーザーは、 CSS コ ー ド を使っ てス タ イ ルをカ ス タ マ イ ズす る 必要があ る か も し れません。ブロ ッ ク > 詳細設定 > 追加 CSS クラス」 で CSS 変数名を追加す る だけで、 ス タ イ ルを カ ス タ マ イ ズす る こ と がで き ます。(以下のように)

12、いくつかの重要なブロック（数種類）これが焦点です、区別することを忘れないでください。

コラム

カラム内のボックスはしばしば「カラム」と呼ばれ、このカラムに他のブロックを追加することで、レイアウトに多様性を持たせることができます。列ブ ロ ッ ク には、 列数 と 列幅に関す る い く つかのデフ ォ ル ト レ イ ア ウ ト オプシ ョ ンがあ り ます。た と えば下図の コ ン テ ン ツ エ リ アは、 幅 50% の 2 段組に、 画像ブ ロ ッ ク ・ テ キ ス ト ブ ロ ッ ク ・ ボ タ ン ブ ロ ッ ク を組み合わせて、 柔軟なページ レ イ ア ウ ト を実現 し てい ます。(下図)

もちろん、列の数を選択した後、手動で新しい列を追加することもできます。2つの列の間にマウスを移動し、表示される黒い「＋」記号をクリックするだけで、新しい列が追加されます。左側の構造リストから該当する列を選択しておくと、ピンポイントで目的のブロックを編集しやすくなります。単位はパーセンテージ（%）で調整することをお勧めします。例えば30と入力すると、カラムの幅はブラウザウィンドウの幅の30%となり、より直感的に設定できます。

あとは、必要なブロックを列に追加するだけです。とても直感的です。

列

行を挿入す る と 、 新規ブ ロ ッ ク はデフ ォ ル ト ではその行にグループ化 さ れます。行ブ ロ ッ ク は、 内容に応 じ て レ イ ア ウ ト を自動的に調整 し ます （た と えば段落ご と のテ キ ス ト の高 さ を自動的に揃え る 等）。

行ブロック」を選択すると、右側のパネルで向きを縦に変更することもでき、デフォルトのような重ねたレイアウトに戻ります。(下図のように)

ショートコード

プラグインによっては Gutenberg Block をサポートしていないものもありますが、ショートコードを提供しています。ショートコード（フォーマット：[XXXX]）をエディタに貼り付けると、編集ページで直接効果を確認することはできませんが、フロントエンドでプラグインのコンテンツスタイルが表示されるようになります。しかし、それを保持した後、フロントエンドに戻るか、表示するために新しいページを再度開くと、効果が必要であるかどうかを確認することができます！

特定のショートコードのプラグインが必要なページ、またはプラグインのドキュメントを確認してください！

目次

目次は長い記事にとって重要な要素であり、SEOだけでなくユーザーエクスペリエンスの向上にも役立ちますが、WordPressには目次ブロックが組み込まれておらず、ブロックパネルで「table of content」と検索することでおすすめのプラグインを見つけることが可能です。しかし、ブロックパネルで「table of content」と検索すれば、おすすめのプラグインを見つけることができるので、とても便利な機能です。これらのプラグインはGutenbergブロックに完全対応しているので、気に入った目次プラグインを選んで、他のブロックと同じように目次をページの適切な場所にドラッグすればOKです。

記事の設定

このセクションはすべて右側の「記事」タブで行います。

可視性と投稿時間の設定
記事は公開、非公開、パスワード保護に設定できます。

記事が更新されたら、SEOに有利なように公開時間も変更すべきです。

URLの設定(現在の記事へのリンク)

投稿/ページを保存または公開すると、「固定リンク」列に「URLエイリアス」フィールドが表示されます。このフィールドに表示したいURLを入力し、再保存または公開することができます。

URLをカスタマイズできるのは、投稿/ページが保存または公開された後であることに注意してください。新しく作成された投稿/ページは、保存または公開される前にカスタムURLを設定することはできません。

上の画像のように、記事IDは記事名でもあるので、リンク（url）は固定されているものを選びました。

分類と表示

あなたの実際の必要性に応じて良い記事の分類とラベリングを設定するには、フィルタリングするためだけでなく、SEOのために良い、次のように、記事に応じて

特集画像

これは第一印象のホームページに表示されるため、記事のテーマに準拠し、特性を強調するために、サイズ、明確かつ適切な画像を選択します！

抄録

ブログの一覧ページに表示される記事の内容の要約は、できるだけ簡潔で魅力的です。上の画像のように。

概要

この詳細なGutenbergチュートリアルで、これらの高度な機能と便利なヒントをマスターし、より柔軟にページやブログ記事を編集・最適化できるようになったことでしょう。Gutenbergエディタのパワーは、多様なレイアウトやデザインのニーズを簡単に実現できる柔軟性と拡張性にあります。WordPressで最もよく使われるライティング・デザインツールとして、これらのスキルをマスターすることで、コンテンツ制作の効率が大幅に向上します。次は、デフォルトテーマとGutenbergを組み合わせて、さらに優れたページレイアウトを実現する方法をご紹介しますので、お楽しみに！