WordPressのフォーマット済みブロックの使用方法

Preformatted Blockは、入力したとおりにテキストを表示します。 これは、テキスト内にスペースと改行を含めることができることを意味します。 書式設定済みブロックの使用方法を知っていると、テキストの一部を区別したり、目立つ要素を作成したりするなど、いくつかの利点があります。 幸い、このブロックにはいくつかのスタイリングオプションが含まれており、使いやすいです。

この記事では、WordPressのフォーマット済みブロックについて見ていきます。 投稿やページに追加する方法と、そのオプションと設定を確認します。 また、それを使用するためのいくつかのベストプラクティスと、最もよくある質問を確認します。

事前にフォーマットされたブロックを投稿またはページに追加する方法

ブロックインサーターツールをクリックして、フォーマット済みブロックをコンテンツに追加します。 これは左上隅とコンテンツ領域にあります。 書式設定済みを検索し、 Enterをクリックします。

/ preformattedと入力し、表示するコンテンツ領域でEnterキーを押して、ブロックを追加することもできます。 入力すると、入力した文字に基づいてWordPressが提案を表示するので、ブロックが表示されたらクリックするだけです。

これで、フォーマット済みブロックが投稿またはページに追加されます。 Preformatted Blockは、Paragraph Block、Verse Block、およびCodeBlockに似ています。 それはそれらの間の一種のクロスですが、それはまたそれらを単純化します。 入力したテキストが表示されますが、フォーマットを変更する代わりに、テキストが保持されます。 これには、すべてのスペースと改行が含まれます。 等幅フォントで表示されます。

事前にフォーマットされたブロック設定とオプション

ほとんどのWordPressブロックと同様に、このブロックには設定ツールバーとサイドバーのオプションが含まれています。 両方を詳しく見てみましょう。

書式設定済みのブロックツールバー設定

ツールバーはブロックの上にあり、ほとんどの標準ツールがあります。

ブロックタイプまたはスタイルの変更

このブロックは、段落、グループ、列、コードなど、他のいくつかのブロックに変換できます。 オプションを強調表示すると、コンテンツでどのように表示されるかをプレビューできます。

ドラッグアンドムーブ

ドラッグツールは6つのドットで示されています。 この領域をつかむと、コンテンツ内の任意の場所にブロックをドラッグアンドドロップできます。 上下の移動矢印は、矢印をクリックするたびに、コンテンツ内でブロックを1ブロック上下に移動します。

太字、斜体、リンク

太字、斜体、およびリンクの設定は、ボタンをクリックしたときに強調表示するテキストを制御します。 個別に使用することも、一緒に使用することもできます。 リンクポップアップの下部で有効にすると、新しいタブでリンクを開くことができます。

リンク付きのテキストには、クリック可能であることを示すために下線が引かれています。 エディタのテキストをクリックすると、リンクエディタが開き、リンクを変更できます。

より多くのオプション

[その他]ボタンには、オプションをクリックしたときに強調表示したテキストに適用されるいくつかの書式設定オプションが含まれています。 オプションは次のとおりです。

インラインコード–これにより、テキストがコードのように見え、ブロック内のコードが実行されなくなります。 Preformattedという単語は、上の画像のインラインコードです。

インライン画像–これにより、メディアライブラリの画像をマウスカーソルの位置に配置できます。

キーボード入力–これはキーボードのHTMLフォーマットでテキストのスタイルを設定します。 単語のテキストは、上の画像のキーボード入力スタイルでスタイル設定されています。

取り消し線–テキストに線を引きます。 上の画像のモノスペースという言葉には取り消し線があります。

添字-これは下のテキストを設定し、残りの部分よりも小さいです。 上の画像のyourという単語は下付き文字です。

上付き文字–これにより、他の文字よりも高く、小さく設定されます。 上の画像の単語行は上付き文字です。

テキストの色–上の画像の「分割」という単語で行ったように、これによりテキストの色を変更できます。

オプション

事前フォーマット済みブロックオプションには、次のものがあります。

[その他の設定を非表示] –右側のサイドバーを表示または非表示にします。

コピー–これにより、フォーマット済みブロックがコピーされるため、コンテンツ内の別の場所に貼り付けることができます。

複製–これにより、フォーマット済みブロックの複製が元のブロックの下に配置されます。

前に挿入–これにより、別のブロック用にブロックの上にスペースが追加されます。

後に挿入–これにより、ブロックの下に別のブロック用のスペースが追加されます。

移動先–これにより、矢印で上下に移動できる青い線が配置され、選択した場所にブロックが移動します。

HTMLとして編集–これにより、コードエディターが開き、コンテンツをHTMLとして編集できます。

再利用可能なブロックに追加–これにより、事前にフォーマットされたブロックが再利用可能なブロックに追加されます。

グループ–これにより、ブロックがグループに追加されるため、単一のブロックとして調整できます。

ブロックの削除–これによりブロックが削除されます。

事前にフォーマットされたブロック設定

事前フォーマット済みブロックの設定は、右側のサイドバーにあります。 表示されていない場合は、右上隅にある歯車をクリックします。 ブロック内の任意の場所をクリックして、サイドバーのオプションを表示します。

タイポグラフィ

タイポグラフィでは、ブロック全体のフォントサイズを選択できます。 ドロップダウンボックスからサイズを選択するか、カスタムサイズを入力します。 [リセット]をクリックして、デフォルト設定に戻します。

色

[色]オプションを使用すると、テキストと背景色のスタイルを設定できます。 背景は単色またはグラデーションにすることができます。 事前に選択されたいくつかの色から選択するか、カスタム色を選択できます。 色の組み合わせが読みにくい場合は、右下にメッセージが表示されます。 この例では、背景をオレンジに、テキストを白に設定しました。 読みにくいかもしれないことを示しています。

グラデーションの背景は、線形または放射状に設定できます。 カラーピッカーで2つの色を選択するか、RGBまたはHSLコードとして色を入力します。 色には不透明度を含めることができます。 線形の場合、上記の例で行ったように、角度を設定できます。 私が行ったように、それらを近づけてそれらの間に鋭い線を作成するか、さらに離してそれらがどのようにブレンドするかを制御します。

高度

詳細設定にはHTMLアンカーのオプションが含まれているため、フォーマット済みブロックに直接リンクできます。 また、CSSクラスを追加するためのフィールドも含まれているため、カスタムCSSを使用してブロックのスタイルを設定できます。

事前にフォーマットされたブロックを効果的に使用するためのヒントとベストプラクティス

コンテンツ内にスペースや行分割を追加するときはいつでも、このブロックを使用してください。 段落ブロックはそのフォーマットを保持しません。

テキストと背景に色を使用して、他のコンテンツと区別します。 これにより、コードブロックと同じように見えなくなります。どちらもモノスペースタイプを使用しているため、これは重要な場合があります。

これを使用して、テキストを強調します。 スペースと行分割を保持できるため、テキストの一部を他の部分と区別するために使用できます。

間隔と分割をフォントと背景のオプションとともに使用して、コンテンツを区切る一意のタイトルを作成します。

書式設定済みブロックに関するよくある質問

事前フォーマットされたブロックの目的は何ですか？

フォントサイズ、色、背景を変更したり、リンクを追加したりしながら、改行とスペースを含むテキストを表示します。

詩ブロックとどう違うのですか？

詩ブロックはもう少し複雑です。 配置オプションが含まれており、テキストを等幅で表示しません。 また、間隔に関するいくつかの機能が含まれており、リンクの色オプションが追加されています。

コードブロックとどう違うのですか？

背景のスタイリングオプションが含まれています。 コードブロックには、[その他のオプション]に[フォントの色]オプションがあり、サイドバーに[フォントの色]オプションがありますが、サイドバーのオプションにフォントと色は含まれていません。

段落ブロックとどう違うのですか？

段落ブロックは改行を保持しません。 書式設定済みブロックで、 Enterをクリックしてテキストに新しい行を追加できます。 段落ブロックの場合、これにより、新しいブロックを追加するためのフィールドに移動します。 段落ブロックには、さらに多くのテキスト設定も含まれています。

何に使えますか？

間隔と行の分割により、他のコンテンツとは一線を画すテキストが表示されます。 フォントと背景色は、サービス、見積もり（ただし、見積もりブロックとプル見積もりブロックの方が適しています）、証言、召喚状などのカードを作成できます。

結論

これがWordPressPreformattedBlockの見方です。 このブロックは、間隔と線の分割を保持することにより、いくつかの興味深いデザイン機能を提供します。 コードブロックとは異なり、背景色ツールには引き続きアクセスできます。 このブロックは、テキストを目立たせるのに適しています。また、サービスを表示して何かに注意を引くためのデザイン要素を作成するためにも使用できます。

我々はあなたから聞きたい。 フォーマット済みブロックを使用していますか？ コメントであなたの経験について教えてください。

MicroOne / shutterstock.com経由の注目の画像