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

XWRITEのふき出しブロックの機能と使い方をくわしく教えるよ【XWRITEの使い方】

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

XWRITEのふき出し機能はどうやって使うの?デザインはどんなものなの?

という記事でご紹介します。

お困りママ

XWRITEのふき出し機能は使いやすいのかしら?

使い心地を知りたいわ。

Rumi

XWRITEのふき出しの設定はとてもカンタン!

XWRITEとは、エックスサーバーが開発!

初心者もカンタンにブログが書けるコンセプトのWordPressのテーマです。

XWRITEには、キャラクターが会話しているように表示をする「ふき出し機能」があります。

Rumi

ふき出しを使うことで、記事に注意を引く効果や読みやすさを高める効果がありますよ。

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

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

XWRITEのふき出し機能のメリット

XWRITEのふき出し機能のメリットはこちら。

  • ブロックエディッターでカンタンに挿入できる
  • カスタマイズ性が高い

ブロックエディターでカンタンに挿入できる

XWRITEのふき出し機能は、ブロックエディッターの中のXWRITE専用ブロックから、カンタンに挿入ができます。

「ふき出し」ブロックが追加されるので、設定を変えるだけでお好きなカスタマイズができます。

Rumi

コードの入力は一切ありません。スタンプをペタペタ押してる感覚で作れて、配置の入れ替えも自由です。

カスタマイズ性が高い

XWRITEは、ふき出しの色、形、アイコン画像などを自由に設定できます。

共通パーツを使えば、お気に入りのカスタマイズを保存して、記憶しておくことも可能。

記事を編集するときに、再び呼び出すことができます。

Rumi

ふき出しのカスタマイズ例について、次に教えるよ。

XWRITEのふき出し機能のデザイン一覧と使用例

XWRITEには、ふき出しの色や形のバリエーションが用意されています。以下に一覧を示します。

ふきだしの設定

左の人です。四角い枠の矢印のふき出しだよ。

右の人でーす。心の声でしゃべって、枠を丸くしているよ。

ふき出しは、ブロックを選択した後、このように設定できます。

  • ふき出し配置:左右どちらかに設定
  • ふき出し形状 :「矢印」「心の声」か選択
  • ふき出しの枠線:表示非表示から選択
  • 丸み:枠の丸みを15段階で設定

テキスト色はこれだよ。

色選択の名称とカラーの例
  • アクセントカラー:アイコンとふき出しのフチに使われる色(例:#cf2e2e)
  • 背景色:ふき出しの背景に使われる色(例:#fbbfb5)
  • テキスト色:ふき出しのテキストに使われる色(例:#333333)

Rumi

アクセントカラー、背景色、テキスト色、カスタマイザーから細かく設定することができます。

あらかじめテーマカラーとして、29色のカラーパレットが用意されています。

枠線を付けないときは、

  • ふき出し設定→ふき出しの枠線【なし】

アイコン設定

Rumi

丸いアイコンのRumiだよ。アイコンに枠線なしです。

Rumi

四角いアイコンのRumiだよ。アイコンに枠線がありまーす。

アイコンなしもアリだね。わたしはだーれだ?

アイコンの設定は、枠線や形状、表示の有無など、細かく設定できます。

  • 非表示にする:アイコンの表示・非表示を設定
  • アイコンの枠線:アイコンの枠の表示・非表示の設定
  • アイコン形状:アイコンの形状を「サークル」「四角」から選択
  • アイコン画像URL:お好きなアイコンの画像URLを入力すると表示

Rumi

アイコンの下にカーソルを合わせクリックすると、名前を入力することができます。

ブロックの下の余白

ふき出しブロックとふき出しブロックの間の余白を自由に設定できます。

Rumi

四角いRumiさん、なんだか間隔が空いているけど、どこにいますか?

Rumi

丸いRumiさん、わたしはここです。余白を空けると、文章の続きが気になるよね。

パソコンとモバイルでサイトを閲覧した場合、ふき出しとふき出しの間隔を調整できます。

  • ブロック>ブロックの下の余白

Rumi

-10em~10emまで余白を設定することができます。

XWRITEのふき出しの作成方法

STEP1
「ふき出し」アイコンをクリックする

記事投稿画面のブロック挿入ツールから「ふき出し」のアイコンをクリック!

アイコンをクリックすると、上のようなブロックが挿入されます。

Rumi

上のふき出しブロックが初期状態です。

初期のアイコンは、グレーのヒト型になっています。

STEP2
アイコンに画像を入れる

ふき出しブロックのヒト型のアイコン部分をクリック!

すると、メディアの画面に移動します。アイコンに使う画像を選びます。

Rumi

アイコンに使う画像をあらかじめメディアにアップロードしておきましょう。

STEP3
テキストを入力する

ふき出しの中をクリックして、テキストを入力します。

アイコン下の「名前を入力」をクリックすると、アイコンに名前を付けられます。

Rumi

ふき出しの中は、テキストのを変えたり太字にしたり、リンクを挿入するなど、自由に編集できます。

STEP4
ふき出しを設定する

ブロックを選ぶと、記事投稿画面に設定パネルが表示されます。

Rumi

先ほどご紹介した設定を行うことができます。

STEP5
共通パーツに保存すると便利!

設定したふき出しを繰り返し使いたいときは、共通パーツに登録して、保存しておきましょう。

よく使うブロックやフレーズなどを記憶して、使いたいときに呼び出すことができます。

Rumi

記事を書いている途中に、共通パーツを作成したいときは、ブロックをコピペして共通パーツの作成画面に移動させておきましょう。

その際は、作成途中の記事の保存を忘れずに。

まとめ

XWRITEのふき出しブロックの機能についてご紹介しました。

ふき出しを作る操作は、とてもカンタンで、マウスひとつで感覚的に作ることができます。

分からなくなったら、マニュアルを読み返す流れで、十分理解できますよ。

XWRITEのマニュアルのふき出しの作成方法も読んでおきましょう。

Rumi

ふき出しブロックは、共通パーツの保存がおススメ!

共通パーツを使えば、パターンに自動登録されるため、イチから設定をせずに、すぐにふき出しを呼び出せます。

XWRITEのふき出しブロックを、あなたのブログに取り入れてみてくださいね。

あわせて読みたい

WordPressテーマは有料のほうがいい?買い切り型を選ぶ時の注意点と無料テーマを使いたいときの対策
プラグインや追加CSSを使わない!ブログカードのデザインまとめ!ボックスと組わせた小技も【XWRITEの使い方】
エックスサーバーのWord Pressテーマ「XWRITE(エックスライト)」の使用レビュー!初めてのブログ開設の有料テーマ選びに失敗したくないならこれ!
XWRITE(エックスライト)のデザインスキンは3種類!ソリッド・マイルド・シンプルのどれがいい?スキンの着せ替えの設定・保存と復元の方法
【XWRITEの使い方】説明リストブロックの利用シーンを教えて!HTMLやCSS不要で作成できて使用用途が盛りだくさん!
「XWRITE(エックスライト)」のWordPressテーマの購入プランは買い切りとサブスクどっちがお得?メリットとデメリットを比較!

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

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

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

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

URLをコピーしました!