機能マニュアル

記事を書いてみよう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列ボックスに画像を設定する場合は、画像の「縦横サイズ」をそろえておくと、見た目が整ってキレイに表示されます。 サイズがバラバラだと、行の高さがずれて表示されてしまい、ページ全体の印象もチグハグに。

画像編集ソフトやオンラインの画像編集ツールを使って、あらかじめ同じサイズにそろえてからアップロードするのがおすすめです。

詳しい画像編集のコツは、画像の大きさや向きを編集したり、画像に文字を入れたりできる!超便利な画像編集ソフトの使い方の記事でご紹介しています

Googleビジネスプロフィールに登録しよう

外部フォームを利用する

Googleタグマネージャーを設置する

アクセス解析を見る

無料オンラインサポート実施中

\先に知っておけば損しない/

ホームページ開設 無料動画講座

動画URLを無料で入手

\ホームページ制作を個別にサポート/

とりあえずHP 個別制作サポート

個別制作サポートの詳細

簡単に自分で作れるホームページ作成ソフト「とりあえずHP」

簡単HP作成ソフト「とりあえずHP」

無料お試しはこちら