初級編
記事を書いてみよう2列ボックス/3列ボックスを活用する
ボックスTYPEの「2列TYPE」「3列TYPE」の使い方を解説します。
なお、ホームページをパソコンで見た時に、2つの記事が横に並ぶパターンのことを「2列TYPE」、3つの記事が横に並ぶパターンのことを「3列TYPE」と呼びます。
ボックスTYPEが利用できる条件
この機能を利用するためには、対応しているデザインを選択する必要があります。
対応しているデザインは以下となります。
デザイン種別 | アイコン表示 | 利用できるプラン |
ハイグレードデザイン | ![]() |
・トライアル(無料体験中) ・スタンダードプラン |
ボックスTYPE対応デザイン | ![]() |
・トライアル(無料体験中) ・ライトプラン ・スタンダードプラン |
ボックスTYPE「2列TYPE」「3列TYPE」の活用例
ボックスTYPEの「2列TYPE」「3列TYPE」を活用すると、以下のようなレイアウトが簡単に実現できます(以下は「2列TYPE」の活用例です)。

※サンプル:ハイグレードデザイン(biz_class_blue)使用
以下、このようなレイアウトの作り方をご説明します。
[新しい記事ボックスを追加する]をクリック

管理画面の左メニューから[トップページの編集]をクリックします。
画面を下にスクロールすると、『記事ボックスの追加と編集』のエリアがありますので、[新しい記事ボックスを追加する(一番上に追加)] をクリックします。
※各ページに記事を追加したい場合は、左メニューから[各ページの編集]をクリックしてください。
操作方法は「記事を書いてみよう」から確認できます。
[2列TYPE]または[3列TYPE]をクリック

「新しい記事ボックスを追加する(一番上に追加)」をクリックすると、追加するボックスのタイプを選択する画面が表示されます。
[2列TYPE]または[3列TYPE]をクリックします。
※前の画面に戻りたい場合は、右上の「×」マークをクリックしてください。
[見出し]を入力

[2列TYPE]または[3列TYPE]をクリックすると、『記事ボックスの追加と編集』画面が表示されます。
[見出し]欄に「大見出しを入力してください」と表示されていますので、2列や3列のボックス全体に共通する大きな見出しを入力します。
例)提供サービス、レッスン内容、コース紹介、サービス一覧、商品カテゴリ、お客様の声など
[小見出し]と[本文]を入力

「小見出しを入力してください」と「本文を入力してください」と表示されていますので、それぞれ[小見出し]と[本文]を入力します。
画像を投稿する

[画像を選択する] ボタンをクリックすると、ご自身のパソコンに保存されている画像をアップロードできます。
※アップロードできるファイル形式は、jpg、jpeg、png、gifです(一部のアニメーションgifはアップロードできません)。
ボタンを設定する
ボックスTYPEでは、各ボックスに「ボタン」を設置することができます。例えば、ボタンに「詳細はこちら」などの文字ならびにリンク先URLを設定し、他のページへと閲覧者をいざなうことが可能です。

ボタンは表示・非表示を選べます。
ボタンを「表示する」を選んだ場合
ボタンを表示する場合は、下2つの入力欄に内容を入力してください。
・ 「ボタンの文字を入力してください」
ボタンに表示される文字のこと。
例) 詳細はこちら、お申し込みはこちら、まずは読んでみる、無料で相談する、など
・ 「リンクURLを入力してください」
ボタンを押したときに移動するページのURL(アドレス)
例)https://〜から始まるリンク先
ボタンを「表示しない」を選んだ場合
ボタンを表示しない場合は、下2つの入力欄は空欄のままでかまいません。
設定内容を保存してホームページを確認する

[この内容で設定]をクリックして、記事を保存します。

画面右上の[プレビュー]ボタンをクリックし、記事が正しく追加されているか確認します。

※サンプル:ハイグレードデザイン(biz_class_blue)使用
【ヒント】2列ボックス/3列ボックスで画像をキレイに並べるコツ
2列ボックスや3列ボックスに画像を設定する場合は、画像の「縦横サイズ」をそろえておくと、見た目が整ってキレイに表示されます。 サイズがバラバラだと、行の高さがずれて表示されてしまい、ページ全体の印象もチグハグに。
画像編集ソフトやオンラインの画像編集ツールを使って、あらかじめ同じサイズにそろえてからアップロードするのがおすすめです。
詳しい画像編集のコツは、画像の大きさや向きを編集したり、画像に文字を入れたりできる!超便利な画像編集ソフトの使い方の記事でご紹介しています