Pixpa テキストエディタの使い方

PixpaのWYSIWYG（見たまま編集）エディターは、ウェブサイトのページ、ブログ、その他のセクションにコンテンツを追加・フォーマットするための強力かつ直感的なインターフェースを提供します。最新のアップデートにより、エディターは大幅に強化され、新しいコンテンツ要素、AI搭載のライティングツール、レイアウトオプションの改善、インタラクティブなフォーマットコントロールなどが追加されました。

このガイドでは、エディターのインターフェース、その機能の使い方、そしてウェブサイトのコンテンツを最適化する方法について説明します。

ここで扱われる内容：

プラス（+）ボタン
AIツール
書式 – フォントスタイルの変更
太字 / 斜体
ライン – ラインを追加
その他の書式設定オプション
アラインメント
テキストの色
リスト – 箇条書き / 番号付き
リンク – リンクを追加
画像 – 画像を追加
絵文字
表 – 表を追加する
目次を挿入
アンカー
HTML コードビュー
セクション固有のオプション

Pixpa テキストエディタで作業する場合は、 ENTER （ウィンドウ）または RETURN (mac) 新しい段落を作成するには、新しい段落を強制せずに新しい行を挿入するには、 SHIFT キーを押してから、Enter または Return を押します。

エディターのほとんどの機能は、ボタン／アイコンをクリックした瞬間に有効になります。ただし、アイコンをクリックすると、追加オプションを含む小さなドロップダウンメニューが表示される場合もあります。

テキストにスタイルを追加するときは、エディターオプションをクリックして入力を開始し、選択した結果を取得するか、テキストを入力して強調表示してからエディターオプションをクリックして、選択したテキストに追加します。

「+」ボタンを使用して要素を追加する

新しいエディターにおける最大の改良点の1つは、「+」ボタンです。このボタンをクリックすると、テキストエリアに挿入できるさまざまなコンテンツ要素を含むメニューが開きます。

「+」ボタンの下で利用可能な要素:

AI ツール: AI を活用したライティング支援を活用して、コンテンツのアイデアを生成したり、テキストを書き直したり、コンテンツをすばやく作成したりできます。さらに詳しく.
テキスト： 標準の段落テキストを追加します。
見出し： 異なる見出しレベルを挿入する（H1、H2、H3など) を使用すると、コンテンツの階層構造が改善されます。
イメージ： 画像をアップロードしてテキストに直接挿入します。
- 画像をアップロードしたり、URL を入力して画像を挿入したりできます。
To Doリスト： 創造する チェックリスト インタラクティブなチェックボックス付き。
リスト： 追加 箇条書き or 番号付きリスト 構造化されたコンテンツ用。
埋め込む: 外部コンテンツを挿入する ビデオ、マップ、オーディオファイル、iframe.
表：構造化データ表現用のテーブルを追加します。テーブルオプションの下に、次の追加オプションがあります。
- 頭を追加 – テーブルの上部にヘッダー行を挿入します。これは列のタイトルとして使用できます。
- 前に列を追加 – 選択した列の左側に新しい列を追加します。
- 列を追加 – 選択した列の右側に新しい列を追加します。
- 下に行を追加 – 選択した行の下に新しい行を挿入します。
- 上に行を追加 – 選択した行の上に新しい行を挿入します。
- 頭を外す – テーブルからヘッダー行を削除します。
- 列を削除 – 選択した列を削除します。
- 行を削除 – 選択した行を削除します。
- テーブルを削除 – エディターからテーブル全体を削除します。
見積もり： テキストをハイライト表示 ブロック引用 強調するため。これにより、左側に縦線が付いた明確なテキストブロックが作成され、残りのコンテンツから視覚的に分離され、引用テキストが強調表示されます。
コードスニペット： 挿入とフォーマット HTML、CSS、JavaScript、その他のプログラミング言語 コンテンツ内。
ライン： 加える 水平区切り線 コンテンツセクションを分離します。
レイアウト：レイアウトオプションを使用すると、コンテンツを複数のセクションにまたがる水平ブロックに整理できます。これにより、ウェブページ上で柔軟な構造化と視覚的な階層構造の改善が可能になります。主な機能は以下のとおりです。
- 複数列レイアウト: コンテンツをさまざまな方法で配置するには、1 列、2 列、3 列、または 4 列から選択します。
- カスタム分割比率: 60/40 や 40/60 などの定義済み比率を選択して、各セクションの幅を制御します。
- ネストされたブロック: ブロックを選択し、その中に複数の個別のブロックを作成して整理することができます。
ラッパー: 複数の要素をグループ化して整理します。
目次を挿入: ドキュメントの見出しに基づいて目次を作成し、ナビゲーションを容易にします。ブログ、チュートリアル、長い記事などに役立ち、読者がセクションにすばやく移動できるようになります。

このモジュール式のアプローチにより、レイアウトのカスタマイズやさまざまなコンテンツ要素の追加が効率的に行えます。

AIツール

Pixpa テキストエディターの AI ツール機能を使用すると、AI を活用した支援でコンテンツを強化できます。利用可能なオプションは次のとおりです。

言い換えると – 元の意味をそのままに、選択したテキストを変更します。これにより、読みやすさが向上したり、文章を言い換えてわかりやすくしたりできます。
短縮 – 重要な情報を保持しながら、選択したテキストを圧縮して簡潔にします。
長くする – 関連する詳細を追加して選択したテキストを拡張し、より説明的で有益なものにします。
簡略化する – 元の意図を維持しながら、より簡単な言葉を使用してテキストを書き直し、理解しやすくします。
正しい文法 – 選択したテキストの文法エラーを自動的にチェックして修正し、テキストの正確性と読みやすさを向上させます。
翻訳します – 選択したテキストを別の言語に翻訳し、多言語コンテンツを簡単に作成できます。

これらの AI を活用した機能は、コンテンツ作成を合理化し、より迅速かつ効率的に行うのに役立ちます。

フォーマット – フォントスタイルを変更します

ウェブサイトでは、デザインセクションで指定する複数のフォントスタイルを同時に使用できます。これはウェブサイト全体で使用されている一般的なデザインスタイルです。

すべてのフォントスタイルはデザインセクションで指定できます。また、 [テキスト]ボタンをクリックするとドロップダウンメニューの一番下にある[フォントの管理]をクリックすることもできます。これで、以下のフォントを表示および設定し、フォントスタイル、サイズ、色、太さ、行の高さ、文字間隔を編集できます。

1見出し
2見出し
3見出し
4見出し
段落テキスト（小と大）
見出し 1 特大

見出し 1 スタイルのスクリーンショットを次に示します。他の見出し段落フォントもここで編集できます。

デザインセクションでフォントスタイルを指定すると、Web サイト全体で効率的に使用できます。テキストを選択して書式を適用するだけです。システムは、その特定のスタイルのフォントの色、サイズ、太さを、選択したテキストに自動的に適用します。 Webサイトでも同じようにレビューできます。

お願い

フォントのスタイル、太さ、色はウェブサイトでのみ表示され、スタジオでは表示されません。

太字/斜体

太字 – これをクリックすると、強調表示されたテキストが太字になります。 HTML では、これはタグを使用します。
イタリック – これをクリックすると、強調表示されたテキストが斜体になります。 HTML では、これは

ライン – ラインを追加

エディターでは水平線を追加できます。このアイコンをクリックすると、カーソルが置かれている場所に線が追加されます。

その他の書式設定オプション

Pixpa テキストエディターの [その他の書式設定] メニューには、コンテンツの外観と構造を強化するための追加のテキストスタイル設定オプションが用意されています。各オプションの機能は次のとおりです。

CPコード – 選択したテキストをインラインコードまたはコードスニペットとしてフォーマットします。これは、プログラミングや技術コンテンツを表示する場合に便利です。
下線 – 強調するために、選択したテキストに下線を追加します。
アンカー – 選択したテキストに名前付きアンカーを追加し、同じページ上の特定のセクションに直接ジャンプする内部リンクを作成できるようにします。目次やページ内ナビゲーションの作成に役立ちます。
上付き文字 – 選択したテキストを通常のテキストベースラインより少し上に表示します (例: X²)。数式や脚注によく使用されます。
添字 – 選択したテキストを通常のテキストのベースラインより少し下に表示します (例: H₂O)。化学式やその他の特殊な表記に便利です。
特徴 – 選択したテキストを背景色で強調表示し、重要なコンテンツに注意を引きます。
削除された – 選択したテキストに取り消し線を引いて、削除または修正を示します。
すべてのスタイルをクリア – 選択したテキストに適用されているすべての書式を削除し、デフォルトのスタイルに戻します。

アラインメント

テキストを左、右、中央、両端揃えに揃えることができます。テキストを選択し、ドロップダウンから配置を選択します。

テキストの色

デフォルトでは、システムはデザインセクションで指定されたフォントカラーを適用します。ただし、このツールを使用してグローバルカラーを上書きすることもできます。テキストを選択し、カラーアイコンをクリックすると、標準のカラーパレットが表示され、そこから選択できます。

これとは別に、ここから選択したテキストの背景色を指定することもできます。

注：カラーパレットにないカスタムカラーは、「色の設定」オプションで色の16進数コードを入力することで指定できます。

箇条書きリスト – 強調表示されたテキストは、箇条書きのように書式設定されます。 HTML では、これは一連のとタグ。
番号付きリスト – 強調表示されたテキストは、番号付きリストのように書式設定されます。 HTML では、これは一連のとタグ。

リンク – テキストにリンクを追加します

エディターを使用すると、任意のテキストへのリンクを挿入できます。既存の Web サイトページまたは他の Web サイト/ブログ/PDF などを接続できます。

テキストを強調表示してこのボタンをクリックすると小さなモーダルウィンドウが開き、リンク先 URL を入力したり、新しいウィンドウで開くかどうかを選択したり、自分のサイトの別のページにリンクすることを選択したりできます。 HTML では、使用されるタグはリンクテキストです。

ご注意ください

Pixpa サイト外の外部 Web サイトにリンクするには、次のように入力します。 http://たとえば、その後に Web アドレスが続きます。 http://www.example.com.
サイト内のギャラリー、ストアカテゴリ、またはページにリンクするには、URL スラッグを入力します。たとえば、 /gallery
電子メールデスクトップクライアントを開くリンクを作成するには、次のように入力します。 mailto: 後に電子メールアドレスを入力します。たとえば、 mailto:example@example.com.
電話をかけるリンクを作成するには、次のように入力します。 tel:、その後に国コード付きの電話番号が続きます。たとえば、 tel:+0-123-456-7890
Whatsapp を開くリンクを作成するには、次のように入力します。 https://wa.me/<number> どこ <number> は、国際形式の完全な電話番号です。電話番号を国際形式で追加する場合は、ゼロ、括弧、またはダッシュを省略します。例: https://wa.me/15551234567 を取得する必要がある者 https://wa.me/+001-(555)1234567. もっと知る.
ファイルセクションにアップロードされた PDF またはその他のファイルにリンクするには、コピーしたリンクをここに入力します。もっと知る.
こちらをクリックしてください Pixpa リンクビルダーについて詳しくは、こちらをご覧ください。

画像 – 画像を追加

Pixpa テキストエディターの [画像の追加] オプションを使用すると、コンテンツに画像を簡単に追加できます。デバイスから画像をアップロードする場合でも、URL 経由で挿入する場合でも、この機能を使用すると、投稿を視覚的に強化するシームレスな方法が提供されます。

URL 経由で画像を挿入 – 画像の URL を貼り付けて「挿入」ボタンをクリックすると、ページに直接追加できます。
デバイスから画像をアップロード – 指定されたアップロードボックスに画像をドラッグアンドドロップするか、ボックス内をクリックしてデバイスから画像を選択できます。

絵文字

Pixpa テキストエディターの絵文字オプションを使用すると、さまざまな絵文字を使用してコンテンツを強化できます。絵文字を使用すると、コンテンツの表現力を高めたり、強調したり、楽しく創造的な方法で感情を伝えたりすることができます。

表

表オプションを使用すると、テキストエディターに表を直接挿入できます。追加したら、複数の書式設定オプションを使用して表の構造と内容をカスタマイズできます。

表編集オプション:

ヘッドを追加 – テーブルの上部にヘッダー行を追加して、列のタイトルを強調表示します。
前に列を追加 – 選択した列の左側に新しい列を挿入します。
列を後に追加 – 選択した列の右側に新しい列を挿入します。
下に行を追加 – 選択した行の下に新しい行を挿入します。
上に行を追加 – 選択した行の上に新しい行を挿入します。
ヘッドを削除 – テーブルヘッダーが追加されている場合はそれを削除します。
列を削除 – 選択した列をテーブルから削除します。
行を削除 – 選択した行をテーブルから削除します。
テーブルを削除する – エディターからテーブルを完全に削除します。

目次を挿入

ドキュメントの見出しに基づいて目次を作成し、ナビゲーションを容易にします。ブログ、チュートリアル、長い記事などに役立ち、読者がセクションにすばやく移動できるようになります。

アンカー

アンカーツールを使用すると、投稿のセクションまたは段落に固有のHTML IDを追加できます。これは、内部ページリンク（ジャンプリンク）を作成するのに便利で、訪問者がリンクをクリックするとページの特定の部分に直接移動できるようになります。

それの使い方：

アンカーする段落またはセクション内の任意の場所をクリックします。
ツールバーから、 アンカーアイコン。
ポップアップが表示されます。 "アンカー".
「IDを追加または変更」 フィールドに一意のIDを入力します（例： paragraph-2).
詳しくはこちら Save.

重要事項：

IDは 小文字、含む スペースなし、そして ハイフン 必要に応じて。
設定したら、このアンカーにリンクすることができます。 #your-id URL の末尾に .
- 例： https://yourwebsite.com/page#paragraph-2

この機能は長い投稿や目次のある記事に最適で、読者が特定のセクションに素早く移動できるようになります。

HTML コードビュー

エディタウィンドウは、ビジュアルエディタ (WYSIWYG) または HTML エディタとして機能できます。

ただし、クリックして HTML エディターに切り替えることができます。方法を知っていれば、コードビューから何でも変更できます。また、助けが必要な場合は、Pixpa サポートチームに連絡することもできます。

ヒント： HTMLコードビューを使用すると、ブログ記事にあらゆる種類の埋め込みコードを追加できます。

セクション固有のオプション

テキストエディターに追加された各セクションには、追加のカスタマイズオプションが付属しており、外観と機能を変更できます。これらの設定にアクセスするには、セクションの横にある 2 本の水平線をクリックします。これにより、さまざまなコントロールを含むドロップダウンメニューが開きます。

追加 – 現在のコンテンツブロックの下に新しいコンテンツブロックを挿入して、テキスト、画像、その他の要素をすばやく追加します。
フォーマット – 段落、見出し、引用などのさまざまなテキストブロックスタイルを切り替えることができます。

アンカー – ブロックにアンカー ID を追加して、このセクションに直接ジャンプするページ内リンクを作成できるようにします。
上へ移動 / 下へ移動 – コンテンツ内のセクションの位置を上下に移動して並べ替えます。
色圏 – 選択したブロックのテキストの色を変更します。
背景色 – 強調やコントラストのために、ブロック内のテキストの背後に背景色を設定します。
ボーダー – セクションの周囲に境界線を追加または変更して、コンテンツをより効果的に構造化します。

間隔 – ブロックの上部、下部、側面など、ブロックの周囲の余白を調整し、間隔とレイアウトをより正確に制御できます。

重複ファイル – セクションを複製して、コンテンツのさまざまな部分にわたって書式と構造の一貫性を維持します。
削除 – セクションが不要になった場合は、完全に削除します。

これらの設定により、コンテンツの構造を完全に制御し、整理された視覚的に魅力的なレイアウトを実現できます。