プロジェクト設定を使用して、プロジェクトのさまざまな側面をカスタマイズできます。 Blocs プロジェクト。これらのオプションは通常、Web サイト全体に影響します。
プロジェクト設定へのアクセス
プロジェクト設定には、ブレークポイント コントロールの左側にあるマスター メニューから、またはキーボード ショートカットを使用してアクセスできます。 ⌘+、.
基本設定
サイトの名前
サイト名の値は、ソーシャルカードとWordPressテーマを作成する際のテーマ名に使用されます。
Webアドレス
Webアドレスは、サイトをホストする予定のURLです。 サイトをエクスポートするときにサイトマップを生成する場合は、このフィールドに入力することが重要です。
フレームワーク
フレームワークのドロップダウンメニューでは、のバージョンを選択できます ブートストラップフレームワーク サイトが使用します。 注意：プロジェクトを新しいバージョンのフレームワークに移行すると、プロジェクトを元に戻すことはできません。
ホーム
デフォルトでは Blocs プロジェクトの最初のページをサイトのホームページとして使用します。 このドロップダウンメニューを使用すると、ホームページをプロジェクト内の任意のページに設定できます。
言語設定
デフォルトでは Blocs サイトの言語属性を設定しません。 言語ドロップダウンメニューを使用すると、すべての新しいページのデフォルトの言語属性を設定できます。 このオプションは、現在作成されているページの言語属性を更新しないことに注意してください。
このオプションは、サイトのコンテンツを別の言語に自動的に翻訳するのではなく、サイトのコンテンツが特定の言語で書かれていることをブラウザに通知するだけです。
新しいページタイプ
デフォルトでは Blocs ですべての新しいページを作成します .htmlを サフィックス。 このオプションを使用すると、デフォルトの新しいページファイルタイプを、サポートされているページファイル形式のXNUMXつに設定できます。
CMS設定
Blocs は、さまざまなプレミアムおよびオープンソースのサードパーティコンテンツ管理システムのサポートを統合しているため、強力で動的なWebサイトを簡単に作成でき、更新して外部に提供できます。 Blocs 応用。 このドロップダウンコントロールを使用すると、プロジェクトのターゲットCMSを設定できます。 あなたはCMSについてもっと読むことができます Blocs サポート ここ.
背景色
デフォルトでは、サイトは Blocs 標準の白い背景があります。この色を使用すると、サイト全体にカスタムのグローバル背景色を設定できます。
幅（Width）
幅オプションを使用すると、サイトが収まるように拡大する最大幅を設定できます。 デフォルトでは1170pxに設定されています。これは、表示されているブラウザの幅が1170pxになると、利用可能なスペースを埋めるためにWebサイトの幅が拡大しなくなることを意味します。 代わりに、幅は1170ピクセルのままですが、ブラウザウィンドウ内の使用可能なスペースの中央で水平方向に中央に配置されます。
この値は任意に設定できます。たとえば、ブラウザウィンドウのサイズに関係なく、サイトをブラウザの端から端まで埋める場合は、この値を100％に変更します。
ボディクラス
このフィールドに入力されたクラスは、 ボディタグ サイトがプレビューまたはエクスポートされるときのすべてのページの。 複数のクラスはスペースで区切る必要があります。
サイトの特定のページにクラスを追加する必要がある場合は、 ボディクラスオプション ページ設定にあります。
アクティブリンククラス
アクティブクラスは、現在のブラウザのURLに一致するすべてのナビゲーションリンクに適用されるカスタムクラスです。 このクラスは、メインサイトナビゲーションの現在アクティブなページリンクに適用されます。 アクティブ状態クラスとその使用方法の詳細を読むことができます ここ.
プロジェクトアセットを埋め込む
Blocs サイトで使用されているすべてのアセットをメインに埋め込むことができます Blocs プロジェクトファイル。 これを行う主な利点は、プロジェクトで使用されるすべてのものがXNUMXつのファイルに格納されるため、複数のMac間での作業プロセスが大幅に合理化されることです。 プロジェクトファイルにアセットを埋め込むことの主な欠点は、それらのアセットに加えられた将来の変更が同期されず、に反映されないことです。 Blocs.
すべての新しい Blocs プロジェクト、アセットの埋め込みは 使用可能 ただし、デフォルトでは無効にすることもできます。 埋め込みが有効になっている場合、新しく追加されたすべてのアセットがプロジェクトファイルに埋め込まれます。埋め込みが無効になっている場合、 Blocs 元のアセットファイルにリンクするだけです。
埋め込みアセットワークフローを使用する場合 Blocs 以前にアセットにリンクするように設定されたプロジェクトでは、 一括埋め込みアセット機能 これをする。
グローバルタイポグラフィ設定
グローバルテキストオプションを使用すると、プロジェクト全体でテキストがすべてのテキストオブジェクトをどのように検索するかを制御できます。 Webページのテキストは通常、ヘッダーや段落などのHTMLタグで囲まれています。 これらのグローバルオプションを使用すると、これらのタグの書体、フォントサイズ、色などの基本的なスタイル値を設定できます。 より上級のユーザーは、を使用してより詳細なスタイル調整を行うこともできます クラスマネージャー & クラスエディタ それはで利用可能です Blocs.
Adobe フォント ID
あなたが持っている場合 Adobeフォント アカウントでは、AdobeWebフォントをに持ち込むことができます Blocs 関連するものを貼り付けるだけです プロジェクトID このフィールドに。 アドビフォントの実装について詳しくは、 Blocs プロジェクト、これで 専用のナレッジベースの投稿.
グローバルボタン設定
グローバルボタン設定を使用すると、内で新しく生成されたボタンの全体的な外観を設定できます。 Blocs、としてドロップインされるかどうか Brics または既製の一部として追加 Bloc。 プロジェクト内で生成されるボタンのスタイル、サイズ、およびコーナータイプを制御できます。
ボタンの外観は、サイドバーのボタンオプションを使用して、ボタンごとにカスタマイズすることもできます。
サイト画像
ファビコンの追加
サイトにファビコンを追加するには、小さなファビコンサムネイルをクリックしてから、サイトのファビコンとして使用するアートワークを選択します。 最良の結果を得るには、16x16pxのサイズの.pngを使用してください。
及び
ここで設定した画像ファイルは、プロジェクト全体でサイトのロゴとして使用されます。 たとえば、新しいナビゲーションの場合 Bloc ロゴを含むが追加され、この画像はその中のロゴに使用されます Bloc、または、画像のデータフィードがロゴに設定されている場合、この画像が表示されます。
画像保護
このオプションを有効にすると、基本的な画像保護が追加され、ブラウザで表示したときにすべての画像が右クリックまたはドラッグされないようになります。
イメージタグのディメンション属性を自動化する
このオプションを有効にすると、追加される 幅 & 高さ Web サイト内のすべてのイメージタグに対する HTML 属性。このオプションを有効にすると、Web サイトの Google ページ速度スコアの向上に役立ちます。
アナリティクス
分析Webサービスを使用すると、サイトのユーザー統計を追跡できます。 これらのサードパーティサービスは通常、アクティビティを追跡するWebサイトページのいずれかに追加する必要がある小さなコードスニペットを提供します。 このテキスト領域にコードスニペットを配置すると、プロジェクト内のすべてのページにコードスニペットが追加されます。
プロジェクトの添付ファイル
プロジェクトの添付ファイルは少し似ています ページの添付ファイル 主な違いは、これらの添付ファイルがプロジェクトのすべてのページのヘッダーセクションに追加されることです。 JSファイルとCSSファイルを追加するだけでなく、HTMLファイル、PHPファイル、またはプロジェクトの最終エクスポートに含めたいファイルでいっぱいのディレクトリ全体を追加することもできます。
添付されたJSファイルはエクスポート/ jsディレクトリに配置され、CSSファイルはエクスポート/ cssディレクトリに配置され、PHPファイルはエクスポート/ includesディレクトリに配置されます。 すべてのJSファイルとCSSファイルは、プロジェクトのすべてのページの先頭に追加されます。
奪還
Google ReCaptureを使用すると、ユーザーは自分のサイトのフォームをスパムから保護できます。 ReCaptureの設定には、Googleの再キャプチャアカウントとサイトおよびセキュリティキーが必要です。これらは、関連するフィールドに入力する必要があります。
GoogleからReCaptureサイトとセキュリティキーを取得する方法についてすべて読むことができます ここ とあなたのフォームにReCaptureスパム保護を追加する方法 Blocs ウェブサイト ここ.
サイト情報
これらの値は、静的およびWordPressテーマのエクスポート用にstyle.cssファイルに書き込まれます。 WordPressテーマを作成するとき、これらの詳細は、WordPressテーマセレクターにテーマメタデータを入力するために使用されます。
アカウント
社会
この値は、Twitterソーシャルカードに使用されます。
この値は、Facebookソーシャルカードに使用されます。
Facebook管理者
この値はで使用されます fb：admins Facebookのソーシャルカードのプロパティ。
FacebookアプリID
この値はで使用されます fb：app_id Facebookのソーシャルカードのプロパティ。
Disqusの名前
サイトの訪問者がページにコメントを残せるようにする場合は、サードパーティのサービスDisqusを使用することをお勧めします。 Disqusの設定についてもっと読むことができます ここ.
eコマース
ストライプ公開キー
この値は、Stripe購入ボタンに必要です（ストライプキーを取得する).
パドルベンダーID
この値は、パドル購入ボタンに必要です（パドルIDを取得する).
EcwidストアID
この値は、Ecwid購入ボタンに必要です（EcwidIDを取得する).
スニップカート API ID
この値は、Snipcart購入ボタンに必要です（SnipcartIDを取得する).
設定をエクスポート
エクスポート設定は、にある設定と同じです。 高度なエクスポート シート。 これらの設定により、ホストされたサイトのパフォーマンスを向上させるために使用できるさまざまなオプションにアクセスできます。
縮小する
ミニファイ（最小化またはミニファイ）は、機能を変更せずにソースコードから不要な文字をすべて削除するプロセスです。 ミニファイを使用する主な利点は、Webサイトの読み込み時間を大幅に改善できることです。
遅延読み込み
通常、ユーザーがWebページを開くと、ページ全体のコンテンツがダウンロードされ、一度にレンダリングされます。 これにより、ブラウザはWebページをキャッシュできますが、ユーザーがダウンロードしたすべてのコンテンツを実際に表示する保証はありません。
ページにアクセスしたときにすべてのコンテンツを一括ロードする代わりに、ユーザーがページの必要な部分にアクセスしたときにコンテンツをロードできます。 遅延読み込みでは、ページはプレースホルダーコンテンツで作成され、ユーザーが必要な場合にのみ実際のコンテンツに置き換えられます。
遅延読み込みを有効にすると、メディアが豊富なWebページの読み込み速度を向上させることができます。
クリーンページのURL
デフォルトでは、内で作成されたサイトの内部URL構造 Blocs 完全なファイル名が含まれます。次に例を示します。
blocsapp.com/press.html
クリーンURLを有効にすると、サイト内の内部ページURLからファイル拡張子が削除され、次のように見た目がすっきりします。
blocsapp.com/press/
必須ではありませんが、クリーンURLを使用するとSEOを改善できます。
サイトマップ
このチェックボックスを使用すると、サイトマップの自動生成を無効にできます。
キャッシュバストCSSおよびJS
デフォルトでは、WebブラウザはWebページの重要な部分をキャッシュするように設計されています。 これは、読み込み時間を短縮するためです。 キャッシュされたリソースは訪問者のコンピューターに保存されます。つまり、次にサイトにアクセスしたときに、これらのリソースはローカルに保存されるため、読み込みが速くなります。 ただし、たとえば、これが問題になる場合があります。 サイトに大きな視覚的スタイルの変更を加えてサーバーに再アップロードすると、キャッシュされたバージョンのスタイルシートを使用してサイトにアクセスすると、古い視覚的スタイルが引き続き表示され、サイトが壊れているように見える可能性があります。 有効にすると、 キャッシュバスティング サイト内で使用されるCSSファイルとJSファイルのファイルパスに一意のサフィックスを追加します。 新しいサイトがホストされると、これらのサフィックスにより、訪問者のブラウザはサーバーからコードを再ロードし、リソースの新しいキャッシュバージョンを作成します。
jQueryを含める
プロジェクトのフレームワークがBootstrap5に設定されている場合、この追加オプションがエクスポート設定に表示され、エクスポート時にjQueryライブラリをBootstrap5サイトに含めることができます。
WebP を生成する
このオプションが有効になっていると、サイトがエクスポートされるときに、 Blocs すべてを生成して置き換えます jpgの & 。PNG WebP バージョンの読み込みを高速化して、Web サイト コード内のアセットを高速化します。 これにより、ページの読み込み速度が向上します。 Blocs オリジナルも使用します jpgの & 。PNG アセット ファイルを使用して、WebP をサポートしていない古い Web ブラウザーのフォールバックを実装します。
WebP の品質
このオプションでは、WebP 画像の圧縮品質を設定できます。 Blocs エクスポート時に生成されます。 デフォルト値は 70 で、値が小さいほど画質とファイル サイズが小さくなります。
エクスポート場所
このオプションを使用すると、プロジェクト専用のエクスポート場所を設定できます。 これにより、プロジェクトをエクスポートするたびにエクスポート場所を再選択する必要がなくなるため、開発ワークフローをスピードアップできます。
その他
その他の設定により、サイトに統合したい他のさまざまな機能にアクセスできます。
モバイルアニメーションを無効にする
このオプションを使用すると、でアニメーションを無効にできます SM & XS ブレークポイント。
プリローダー設定
あなたのウェブサイトのプレゼンテーションを改善するために、 Blocs 小さなプリロードアニメーションを自動的に統合します。 このアニメーションは、サイトが完全に読み込まれるまで、訪問者のブラウザに表示されます。 サイトが完全に読み込まれると、プリローダーは自動的に消え、ウェブページが表示されます。
WordPress
WordPressオプションを使用すると、テーマをエクスポートしてWordPressにインストールした後の、テーマの外観と機能のさまざまな側面を制御できます。
親指のプレビュー
これはWordPressテーマ選択エリアで使用されるサムネイルです。推奨サイズは 1200 x 900。 親指の画像が設定されていない場合は、 Blocs エクスポート中に自動的に生成されます。
ワードプレスの管理バー
このオプションを使用すると、ユーザーがログインしたときに、WordPress管理バーをWebサイトのフロントエンドに表示するかどうかを制御できます。
傑作写真
このオプションは、WordPressバックエンドのページの注目の画像コントロールを有効にします。
ロゴカスタマイザーコントロール
このオプションを有効にすると、ユーザーはナビゲーションにあるロゴ画像を変更できます Bric、カスタムのもので、WordPress管理者にあるWordPressカスタマイザーオプションを使用します。
自動ページ生成
このオプションは、からすべてのページを自動的に生成します Blocs テーマが最初にアクティブ化されたときのWordPressバックエンドのサイト。 （この機能を再実行するには、テーマを無効にしてから再度アクティブにする必要があることに注意してください）。