[外部サービス]外部ブログを貼りつける

Dressは、デザイン編集を行う場合にスタイルの追加をすることができる機能です。
こちらでは今回は詳細設定の項目より「高度な設定」をオンにした状態で、設定が可能な各スタイルを解説いたします。

スタイルの追加については、「+」マークをクリックするとスタイル一覧が表示されます。

「高度な設定」をオフにした状態の項目はこちらをご確認ください。

文字スタイル

■文字間隔 letter-spacing
文字と文字の間隔を数値で指定できます。

段落スタイル

■縦方向の配置 vertical-align
以下の設定ができます。
・ベースライン baseline
・上揃え TOP
・中央揃え middle
・下揃え bottom
・上付き super
・下付き sub
・テキスト上揃え text-top
・テキスト下揃え text-bottom
■文字の方向 writing-mode
以下の設定ができます。
・横書き horizontal-tb
・縦書き（右から左へ） vertical-rl
・縦書き（左から右へ） vertical-lr
縦書きを設定すると、文章を縦書きの表示にできます。

【改行】

以下の改行に関する設定ができます。
■改行 white-space
文章の改行に関する設定ができます。
・自動改行 normal
・改行しない nowrap
・記述通りの改行のみ pre

■禁則処理 word-break
改行をしなければ、コンテンツボックスが文章がはみ出る際に、
ブラウザ側で改行するかどうかの設定ができます。
・言語に合わせて改行 normal
・文字列の途中で改行する break-all
・文字列の途中で改行しない keep-all

■単語の分割 word-wrap
コンテンツボックスが文章がはみ出る際に、単語を分割して改行するかの設定ができます。
・分割しない normal
・分割する break-word

■リスト記号
リストの記号や位置を設定できます。

■オブジェクトフィット object-fit
画像や動画といった要素をエリア内でどのように収めるか設定できます。

・領域に収める contain
・領域を覆う cover
・引き伸ばし fill
・スケールダウン scale-down
・そのまま表示 none

表示

■表示形式 display
・インライン inline
インラインは、要素を横に並べ、必要なだけの幅だけを占めさせる際に設定します。
・ブロック block
　要素を縦に並べる箱のようなものに変える設定です。設定すると
要素は横幅いっぱいを占め、次の要素はその下に表示されます。
・インラインブロック inline-block
横並びにしつつ、幅や高さを自由に設定したい際に利用します。
・フレックス flex
要素を柔軟に配置し、簡単に横並びや縦並びをできるように設置したい際に設定します。
・インラインフレックス inline-flex
横並びで柔軟に要素を配置する設定です。行の中で他のテキストや要素と同じように扱えます。
・リスト項目 list-item
要素をリストのアイテム（項目）として表示する際に設定します。
・テーブル tabke
要素を表のように表示する際に設定します。
・テーブルセル table-cell
要素を表のセルのようなレイアウトを再現する際に設定します。
・継承 inherit
親要素の表示方法をそのまま継承したい際に設定します。
・表示しない none
要素を完全に非表示にする際に設定します。

■フロート float
要素を横並びにし、左右に寄せる設定ができます。
・フロートしない none
・左へフロート left
・右へフロート right

■はみ出し処理 overflow
含まれている内容が領域をはみ出した時に、どのように表示するかを指定します。
スマホサイトで、特定のブロックが横に広がっている際の調整するといった際に活用します。
・はみ出し部分を表示 visible
・はみ出し部分を隠す hidden
・スクロールバーを表示 scroll
・はみ出した時はスクロール auto

■トランジション transition
要素の変化を滑らかにするための設定となります。
記述方法は、CSSの「transition」プロパティの設定値を記載します。

■変形 transform/transform-origin

要素の位置や大きさ、回転などを変える際に設定します。
要素を変形させる際の基準点（原点）を指定する際は、「基準」を設定します。

「transform」プロパティに指定する値をショートハンド形式で入力します。基準には「transform-origin」の値を設定します。
■内容 content
CSSでコンテンツを挿入するためのプロパティです。
項目範囲の選択で「after」、「before」を選択し使います。

■フレックスコンテンツ
・アイテムの向き flex-direction
フレックスコンテンツに組み込まれたアイテムの上下左右の方向や向きを設定できます。
・折り返し flex-wrap
フレックスアイテムの折り返しを指定できます。
・主軸の配置 justify-content
Flexboxレイアウトにおけるフレックスアイテムをメイン軸に沿ってどのように配置するかを設定できます。
・交差軸の配置 align-content
複数の行や列がある場合に、行をどのように配置するか設定ができます。
・アイテム揃え　align-items
Flexコンテナ内のフレックスアイテムをクロス軸に沿って、どのように配置するかを設定できます。
・行の間隔 row-gap
アイテム間の間隔を設定できます。
・列の間隔 column-gap
Flexコンテナ内の縦方向のアイテム間の間隔を指定できます。

段落スタイル

■配置方法 position
・通常 static
要素のデフォルトの配置方法となります。
・相対配置 relative
要素を通常の文書フローに従いつつ、自身の位置を基準にして配置を微調整する際の配置方法となります。
・絶対配置 absolute
要素を通常の文書フローから取り外し、親要素や親コンテナに対して位置を相対付けるための値です。
・固定配置 fixed
要素をビューポートに固定してスクロールしてもその位置を保つための値です。
■位置
親要素からの距離を、上下左右で設定したい際に入力します。
■重なり順 z-index
要素の積み重ね順序を調整したい際に設定します。値が大きいほど前面に表示され、値が小さいほど背面に表示されます。

Dressは、デザイン編集を行う場合にスタイルの追加をすることができる機能です。
こちらでは詳細設定の項目より「高度な設定」をオフにした状態で、設定が可能な各スタイルを解説いたします。

スタイルの追加については、「+」マークをクリックするとスタイル一覧が表示されます。


「高度な設定」をオンにした状態の項目はこちらをご確認ください

文字スタイル

［A］の文字スタイルは、以下の設定ができます。
【文字色】
文字の色が調整できます。
【文字サイズ】
文字のサイズが調整できます。
【フォント】
文字にWebフォントが設定できます。
【装飾】
・文字の太さ
文字の太さが調整できます。
・斜体
文字を斜体に調整できます。
・ライン
文字に取り消し線、下線等が設定できます。
・縁取り
テキスト文字の輪郭線の幅と色を指定できます。
・シャドウ
テキストに影を追加できます。

【文字間隔】letter-spacing
文字と文字の間隔を数値で指定できます。
【行の高さ】line-height
文字サイズを基準に行の高さを指定できます。

段落スタイル

［B］の段落スタイルは、以下の設定ができます。
■横方向の配置 text-align
左揃え、中央揃え、右揃えが調整できます。

■インデント text-indent
段落の最初の行の先頭をインデントします。どのくらいインデントするかを共通設定、モバイル専用の設定ができます。

ボックススタイル

［C］のボックススタイルは、以下の設定ができます。
【背景】 border

■背景色
背景の色を設定できます。
■背景イメージ　background-image
画像の設定や、色のグラデーション設定ができます。
・画像ファイルを指定
・「グラデーションを指定」
・高度な設定（自由入力）
※background-imageプロパティに表示する値を入力することができます。
・背景イメージを表示させない

オプション
■背景の繰り返し
・タイル状に繰り返す repeat
・横方向に繰り返す repeat-x
・縦方向に繰り返す repeat-y
・繰り返さない no-repeat-y
■サイズ
・実寸で表示 auto
・背景領域に収まるサイズで表示 contain
・背景領域を覆うサイズで表示 cover
・背景領域にいっぱいに引き伸ばして表示 100%
■位置
背景画像の初期位置を、上下左右で設定できます。
※ブレンドモード　background-blend-modeの設定ができます。
■固定
固定表示の設定ができます。

【枠線】 border
共通設定、モバイル専用の設定にて、各辺ごとに線の太さや色の設定ができます。

【角丸】 border-radius
共通設定、モバイル専用の設定にて要素の境界の外側の角を丸くする設定ができます。
画像を丸く設定する等の設定ができます。

【シャドウ】 box-shadow
共通設定、モバイル専用に、ボックスに1つまたは複数の影を設定できます。

【余白】
共通設定、モバイル専用に外余白と内余白の設定ができます。
外余白は、要素とその周囲の要素との間の「スペース」を指定し、内余白は要素の「コンテンツと枠の間のスペース」を指定します。

【幅】
共通設定、モバイル専用に、指定したコンテンツで表示する幅を数値で指定します。自動を選択すると表示されるエリアまたは内容に合わせた幅になります。
幅の上限を指定した場合、その数値以上には広がらなくなります。

【高さ】
共通設定、モバイル専用に表示する高さを数値で指定します。自動を選択すると表示されるエリアまたは内容に合わせた幅になります。
高さの上限を指定した場合、その数値以上には広がらなくなります。

表示

［D］の表示は、以下の設定ができます。
■不透明度 opacity
共通設定、モバイル専用に不透明度の設定ができます。
1が不透明です。数値が小さくなるほど半透明になり、0で完全に透明になります。例えば「0.8」の場合は不透明度が80%になります。

質問の参考例

AIへの質問はテキストの書き方により得られる回答が異なります。
有力な回答が得られない場合はテキスト表現の変更をお試しください。

以下にサイトテンプレートのおすすめについてテキスト表現ごとのAI回答例を紹介いたします。

BiNDupにはさまざまな機能で「テンプレート」という表現があるため情報が不足した質問では回答が行えない場合があります。

情報を加筆することで回答が得られます。

さらに質問へ「目的」を追加することで目的にあわせた回答が行われます。

高度な質問例

技術的な質問の入力例は以下の画像をご参照ください。
※サポート外の設定を行った場合、動作保証・サポートセンターでのご案内が行えません。
※必ず事前にサイトの複製を行ってください。

質問へ条件をつける

以下は一例となりますが条件や要望を追加することが可能です。
AIの行った解答例はこちら
※ご質問内容によって画像等のデータを回答できない場合がございます。
※AIの学習内容は更新を続けてまいります。

ご利用の前に

AIへの質問送信フォームに質問参考例がございます。
クリックすることでAIへ質問することもできます。
※コピーした文章をペーストできます。

AIが回答しやすい質問の入力例や専門的な質問例はこちらのページをご参照ください。

BiNDupコントロールパネルよりご利用いただけます

BiNDupコントロールパネル

AIサービスのご利用にはBiNDupコントロールパネルへのログインが必要です。
ご利用いただけるコースは以下となります。
■エントリーコース
■基本コース
■ビジネスコース
※解約したコースはご利用いただけません。
※WebLiFE*サーバーのコースはご利用いただけません。

回答画面の見方

コピー

テキスト単位のコピーが行えます。

フィードバック

回答に対するフィードバック（評価）を行えます。
より正確な回答を提供できるAI育成のためフィードバックへご協力をお願いします。

会話の共有

一連のやりとりを別ブラウザで表示できるリンクを作成します。
サポートセンターへお問合せの際にご活用ください。
会話共有後の一例はこちら

リセット

履歴を消すことができます。
内容の異なる別の質問をする際にご利用ください。

AIでの回答で解消いただけない場合はサポートセンターまでお問い合わせください。
サポートセンターへのお問合せ方法

AIをご利用できない場合

ChatGPTの提供元であるOpenAI側のキャッシュが逼迫し一時的にAIが応答できない場合があります。
その場合はお時間を置いてご利用ください。
ChatGPTのステータスページにつきましてはこちらよりご確認いただけます。
※稼働状況の反映にタイムラグがある場合がございます。

BiNDupのご利用に関しまして、適格請求書等保存方式（インボイス制度）への対応として
適格請求書発行事業者登録番号が必要な際は、以下がBiNDup（ 株式会社ウェブライフ）の番号となります。

T4010401167078

またBiNDupのご利用料金にて、領収書が必要な際はこちらの手順にて発行をお願いします。
インボイス制度にて、ご不明な点等がありましたらサポートセンターへお問い合わせをお願いいたします。

現在、独自ドメイン更新時の領収書発行は対応しておりません。
お手数ですが、請求金額等の明細は、お客様のWEBLIFE ID（メールアドレス）宛に送信している次の件名のメールをご確認ください。
件名[1]:［BiNDup］独自ドメインの契約更新が完了しました
件名[2]:ドメイン登録 料金ご請求／領収明細