> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://con-one.crisp.help/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# ブロックの活用方法&デザインについて

${youtube}[ブロックで多種多様なウェブサイトを構築！〜コネクティッドワンの使い方〜](MI-dI-3cF2Y)



# ブロックの活用方法

ブロックテンプレ紹介、デザイン、コピー、時間差で表示させる方法などを解説しています。

#### ブロックとは？
ブロックは、**最小限のデザインスキルでページを構成できる便利なパーツ** です。
何百種類ものブロックが用意されており、高度なデザイン知識がなくても、見た目に優れたレイアウトを作成できます。
各ブロックは、プロジェクトにスムーズに統合できるよう設計されており、デザイン作業に時間をかけるのではなく、**コンテンツ作成に集中できる** のが特徴です。
ブログ、ポートフォリオ、ビジネスサイトなど、さまざまなスタイルや用途に対応可能。使いやすさと柔軟性を兼ね備えたブロックを利用することで、**美しく、かつ効果的に機能するページ** を簡単に作成できます。

![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/18_3m0epf.jpg)

# 1.ブロックの構成

①ブロックが積み重なり構成される。
②ブロックの中にカラムを構成（列。サンプル画像は2列のカラム）。
③カラムの中にウィジェットから様々なパーツを選択してデザインする。
④ブロックの追加を左クリックで、ブロックを選択。


![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_1mylz7p.png)


⑤様々なブロックテンプレートが表示される。
各テンプレートの説明は動画をご参照ください。
#### ブロックの追加方法
1. ページ上で、コンテナの **上部または下部** にカーソルを移動します。
2. **\[ブロック] タブ** を選択すると、あらかじめデザインされたブロックのギャラリーが表示されます。
3. 好きなブロックを選ぶと、そのままページに追加され、すぐに編集可能になります。



![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_1lwl3z3.png)


# 2.ブロックの複製

①カーソルを合わせると操作バーが表示されます。
ウィジェットをコピーすると②に格納される。
* ブロック上部にあるメニューから **\[ウィジェットをコピー]** を選択すると、コピーされたブロックが「保存済みブロック」アイコンの下に表示されます。

![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_1g1uzvz.png)


格納された箇所にカーソルを合わせると、一番上に今コピーしたものが有るので、それを、挿入したい箇所にドラックアンドドロップをする。


![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_1d8af0y.png)
* コンテナを保存する場合は、横にある **歯車アイコン** をクリックし、名前を付けて保存してください。
* 保存されたブロックは、保存済みタブからいつでも呼び出すことができます。
![](https://storage.crisp.chat/users/helpdesk/website/-/f/0/8/3/f08367305081f800/22_1ecp1y2.jpg)

# 3.ブロックごとの設定

ブロックサイズの変更

![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_1b772ck.png)


ブロック単位で、サイトの非表示が可能です。

![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_d66nri.png)


ブロックの部分のサイト表示の時間を遅延する事が出来ます。

![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_9mp1y6.png)


ブロックの位置を変更する事が出来ます。

![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_hxdgc2.png)



${youtube}[ブロックデザイン設定〜コネクティッドワンの使い方〜](iCMi2bDl8VI)


# ブロックデザイン設定

ブロックのデザイン方法です。背景、グラデーション、境界線の設定などをすることで、シャープなデザインが手軽に作成が可能です！


# 1.ブロックデザイン


![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_1falsui.png)


①ブロックを押すと、編集ボックスが開きます。


# 2.ブロックの画像設定


![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_f8utd.png)


①カメラのマークがある場所をクリックすると、ファイルマネージャーが開きます。
②ファイルマネージャーから画像を選択する。または、下部のアップロードボタンでPC内の画像をアップロードする事も出来ます。


# 3.ブロックの画像のデザイン設定


![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_1jmyyq3.png)


視差効果を選択すると、視差スピードの設定ができます。
また、画像の上にグラデーションやオーバーレイを被せる事が出来ます。


# 4.ブロックの背景色の設定


![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_8gj8wt.png)

①背景色を選択する事も出来ます。


# 5.ブロックに画像設定


![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_hfysd6.png)

YouTube上の映像をブロック内に設定できます。その際、動画の音量、映像のループ箇所の設定もできます。


# 6.ブロックの分離線の設定


![](https://storage.crisp.chat/users/helpdesk/website/f08367305081f800/image_10n0axr.png)

ブロックの境界線を様々なデザインから選び、設定する事が出来ます。
設定は、デザインの他、色、上部か下部、デザインをフリップさせたり反転させることもできます。




# ページビルダー一覧


[ページビルダー概要](/ja/article/44oa44o844k444ot44or44oa44o85qac6kab-uugfod/)

[ページの追加方法](/ja/article/44oa44o844k444gu6l95yqg5pa55rov-ngabyy/)

[ブロックの活用方法](/ja/article/44ow44ot44od44kv44gu5rs755so5pa55rov-wddhzi/)

[ウィジェット追加方法](/ja/article/44km44kj44k344kz44kn44od44oi6l95yqg5pa55rov-uypahx/)

[SEOの設定方法](/ja/article/seo-12zy0jh/)

[スマホサイズのデザイン設定方法](/ja/article/44k544oe44ob44k144kk44k644gu44oh44k244kk44oz6kit5a6a5pa55rov-79dyz5/)

[購入者限定ページの作成手順](/ja/article/6lo85ywl6icf6zmq5a6a44oa44o844k444gu5l2c5oiq5oml6acg-5ohl1f/)

[ポートフォリオ機能で商品一覧・顧客の声を作成！](/ja/article/44ob44ka44o844oi44ov44kp44oq44kq5qmf6io944gn5zwg5zob5lia6kan44o76agn5a6i44gu5aow44ks5l2c5oiq77yb-gdxfxi/)




[ヘッダーを活用してホームページのメニューを最適化しよう！](/ja/article/44oy44od44k44kz44o844ks5rs755so44gx44gm44ob44o844og44oa44o844k444gu44oh44ol44ol44o844ks5pya6ygp5yyw44gx44ki44gg77yb-1bx306j/)

[コピー（複製）の仕方（ウィジェットやブロック）](https://con-one.crisp.help/ja/article/44kz44ou44o877yi6ksh6ko977yj44gu5luv5pa577yi44km44kj44k444kn44od44oi44ke44ow44ot44od44kv77yj-khqvln/)

[フッターを活用してユーザーを誘導しよう！](https://con-one.crisp.help/ja/article/44ov44od44k44o844ks5rs755so44gx44gm44om44o844k244o844ks6kqy5bco44gx44ki44gg77yb-hy2apq/)

[ページへのアクセス設定](https://con-one.crisp.help/ja/article/44oa44o844k444g444gu44ki44kv44k744k56kit5a6a-1b5nciv/)

[AIで作ったLPやウェブサイトをコネワンに表示させる方法](https://con-one.crisp.help/ja/article/ailp-1silgif/)

[ファビコンとSNS共有画像](https://con-one.crisp.help/ja/article/sns-xf0jub/)

[ファイルマネージャー](https://con-one.crisp.help/ja/article/44ov44kh44kk44or44oe44on44o844k444oj44o8-14r6elu/)

[ブロックをスライダーで表示する方法（スライダーモード）](https://con-one.crisp.help/ja/article/44ow44ot44od44kv44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-jvpdc5/)

[ブロックの表示設定（見る人・日時・国などで表示を切り替える）](https://con-one.crisp.help/ja/article/44ow44ot44od44kv44gu6kgo56s66kit5a6a77yi6kal44kl5lq644o75pel5pmc44o75zu944gq44gp44gn6kgo56s644ks5yih44kk5pu44gi44kl77yj-1qrodnx/)

[カラムの基本設定](https://con-one.crisp.help/ja/article/44kr44op44og5z65pysjuocsoodreodvoodkoodqocqodqeodooiorewumg-bf216w/)

[グローバルカラムの設定](https://con-one.crisp.help/ja/article/44kw44ot44o844oq44or44kr44op44og44gu6kit5a6a-6l3pnn/)

[カラムをタブで切り替えて表示する方法（タブモード）](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k44ow44gn5yih44kk5pu44gi44gm6kgo56s644gz44kl5pa55rov77yi44k44ow44oi44o844oj77yj-570b6r/)

[カラムをスライダーで表示する方法（スライダーモード）](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-vrz6u/)[](https://con-one.crisp.help/ja/article/44kr44op44og44ks44k544op44kk44oa44o844gn6kgo56s644gz44kl5pa55rov77yi44k544op44kk44oa44o844oi44o844oj77yj-vrz6u/)

[フリームーブモード解説：ウィジェットを自由に移動](https://con-one.crisp.help/ja/article/44ov44oq44o844og44o844ow44oi44o844oj6kej6kqs77ya44km44kj44k444kn44od44oi44ks6ieq55sx44gr56e75yuv-1x5cejf/)