機能マニュアル

基本的な使い方

記事を書くボタンボックスを活用する

ボックスTYPEの「ボタンTYPE」の使い方を解説します。
「ボタンTYPE」は、ページ内に横長の目立つボタンを設置できる機能です。閲覧者を別のページにいざなうなど、「行動」を促したい時に便利です。

ボックスTYPEが利用できる条件

この機能を利用するためには、対応しているデザインを選択する必要があります。
対応しているデザインは以下となります。


デザイン種別 アイコン表示 利用できるプラン
ハイグレードデザイン ・トライアル(無料体験中)
・スタンダードプラン
ボックスTYPE対応デザイン ・トライアル(無料体験中)
・ライトプラン
・スタンダードプラン
「仕上がり」はパソコンでチェック

「ボックスTYPE」の「2列TYPE」、「3列TYPE」は、パソコンで閲覧した際にレイアウトが2列、3列になる機能です。「ボックスTYPE」を利用したページの仕上がりをチェックしたい場合、パソコンでご覧ください。

※「ボックスTYPE」の「2列TYPE」、「3列TYPE」を利用したページを、スマートフォンから閲覧した場合、記事ボックスは縦一列に並びます。

ボタンTYPEの活用例

[ボタンTYPE]を活用すると、以下のようなレイアウトが簡単に実現できます。
※下記はパソコンで閲覧した時のレイアウトです。


※サンプル:ハイグレードデザイン(biz_class_blue)使用


例)見出し‐ お問い合わせ
  本文 ‐ お問い合わせ前の方に読んでほしい内容
  ボタンの言葉‐「お問い合わせはこちら」(ボタンを押すと、お問い合わせフォームに飛ぶ)

以下、このようなレイアウトの作り方をご説明します。

[新しい記事ボックスを追加する]をクリック


管理画面の左メニューから[トップページの編集]をクリックします。

画面を下にスクロールすると、『記事ボックスの追加と編集』のエリアがありますので、[新しい記事ボックスを追加する(一番上に追加)] をクリックします。

※各ページに記事を追加したい場合は、左メニューから[各ページの編集]をクリックしてください。
操作方法は「記事を書いてみよう」から確認できます。

[ボタンTYPE]をクリック


「新しい記事ボックスを追加する(一番上に追加)」をクリックすると、追加するボックスのタイプを選択する画面が表示されます。

[ボタンTYPE]をクリックします。

※前の画面に戻りたい場合は、右上の「×」マークをクリックしてください。

[見出し]を入力


[ボタンTYPE]をクリックすると、『記事ボックスの追加と編集』画面が表示されます。

[見出し]欄には、ボックス全体のタイトル(見出し)を入力します。このあと設定するボタンが、どのような内容かを簡潔に伝えましょう。

例)お問い合わせはこちら、資料請求のご案内、料金について、サービス内容を見る、など

[本文]を入力


[本文]欄には、「本文を入力してください」と表示されていますので、[本文]を入力します。

ボタンを設定する


ボタンを表示するには、「表示する」にチェックを入れ、下の2つの入力欄に内容を入力してください。


「ボタンの文字を入力してください」

ボタンに表示される文字のこと。
例) 詳細はこちら、お問い合わせはこちら、詳しく見る、無料で相談する、など


「リンクURLを入力してください」

ボタンをクリックしたときに移動するページのURL(アドレス)。
例)
・お問い合わせはこちら というボタンの文字に対して「お問い合わせフォーム」のページのURL
・詳細はこちら というボタンの文字に対して、次に閲覧者に読んでほしいページのURL

※ボタンを表示しない場合は、「表示しない」を選択してください。
その際、ボタンの文字とURLの入力欄は空欄のままで問題ありません。

設定内容を保存してホームページを確認する


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



画面右上の[プレビュー]ボタンをクリックし、記事が正しく追加されているか確認します。
※下記はパソコンで閲覧した時のレイアウトです。


※サンプル:ハイグレードデザイン(biz_class_blue)使用

ホームページのファビコンを設定する

ロゴマークを表示させる

外部フォームを利用する

Googleアナリティクスの設定

Googleマイビジネスに登録しよう

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

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

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

動画URLを無料で入手

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

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

個別制作サポートの詳細

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

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

無料お試しはこちら