見出しセクション

URLに 見出し セクション あなたへ ページ ページの説明を追加できます。 画像とそれに関連するテキストを表示する場合は、このセクションを使用できます。

ここにアップロードされた画像は、ライトボックス モードをサポートしていません。 画像の角をドラッグすると、サイズを変更できます。

このセクションは、主に About Me/Us ページに使用できます。 あなたもすることができます 画像を任意のページにリンクします.

ここで扱われる内容:

  1. 見出しセクションを追加する
  2. コンテンツの管理
  3. 要素の管理
  4. レイアウトの変更
  5. テキストレイアウトの自動調整
  6. 表紙レイアウト
  7. スタイルのオプション

見出しセクションを追加します。

  • ページにセクションを追加できます。 既存のページにセクションを追加することも、 新しいページを作成する あなたのウェブサイト内。
  • あなたのページで、をクリックしてください 青+アイコン 追加する 新しいセクション あなたのページに。

  • 今すぐ セクションカテゴリ 左側にあります。
  • 選択する ヒーローセクション(1) オプションと選択 見出し (2) タブには何も表示されないことに注意してください。

  • いずれかを選択 セクション レイアウト (3) をクリックしてページに追加します。
  • セクションが追加されると、テキストを編集して任意の画像をアップロードできます。

コンテンツの管理

セクションを追加したら: 

  • 以下を行うには、 コンテンツを編集する (1)ボタン。

  • これが開きます 見出し項目パネル とします。

ここから、次のことができます。

  • プライマリ イメージをアップロードする (1) 見出しブロック用。
  • 二次画像をアップロードする (2) 見出しブロック用 (選択したレイアウトのみ)。

  • 加える Title (3)、字幕 (4), and 詳細説明 (5) 見出しブロックの。 説明を追加する前に確認してください この記事.

  • 任意のタイプを追加します リンク (6) 見出しセクションへ。 ボタン/画像リンク/ソーシャルアイコン/テキストリンクを追加できます。 さらに詳しく.
  • Save (7) お客様の変更。


要素の管理

見出しセクションには、 要素タブ セクション内のさまざまな要素の表示を簡単に管理できます。シンプルなトグル スイッチを使用すると、要素自体を削除したり変更したりすることなく、特定の要素を有効または無効にすることができます。

  • ソフトウェアの制限をクリック コンテンツを編集する (1)ボタン。

  • 選択する 要素 (2) タブ。
  • 変更を加えたら、 Save (3)ボタン。

アイテムオプション

  1. 画像を表示: 画像の表示/非表示を切り替えます。
  2. ショーのタイトル: タイトルを表示するかどうかを制御します。
  3. 字幕を表示: 字幕を有効または無効にします。
  4. 説明を表示: アイテムの説明の表示を管理します。
  5. ボタンを表示: 個々の項目のボタンを表示するかどうかを決定します。


レイアウトの変更

  • 以下を行うには、 コンテンツを編集する (1)ボタン。

  • 選択する レイアウト (2) タブ。
  • まず Lユート (3) あなたのセクションと Save (4) 変更。

プロからのヒント

全幅セクションを作成するには、11 ~ 16 の範囲のレイアウトを選択します。


テキストレイアウトの自動調整

テキストの自動調整セクションは、Pixpa Web サイトで動的かつレスポンシブなテキスト コンテンツを作成するための強力なツールです。

これにより、最大フォント サイズを設定でき、使用可能な画面サイズ、スペース、テキストの長さに応じてテキストのサイズが自動的に変更され、最適な読みやすさと美観が確保されます。


ページに自動調整セクションを追加する

  • 以下を行うには、 青+アイコン 追加する 新しいセクション あなたのページに。

  • 選択する ヒーローセクション (1)カテゴリをクリックして 見出し (2) タブ。

  • 見出しセクションで利用可能なレイアウトから、 一番下までスクロールしてください and スクリーンショットにマークされているレイアウトのいずれかを選択してください あなたの好みに応じて。


自動調整セクションの編集

  • 以下を行うには、 自動調整テキストブロックの編集 セクションの右上隅にあるボタンをクリックします。
  • コンテンツ タブでは、1番目、2番目、3番目を使用してセクションのテキストコンテンツを指定できます。 テキストフィールド.
  • テキストのフォントサイズは、画面サイズとテキストの長さに応じて自動的に調整されます。最後に、 Save (4) 変更。

スタイル自動調整セクション

セクションのスタイルをカスタマイズするには、 形式 タブ。ここには次のオプションがあります。

  1. 行の高さ: テキストの行間の垂直スペースを指定します。
  2. 最大フォント サイズ: テキストの最大フォント サイズを設定します。
  3. テキストの配置: セクション内でテキストを水平に揃えます。
  4. フォント ファミリ: 見出し 1、見出し 2、段落などのフォント ファミリを選択します。

お願い

テキスト サイズはデザイン セクションの指定されたサイズに従わず、使用可能なスペースとテキストの長さに基づいて調整されます。


表紙レイアウト

カバーセクションのレイアウトは、セクションにテキスト、ボタン、背景を追加したい場合に使用できます。カバーセクションは最もシンプルなレイアウトで、非常に簡単にカスタマイズできます。

カスタムコードスニペットオプションを使用すると、このレイアウト内にカスタムコードを埋め込むこともできます。 さらに詳しく.

ページにカバーセクションのレイアウトを追加する:

  • あなたのページで、をクリックしてください 青+アイコン 新しいセクションを追加します。

  • 今すぐ セクションカテゴリ 左側にあります。
  • 選択する ヒーローセクション (1)カテゴリをクリックして 見出し (2) タブ。

  • 見出しセクションで利用可能なレイアウトから、 一番下までスクロールしてください and スクリーンショットに示されているレイアウトを選択してください。.

詳細については、こちらから スニペットの追加と編集 表紙セクションのレイアウトにおいて。


スタイル オプション

  • 以下を行うには、 コンテンツを編集する (1)ボタン。

  • 選択する 形式 (2)タブ。
  • セクション要素のスタイルを変更し、 Save (3) お客様の変更。


セクションには複数のスタイル オプションがあります。 

  1. 画像スタイルオプション
  2. シェイプマスク
  3. 画像の境界線のオプション
  4. 配置と色
  5. 間隔オプション
  6. 文字サイズ
  7. ボタンとリンク

画像 

  1. 選択する Im年齢作物 画像のために。 画像は、正方形、円形、横長、縦長、動的に設定できます。
  2. リスト項目の各辺に共通の角半径または異なる角半径を選択し、数値 (px) を設定します。 コーナー半径 リスト項目の画像。
    使い方 コーナー半径 フィールドでは、さまざまな形の画像を作成できます。 ここで 500 px を指定すると、画像は円形で表示されます。
    分割コーナーを選択した場合は、コーナーごとに異なるコーナー半径を設定できます。 もっと知る。 
  3. に選択します。 ホバーで画像をアニメーション化する [はい] をクリックします。
  4. さまざまな中から選択してください アニメーションスタイル ホバー時の画像の場合。

フル幅見出しレイアウトを適用すると、次の追加オプションが表示されます。

  • オーバーレイカラーを指定: これにより、 カラーオーバーレイ 見出しセクション全体に適用されます。カラーピッカーを使用して任意の色を選択し、不透明度スライダーを使用して透明度を調整することで、テキストの視認性を高めたり、特定の視覚的雰囲気を演出したりできます。


シェイプマスク

  1. シェイプマスク: このトグルを有効にすると、見出しセクションの画像にシェイプマスクが適用されます。有効にすると、選択したシェイプが画像に視覚的にクリップされ、その形状に収まります。
  2. 形状を選択: 画像に適用するさまざまな定義済み形状から選択します。これにより、丸型、ダイヤモンド型、ドロップ型などのユニークな形で画像を表示して、コンテンツをクリエイティブにスタイル設定できます。

Notes

  • シェイプマスクオプションはレイアウトに依存します – タイトルやサブタイトルなどのテキストが画像の上に表示されるレイアウトでは表示されない場合があります。
  • ストレッチ設定は複数の要因に依存します – スタイル タブで定義された画像サイズ、配置、切り抜きの設定が含まれます。
  • 画像の切り抜きがオリジナルに設定されている場合画像の実際の寸法によって、垂直方向に引き伸ばされるか、水平方向に引き伸ばされるかが決まります。


画像の境界線のオプション

  1. 境界線の有効化/無効化 トグルを切り替えて画像の周りを囲みます。
  2. を選択してください 共通の境界線 画像のすべての面、または指定することもできます 別々に境界線を付ける それぞれの側に。
  3. 特定します  国境の。 0 に設定すると、境界線は表示されません。画像の各辺の境界線の幅を個別に設定するオプションもあります。
  4. まず 境界線の色 カラーピッカーから。
  5. 優先するものを選択してください ボーダースタイル をドロップダウンから選択します。
  6. を決定する モバイルの境界線の幅 デスクトップ用に選択された幅に合わせて配置します。


配置と色 

  1. 整列 コンテンツ 見出しセクションに水平方向に表示されます。 左揃え、右揃え、または中央揃えに設定できます。
  2. 整列 コンテンツ 見出しセクションを縦に並べます。 上揃え、下揃え、または中央揃えに設定できます。
  3. 残しておきたい場合に選択してください ベースカラー (テキストボックスの背景色) をデフォルトまたはカスタムにします。
  4. 選択した場合 カスタム額装 ベースカラーについては、次のオプションがあります。 背景色を選択します. を指定することもできます。 不透明度 ベースカラーの


サイズとスペース 

  1. 特定します 画像の幅 見出しブロック画像用。
  2. 特定します コンテンツの幅 見出しブロック テキスト用。
  3. 特定します テキストカードと画像間のスペースまたはオーバーラップ (の %)。
  4. 特定します タイトルの下のスペース (の %)。
  5. 特定します サブタイトルの下のスペース (の %)。


テキスト 

  1. 以下を行うには、 文字スタイルの変更 にアクセスするためのボタン 設計 セクションと フォントのサイズとスタイルを管理します。 
  2. をセットする  Title 見出しブロック セクションのフォント スタイル。
  3. をセットする  サブタイトル 見出しブロック セクションのフォント スタイル。
  4. デフォルトを設定する  詳細説明 見出しブロック セクションのフォント スタイル。
  5. このオプションを有効にすると 数字をアニメーション化する に存在する Title and サブタイトル フィールド。オンにすると、数値が動的なカウントアニメーションとともに表示され、視覚的に魅力的なものになります。


ボタンとリンク 

さまざまな種類のボタンを見出しセクションに追加できます。 それらは次のとおりです。

  • 通常のボタン (1) 画像ボタン (2)と、 アイコンボタン とします。

  1. 特定します 異なるボタン/リンク間のスペース。
  2. 特定します ボタン/リンクの上のスペース テキストカード内。
  3. をセットする ボタンの幅 テキストカード内。

ボタンのサイズ 

  1. サイズの設定 通常のボタン。 小、中、大の XNUMX つのオプションから選択できます。
  2. 特定します 画像ボタンの高さ ピクセル単位。
  3. をセットする アイコンボタンのサイズ ピクセル単位。

  1. をセットする アイコンタイプ アイコンボタンの場合。
  2. 選択する カラースタイル ボタン内のアイコン用。 アイコンのブランドカラーを選択するか、任意の色を指定できます。
  3. をセットする アイコンの色 アイコンボタンの。 このオプションは、有効にした場合にのみ表示されます。 選択した色 (28)オプション
  4. 選択した場合 カスタム額装 前のステップ (29) で、 好みの色 ボタン内のアイコンの場合。
  5. まず 背景色 アイコンボタンの場合。


角の半径がどのように機能するかを確認してください。 


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

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

Pixpa Studioがリニューアルされました。現在、ヘルプ記事のスクリーンショットをすべて更新中です。