Check!主婦の在宅ワーク求人多数!募集中の在宅・時短のお仕事情報を今すぐチェック!

【XWRITEの使い方】説明リストブロックの利用シーンを教えて!HTMLやCSS不要で作成できて使用用途が盛りだくさん!

このページのリンクには広告が含まれています。

「XWRITEの説明リストブロックが上手く使いこなせない・・・どんなときに使うの?」

そんなあなたへ、XWRITEユーザーのわたしがお答えします。

説明リストブロックは、用語や単語を説明するためのブロックです。

日常的な個人ブログや雑記ブログで、どのように使いこなせばよいのか?

迷う方も多いと思います。

Rumi

実は、わたしもそうでした。

いざ使ってみると、サイト全体がスッキリ!

テキストの量を減らすことができ、ひとめで内容が見やすくなります。

わたしの使用例をもとに、説明リストの利用シーンを紹介します。

Rumi

コードを使用せず、すべてテーマだけで解決します。

\当サイトで使用しているWordPressテーマ/

XWRITE(エックスライト)は、国内シェアNo.1エックスサーバーが開発したWordPressテーマです

XWRITEで作成!説明リストのスタイルは3パターン

説明リストのスタイルは、3パターンあります。

それぞれのスタイルと設定できる事項をまとめました。

Rumi

縦並び横並びと組み合わせると、さらにイメージが変わります。色の変更も可能です。

スタイル1

横並び

タイトル

説明文

タイトル

説明文

横幅の割合高さの最小値枠線の種類線の太さ丸み影の有無タイトルの装飾タイトルの配置説明文の配置
4~50%
(初期値:30%)
×××××あり/なし××

縦並び

タイトル

説明文

タイトル

説明文

横幅の割合高さの最小値枠線の種類線の太さ丸み影の有無タイトルの装飾タイトルの配置説明文の配置
××××××あり/なし××

Rumi

スタイル1は、シンプルなデザインです。

スタイル2

横並び

タイトル

説明文

タイトル

説明文

横幅の割合高さの最小値枠線の種類線の太さ丸み影の有無タイトルの装飾タイトルの配置説明文の配置
4~50%
(初期値:30%)
50~500px
(初期値:50px)
×1~5px
(初期値:1px)
××あり/なし左上/左中央/中央左上/左中央

縦並び

タイトル

説明文

タイトル

説明文

横幅の割合高さの最小値枠線の種類線の太さ丸み影の有無タイトルの装飾タイトルの配置説明文の配置
×××1~5px
(初期値:1px)
××あり/なし××

Rumi

スタイル2は、下線部入りのリストで、テキストの内容が見えやすくなります。

スタイル3

横並び

タイトル

説明文

タイトル

説明文

横幅の割合高さの最小値枠線の種類線の太さ丸み影の有無タイトルの装飾タイトルの配置説明文の配置
4~50%
(初期値:30%)
50~500px
(初期値:50px)
直線/なし1~5px
(初期値:1px)
0~20px
(初期値:0px)
あり/なしあり/なし左上/左中央/中央左上/左中央

縦並び

タイトル

説明文

タイトル

説明文

横幅の割合高さの最小値枠線の種類線の太さ丸み影の有無タイトルの装飾タイトルの配置説明文の配置
4~50%
(初期値:30%)
50~500px
(初期値:50px)
直線/なし1~5px
(初期値:1px)
0~20px
(初期値:0px)
あり/なしあり/なし左上/左中央/中央左上/左中央

Rumi

スタイル3は、見出しやボックスとセットになったスタイルで、リストの内容がより目立ちます。

XWRITEの説明リストの使い方の例

  • 用語を説明するとき
  • 手順や流れを手短に説明するとき
  • 比較をするとき
  • 概要を一覧でまとめたいとき

用語を説明するとき

※引用元:まごころ365(2024年3月20日の記事)

シンプルに、何か用語を説明したいときに使用します。

Rumi

用語集のようなイメージです。

上の画像は、宅配惣菜で使用される調味料の名称と調味料のメーカーさんの名前で説明リストを作成しています。

調味料の製造工程やストーリーもキーワードに入れながら、宅配惣菜で使用される調味料を説明しています。

手順や流れを手短に説明するとき

※引用元:まごころ365(2024年3月22日の記事)

上の画像は、フードデリバリーの配達の流れをまとめたものです。

用語とその意味を書き、数字を並べることで上から順序立てて説明しています。

Rumi

ざっくりと流れを伝えるときは説明リストブロック、具体的に説明したいときはステップブロックと、わたしは使い分けてます。

比較をするとき

※引用元:まごころ365(2024年3月27日の記事)

2つ以上の物や事柄を比較するときにも、説明リストは便利です。

2カラムにして並べることで、省スペースで比較しやすくなります。

わたしの場合、次のような比較を記事でよく取り入れます。

  • ○○のメリットと○○のデメリット
  • ○○が向いている人と○○が向いていない人
  • ○○がおススメの人と△△がおススメの人

Rumi

説明リストを作成の際に参考にしてください。

概要を一覧でまとめたいとき

※引用元:まごころ365(プライバシーポリシー)

記事の概要を一覧表示するときに説明リストを使うと、ひとめで分かりスッキリします。

画像は、サイトの概要をまとめていますが、会社概要店舗情報を書くときにも使用できます。

Rumi

テーブル(表)を作成するより短時間でカンタンです。

※引用元:まごころ365(運営者情報)

個人ブログを運営している方は、プロフィールを書くのにも、利用できます。

Rumi

プロフィールの補足情報を箇条書きでまとめてます。

説明リストの作成方法

説明リストブロックの作成方法をまとめます。

Rumi

XWRITEの公式サイトもご確認くださいね。

STEP1
ブロック挿入ツールから説明リストアイコンをクリック

記事投稿画面のブロック挿入ツールを選択。XWRITEブロックの中から「説明リスト」をクリックします。

STEP2
説明リストにタイトルと説明を入力

初期状態のブロックが挿入されます。

タイトル部分と説明部分にテキストを入力します。

Rumi

「+」の部分をクリックすると、リストの数を増やすことができます。

STEP3
設定パネルから説明リストの編集

親ブロックを選択し、設定パネルをクリック。

リストのデザインや配置、配色などをカスタマイズします。

サイトのカラーやイメージに合わせて、お好みで編集してみましょう。

Rumi

上の画像は、スタイル、配色、タイトルの配置をカスタマイズした例です。

リストを多く作ってしまい、数を減らしたいときは、以下の操作を行いましょう。

  • 親ブロック選択>ドキュメント概観>説明リスト(dl)>説明リスト要素>タイトルと説明文の削除(×)

Rumi

説明リスト要素の初期値は2つです。ひとつしかリスト要素を使わないときも同様の操作を行いましょう。

まとめ

XWRITEの説明リストブロックは、用語や単語をシンプルに説明するための便利なツールです。

日常的な個人ブログや雑記ブログでは、手順を説明したり、比較、概要の一覧表示にも活用できますよ。

当サイトは、料理をテーマにしています。

先ほどのカレーの材料のように、実際にレシピを書くときにも説明リストを使用しています。

お好みのスタイルにカスタマイズし、テキストを整理して、あなたのブログがパッと見やすくなります。

Rumi

文章が長くなりがちな時に説明リストで簡潔にまとめると便利!

XWRITEの説明リストブロックを使いこなして、より見やすく、より分かりやすいブログ記事を作ってみてくださいね。

こちらの記事もあわせて

シャトルシェフ とアイラップで輸入肉を柔らかくする低温調理法。臭い・硬い仕上がりをなくして高級ステーキ級のコスパ感。
シャトルシェフとアイラップで!たったの20分で煮物5品をまとめて袋調理。1週間分のお弁当にも使える作り置きおかず。
キットオイシックスの「クイック10」のミールキットは10分で2品完成できるのか?さばのみぞれ煮の調理時間を計ってみた
【Oisix】魚もおいしい?オイシックスのロングセラー「骨取りさば」シリーズの食べ比べと本音レビュー
【Oisix】キットオイシックスのフローズンミールキットはカット済み食材の献立セットで冷凍保存もできる!「包丁いらず!ハンバーグのピザ職人風」の作り方と実食レビュー
「Plant Oisix(プラントオイシックス)」のミールキットを非ヴィーガンがおためし!ネクストハラミの代替肉もあわせて

■ はじめてのブログに最適なWordPressテーマ『XWRITE(エックスライト)』がおすすめ! ■

『XWRITE(エックスライト)』は、
ブログ運営に役立つ機能を多数搭載し、誰でも簡単に使えるシンプルな操作性を実現。
軽量設計で高速表示。読み込みのストレスなくお使いいただけます。

\当サイトで使用しているテーマ/XWRITEのレビュー

当サイトは、エックスサーバーで運営されています
WordPressテーマ「XWRITE」を使用しています

URLをコピーしました!