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

コンテンツを編集するときは、テキスト/WYSIWYG エディター (見たままのものが得られる) の使用方法を習得することが重要です。 このテキスト エディターを使用すると、HTML の知識がなくても、Web ページ (連絡先フォーム、カレンダー、ゲストブック)、ブログ投稿、およびカバー バナーのコンテンツを編集、変更、および追加できます。

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

エディターの機能のほとんどは、 ボタン/アイコンをクリックします. それ以外の場合は、アイコンをクリックすると、追加のオプションを含む小さなドロップダウン メニューが表示されます。

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


説明するオプションは次のとおりです。 

  1. フォーマット – フォント スタイルを変更します
  2. 整列 - テキストの整列
  3. 太字 / 斜体 / 取り消し線 /​​ 下線
  4. リスト – 順序付き / 順序なし
  5. 画像 – 画像を追加
  6. ビデオ – ビデオを追加
  7. テーブル – テーブルを追加します
  8. リンク – テキストにリンクを追加します
  9. テキストの色 – テキストの色を変更します
  10. クリップ – CTA ボタンを追加する
  11. ウィジェット – カスタム コードを追加する
  12. ライン – ラインを追加
  13. 全画面モード
  14. HTML コード ビュー

1. フォーマット – フォント スタイルを変更する

あなたが使用することができます XNUMXつの異なるタイプ あなたのウェブサイトのフォントスタイルの(一度に) デザインセクション. これは、Web サイト全体で使用される一般的なデザイン スタイルです。



すべてのフォント スタイルは、 設計課。 クリックすることもできます フォントの管理をクリックすると、ドロップダウンの最後のオプションになります。 テキスト ボタン。 次のフォントを表示および設定し、フォント スタイル、サイズ、色、太さ、行の高さ、および文字間隔を編集できるようになりました。

  • 1見出し
  • 2見出し
  • 3見出し
  • 4見出し
  • 段落テキスト (通常、小、大)

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


注: 「コード」と「引用」にはデフォルトのスタイルがあります。

  • Code: これは、コンピューター コードの一部を定義するために使用されます。 内部のコンテンツは、ブラウザーの既定のモノスペース フォントで表示されます。
  • 見積もり: これは H3 に blockquote タグを付けたものと同じです。


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

Note: フォント スタイル、太さ、および色は Web サイトでのみ表示され、スタジオでは表示されません。


2. 整列 – テキストの整列

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


3.太字/斜体/取り消し線/下線

  • ピン – これをクリックすると、強調表示されたテキストが太字になります。 HTML では、これはタグを使用します。
  • イタリック – これをクリックすると、強調表示されたテキストが斜体になります。 HTML では、これは
  • 取り消し線 – 強調表示されたテキストは、これをクリックすると削除済みとしてマークされます。 HTML では、これは鬼ごっこ。
  • 下線 – これをクリックすると、強調表示されたテキストに下線が引かれます。 HTML では、これはタグを使用します。

4. リスト – 順序付き / 順序なし

テキストをインデント付きのリストに簡単に変換して整理できます。

  • 順不同リスト – 強調表示されたテキストは、箇条書きのように書式設定されます。 HTML では、これは一連のとタグ。
  • 順序付きリスト – 強調表示されたテキストは、番号付きリストのように書式設定されます。 HTML では、これは一連のとタグ。
  • インデント – ハイライトされたテキスト領域はインデントされません。
  • インデント – 強調表示されたテキスト領域がインデントされます。


5. 画像 – 画像を追加する

あなたが追加することができます 複数の画像 それをクリックすることによって。 このボタンをクリックすると、システムから画像をドラッグまたは選択できる小さなモーダル ウィンドウが開きます。 HTML では、使用されるタグは.

また、ワイルドカード*を使用すると、任意の文字にマッチし、XNUMXつのコマンドで複数のファイルを削除することができます。 画像のサイズを変更する その特定の画像の右下の青いアイコンからドラッグ アンド ドロップします。


エディターを使用すると、 画像のタイトル、キャプション、アップロードされた画像へのリンク. 任意の画像をクリックすると、次のオプションが表示されます 編集 (1) 削除 (2)と リサイズ とします。


をクリックした後 編集をクリックすると、次の項目を指定できるポップアップ ウィンドウが表示されます。

  1. 役職 – これは altタグ その特定のイメージの。
  2. キャプション – ライブ サイトで画像とともにキャプションを表示します。
  3. 役職 – 画像の配置を選択します (左、中央、右、またはなし)。
  4. リンク – 画像へのリンクを追加します。
  5. 新しいタブで開く – 画像リンクを新しいタブで開きたい場合は、このチェックボックスにチェックを入れます。
  6. Save – 変更を保存します
  7. 削除 – 画像を削除する
  8. サムネイル自体に新しい画像をドロップして、画像を置き換えます。

ブログ記事のテキスト エディター画像の理想的な画像サイズは、幅 1500px x 高さは任意です。 これは、すべてのブログ レイアウトの推奨サイズです。 サポートされている Web サイトの画像ファイル形式は次のとおりです。 JPG、JPEG、PNG、GIF. より大きなサイズの画像をアップロードすると、 小型化します それらを 1500 ピクセル幅にします。 


6. 動画 – 動画を追加する

YouTube/Vimeo ビデオをここに追加できます。 このボタンをクリックすると小さなモーダル ウィンドウが開き、Youtube/Vimeo ビデオの URL または埋め込みコードを入力できます。

ヒント: YouTube の URL をテキスト エディターに直接配置することもできます。 システムはビデオのスクリーンショットを自動的に取得します。  


7. 表 – 表を追加する

テーブル アイコン (7) をクリックして、N 行のテーブルを追加します。 行と列でコンテンツを構成できます。

 

エディターを使用すると、任意のテキストへのリンクを挿入できます。 既存の 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 またはその他のファイルにリンクするには、コピーしたリンクをここに入力します。 もっと知る.


9. テキストの色 – テキストの色を変更します

デフォルトでは、システムは 設計課. ただし、このツールを使用してグローバル カラーをオーバーライドできます。 テキストを選択してカラー アイコンをクリックすると、標準のカラー パレットが表示され、そこから選択できます。

注: HTML コード ビューのカラー パレットで使用できないその他のカスタム カラーを指定できます。 詳細については、ポイント 12 までスクロールします。


10. クリップ – CTA ボタンを追加する

エディターでは、CTA ボタンを追加することもできます。四角形または丸形で、任意のページ/ギャラリー/ウェブサイト/PDF などにリンクできます。HTML コード ビューからサイズと色をカスタマイズできます。 詳細については、ポイント 12 までスクロールします。

このアイコンをクリックすると、CTA ボタンを選択できる小さなモーダル ウィンドウが開きます。


11.ウィジェット – カスタムコードを追加

エディターでは、Google マップ埋め込みコード、Soundcloud 埋め込みコード、ツイート投稿埋め込みコードなどのカスタム コードを追加することもできます。基本的に、ウィジェット アイコンを使用してエディターに埋め込みコードを追加できます。

このアイコンをクリックすると、埋め込みコードを貼り付けることができる小さなモーダル ウィンドウが開きます。


12. ライン – ラインを追加

エディタを使用すると、水平線を追加できます。

このアイコンをクリックすると、カーソルが置かれている場所に行が追加されます。


13.フルスクリーンモード

エディタを使用すると、フル スクリーン モードに切り替えることができます。 長いブログ投稿を整理したり、長い記事を書いたりする場合に非常に役立ちます。


14. HTML コード ビュー

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

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

ヒント: HTML コード ビューを使用すると、ブログ投稿に任意の種類の埋め込みコードを追加できます。  

お探しのものが見つかりませんか?

Pixpaエキスパートに連絡してください。