WordPressバースブロックの使用方法

WordPress Verse Blockは、テキストをバーサライズされた形式で表示するように設計されています。 改行やスペースを変更せずにテキストを表示します。 Enterキーを押すと、新しい段落を開始する代わりに次の行が開始されます。 通常のコンテンツを対象としたものではありません。 代わりに、詩、歌詞、またはその他の種類の文学表現のために設計されています。

Verse Blockの使用方法を知っていると、コンテンツの外観を適切に設計するのに役立ちます。 この記事では、Verse Blockの設定とオプションを確認し、その使用方法のベストプラクティスを確認し、よくある質問を確認します。

投稿またはページに詩ブロックを追加する方法

Verseブロックをページと投稿に追加するには、コンテンツ内またはページの左上隅にあるブロックアイコンを選択し、ブロックの名前を入力して、表示されたら選択します。

次に、詩ブロックがコンテンツに追加され、詩や歌詞などの追加を開始できます。詩ブロックのデフォルトのスタイルは、使用しているテーマによって異なります。 これらの例では、Twenty Twenty-OneWordPressテーマを使用しています。

フィールドにテキストを入力してEnterキーを押すと、次の行に移動します。 これは、Enterキーを押すと新しい段落を追加する段落ブロックではなく、事前にフォーマットされたブロックのように機能します。

単語の間に追加した余分なスペースも保持します。 この例は、スペースと改行を含む公開された投稿を示しています。

詩ブロックの設定とオプション

詩ブロックには、設定とオプションのある2つの領域があります。 1つ目はVerseツールバーです。 2つ目は、右側のサイドバーにある[詩ブロック]オプションです。 両方を見てみましょう。

詩ブロックツールバー

詩ブロックの任意の場所をクリックすると、ツールバーが開きます。

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

最初の設定では、ブロックが段落ブロックに変更され、列数が変更され、グループ化できるようになります。 ホバーするとプレビューが表示されるので、どのように表示されるかがわかります。

ドラッグまたは移動

ドラッグツールには6つのドットが含まれています。 これらのドットをつかんで、ブロックを好きな場所にドラッグします。 または、矢印をクリックして、ブロックを上に移動したり、コンテンツ内のテキストを移動したりすることもできます。

テキストの配置

テキストの配置オプションには、左、中央、および右が含まれます。 これは、テキストがブロック内で整列されている場所に移動します。

太字と斜体

太字と斜体の設定は、オプションを選択したときに強調表示したテキストに適用されます。 この例で行ったように、それらを個別にまたは一緒に使用します。

リンク

リンク設定を使用すると、強調表示したテキストの部分のURLを検索または入力できます。

その他の設定

[その他の設定]リンクをクリックすると、多くのオプションを含むドロップダウンボックスが開きます。 彼らは、彼らが何のためにあるのかを視覚的に示すための簡単な例を提供しようとします。

インラインコード

これにより、テキストがコードとして表示されます。 この例では、1行目と3行目をコード形式に設定しました。

インライン画像

Inline Imageは、画像を選択できるメディアライブラリを開きます。 画像は、カーソルの位置にインラインで追加されます。 画像を選択すると、画像の幅を選択できるドロップダウンボックスが開きます。

キーボード入力

キーボード入力は、コンテンツにキーボードタグを追加します。 これはキーボード入力を定義し、ブラウザのデフォルトの等幅フォントで表示されます。

コードエディタでテキストを表示したときにテキストに追加されるタグは次のとおりです。

取り消し線

取り消し線は、強調表示したテキストに線を追加します。

添字

下付き文字は、強調表示したテキストを下付き文字としてフォーマットします。

上付き文字

上付き文字は、強調表示したテキストを上付き文字としてフォーマットします。

下付き文字と上付き文字を一緒に使用して、フォントのサイズを縮小し、水平方向に中央揃えにします。

テキストの色

テキストの色を使用すると、強調表示したテキストの色を調整できます。 いくつかの事前に選択された色から選択するか、カラーピッカーツールで色を選択するか、16進またはRBGコードとして値を入力できます。

詩ブロックオプション

詩ブロックオプションは次のとおりです。

その他の設定を非表示–これにより、右側のサイドバーが非表示になり、ワークスペースがすっきりします。

コピー–バースブロックをコピーして、エディターの任意の場所に貼り付けることができます。

Duplicate – Verse Blockの複製を作成し、元のブロックの下に配置します。

前に挿入–別のブロックを配置できる詩ブロックの前にスペースを追加します。

後に挿入– Verseブロックの後に、別のブロックを配置できるスペースを追加します。

移動先–矢印キーで上下に移動できる青い線を配置します。 青い線が詩ブロックを移動したい場所に到達したら、Enterキーを押すと、ブロックが自動的に移動します。

HTMLとして編集–すべてのコンテンツをHTMLとして編集できるコードエディタを開きます。

再利用可能なブロックに追加– Verseブロックを再利用可能なブロックのリストに追加して、任意のページまたは投稿で使用できるようにします。

グループ–ブロックをグループに追加して、ブロックを1つのユニットとして調整できるようにします。

ブロックの削除–ブロックを削除します。

詩のブロック設定

詩ブロックの設定は、右側のサイドバーに配置されます。 サイドバーが表示されている場合は、ブロックを選択すると設定が表示されます。 サイドバーが表示されていない場合は、歯車のアイコンをクリックして、コンテンツ領域でブロックを選択します。

タイポグラフィ

タイポグラフィでは、ドロップダウンボックスからブロック全体のフォントのサイズを選択するか、カスタムサイズを入力できます。

色

色を使用すると、詩ブロックのテキストと背景色を制御できます。 事前に選択された色から選択するか、カスタム色を選択します。 単色を選択するか、背景のグラデーションを作成します。 勾配を線形または放射状に設定します。 リンクの色を設定することもできます。

間隔

間隔を使用すると、バースブロックのすべての側面または特定の側面にスペースを追加できます。

高度

Advancedには、HTMLアンカーのオプションとCSSクラスを追加するためのフィールドが含まれています。 アンカーは、VerseBlock専用の特別なWebアドレスです。 これにより、このブロックに直接リンクできます。 CSSクラスフィールドを使用すると、カスタムCSSを作成してブロックのスタイルを設定できます。

Verseブロックを効果的に使用するためのヒントとベストプラクティス

これを使用して、Webサイトの標準テキストとは異なるテキストを表示します。 コンテンツにスペースを残したい場合にも最適です。

段落ブロックを使用して、詩または歌のタイトルを作成します。

Verse Blockのスタイルは、デフォルトでテーマに一致します。 ウェブサイトの他の部分とは一線を画すように、スタイルを変えてください。 スタイルを設定したら、再利用可能なブロックに追加して、再度使用できるようにします。

別の種類のブロックに変換するには、最初に段落ブロックに変換する必要があります。 次に、それを他のタイプのブロックに変換できます。

詩ブロックに関するよくある質問

詩ブロックの目的は何ですか？

複数行のテキストを表示するために使用されます。 詩や歌詞などに最適です。

詩ブロックと段落ブロックの違いは何ですか？

間隔を保持し、Enterキーを押すことでテキストを次の行に追加することを除いて、段落ブロックと同様に機能します。 段落ブロックでは、Enterキーを押したときにShiftキーを押したままにする必要があります。

詩以外にも使えますか？

はい。 詩や歌の歌詞には理想的ですが、詩の形式に分割したいあらゆる種類のテキストに使用できます。 たとえば、これを使用して、箇条書きや番号が付いていないリストを表示することもできます。

詩が欲しいならそれを使わなければなりませんか？

いいえ。Enterキーを押したときにShiftキーを押し続けると、段落ブロックに詩を追加できますが、詩ブロックは事前にフォーマットされているため、すばやく簡単に使用できます。 テキストを入力し、Enterキーを押して、次の行に入力し続けるだけです。

結論

これがWordPressVerseBlockの見方です。 これは、詩、歌詞、またはその他の種類のさまざまな文学を表示するための優れたブロックです。 また、スペースや改行を保持したいあらゆるタイプのテキストにも役立ちます。 使い方は簡単で、段落ブロックでは取得が難しい視覚的なセンスをコンテンツに与えることができます。 すべての詩的なコンテンツにこの特殊なWordPressブロックを使用することを強くお勧めします。

我々はあなたから聞きたい。 WordPress Verse Blockを使用していますか？ コメントであなたがそれについてどう思うか教えてください。

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