ホーム > サイトを作ってみよう > Step 08 編集操作の基礎知識

Step 08

基本的なページの制作・編集機能についてご案内します。

■ ページ内に配置できるもの

● 画像と文字が自由に配置

文字は「タイトル」文字と「テキスト」文字の2種類を配置できます。
「タイトル」はスタイルで<h2>という文字の設定（タグ）で入力され、「テキスト」は<p>という文字スタイル（タグ）で入力されます。
「タイトル」も「テキスト」も配置後に文字の太さを「太く」にしたり、「＋」ボタンでサイズを大きくしたり、「-」ボタンで縮小したり、「A」ボタンで自由な色に変更できます。

ブロックツールを使って左右を2つから5つまでブロックで分けることができます。
置し、横に追加するように設置すると2カラムになり、さらに横にツールを追加すると3カラムになります。
横にツールを追加する度にカラムは増えますが、スマホで見たときはカラムは無視され縦に並びます。
2カラム以上をスマホで見た際に横に並べて見せたいときは「アプリ」を追加する必要があります。

「ビルド」のツールの一番下のエリアに「アプリ」という欄があります。
「アプリを」をクリックするといろんな機能を持ったツールを追加することができます。
その中から「Column rock」というアプリを追加して、横並びで表示したいブロッグのいずれかの枠内に「Column rock」ツールを配置するだけでスマホサイズでも横並びに表示されます。

3分割したブロックの例
それぞれのブロック中は文字や画像等を自由に配置できます。
また、ブロック中にブロックを入れてレイアウトすることが可能です。

詳しくは「画像と文字の配置について」を御覧ください。

---

● 複数の画像スライドを配置

「スライドショー」ツールを配置して画像を読み込むだけで簡単にスライドが配置できます。
読み込む元画像の縦横比が同じ画像にすると表示が美しくなります。
ページ内であればブロックで分けた中にも配置できます。
スライドの表示サイズはブロック内に配置することで縮小させることができます。
詳しくは「複数画像をスライドで見せよう！」を御覧ください。

---

● ポートフォリオ（複数画像の一覧）を配置

「GALLERY」ツールを配置して複数の画像を読み込むとポートフォリオが完成します。
ポートフォリオの表示形式は画像が横に2〜6個まで表示数を設定できたり、正方形にトリミングして綺麗に並べたりできます。

画像をクリックするとLight Boxのようにスライドショーとして見せる事ができます。
詳しくは「複数画像をポートフォリオで見せよう！」を御覧ください。

---

● 動画を配置

動画には2種類の配置方法があります。

1. 「YouTube」ツールを配置して、YouTubeにアップされている動画を選択して「共有」ボタンで表示されたコードをコピペして配置する方法。
表示サイズは自動・HD・極大・大・中・小から選んで配置できます。

外部のデータを読み込むため、動画の容量の制限がありませんが、動画がYouTubeで削除されると表示されなくなる場合があります。

タイの生命保険会社のCMで「泣けるCM」としてアクセスの多い画像を配置してみました。

2.「HD VIDEO」ツールを使って直接高解像度の動画を配置できます。（但しProプラン以上の有料プラン契約した場合のみ）
YouTube等にアップせず、サイト内でしか観覧できない動画を配置できます。動画はアップ後、暗号化されて表示されるためコピー（ダウンロード）できなくなります。（動画を保護できます）
サイズはブロック内に合わせてキレイに表示されます。

動画はVimeoにアップされ保護されますので、YouTubeのようにコピーされたり、突然非表示になったり、削除されてしまう心配がありません。

当方で制作したWeeblyでの画像配置方法についての案内動画を「HD VIDEO」ツールで配置してみました。

---

● 音声ファイルの配置

「AUDIO」ツールを配置してMP3の音声ファイルをアップロードすることができます。
配置方法は「HD VIDEO」ツール配置と同様でアップロードできるファイルは.MP3の音声ファイルだけになります。（但しProプラン以上の有料プラン契約した場合のみ）

---

● リンクボタンの配置

「BUTTON」ツールを配置するだけでボタンを設置できます。ボタンは選んだデザイン毎に色（2パターン）や形が設定されています。
CSSを理解していればカスタマイズすることができます。

リンク先もサイト内や外部サイトページ、またはアップした書類のダウンロード、宛先を指定したメール送信（メーラーが立上がります）などが設定できます。

ボタンテキスト

「ボタンテキスト」の文字を自由に差替えることができます。
※このボタンにはリンクは設定していません。

---

● Google Adsense（広告収入）の配置

「GOOGLE ADSENSE」ツールを配置すれば自動的にサイズに合ったGoogleの広告が配置できます。

※広告収入を得るためには事前にGoogle Adsenceに登録してIDを取得し、広告を配置するサイトにIDを登録する必要があります。

詳しくは「Google Adsenseの配置」を御覧ください。

---

● 地図（Google Map）の配置

「MAP」ツールを配置して、住所を入力するだけで、簡単にGoogle Mapの地図を配置できます。

詳しくは「Google Mapの配置」を御覧ください。

---

● お問合せフォームの配置

「CONTACT FORM」ツールをどのページでも好きな場所に配置することができます。
フォームの内容は各種お申込みやお問合せ、ご注文等様々な内容を設定することができます。

配置する場所も自由な場所に配置できます。
無料プランの場合でも5項目まで設置でき、送信さみのメールアドレスも複数設定できます。
また、送信後に表示されるページの文言設定、または送信後に見せたいページを作成しておけばそのページに移動させることができます。

有料プランのPro以上を申し込むと、指定したページにパスワードを設定できるため、メールアドレスを登録した方にパスワードを伝えてアクセスできる会員向けのようなページも作成できます。

お問合せフォームの配置についての詳しい情報は「お問合せフォームの配置」を御覧ください。

※こちらはサンプルフォームですので「送信」ボタンを押しても送信されません。

---

● アンケートの設置について

「SURVEY」ツールをどのページでも好きな場所に配置することができます。

知りたい項目設定するだけで、様々なアンケートへの回答フォームを作ることができます。
無料プランの場合でも5項目まで設置でき、送信さみのメールアドレスも複数設定できます。
また、送信後に表示されるページの文言設定、または送信後に見せたいページを作成しておけばそのページに移動させることができます。

有料プランのPro以上を申し込むと、指定したページにパスワードを設定できるため、メールアドレスを登録した方にパスワードを伝えてアクセスできる会員向けのようなページも作成できます。

お問合せフォームの配置についての詳しい情報は「アンケートフォームの配置」を御覧ください。

---

● Googleカレンダーの配置

Googleでアカウントを取得（登録）するとどなたでも無料で利用できるGoogleのサービスにカレンダー機能があります。
自分の様々な案件を個別にGoogleカレンダーに掲載することができます。
お店の営業時間だけのカテゴリーを登録すれば、お店の営業時間だけのカレンダーを好きな場所に設置することができます。

Googleカレンダーの設置方法についての詳細は「Googleカレンダーの配置」をご覧ください。

---

● その他オリジナルHTMLコードの配置

「EMBED CODE」ツールを配置すると、表示させる文字の替わりに、HTMLコードを直接打ち込んで自由なデザインを表示させることができます。
例えば、枠付で背景色のあるボックスを作り、中にHTMLコードで文字を表示させたり、表などのテーブルもコードで表現することができます。
その部分だけ、コーディング技術のあるプロに頼めば、高度な表現を入れることができるようになります。

表のサンプル

スタイルデータ

長さ

****

カラー

****系

イメージ

****

メニュー内容

****
*****

---

● ページ内検索ボックスの配置（Pro以上の有料版のみ）

PRO以上の有料版にアップグレードすると、好きな場所にGoogle検索エンジンを利用したサイト内検索のBOXを配置することができます。

※実際にこのサイト内でのキーワード検索ができます。

---

● ダウンロードできる書類の配置

書類データをアップロードすることができます。
文章の中の特定の単語や文章を選択して「リンク」設定をする時や、画像を配置して画像に「リンク」設定をする際に、リンク先のサイトのURL登録以外に、書類データのダウンロードを選択する事ができます。
それを選択するとダウンロードさせたい書類のアップロード画面が表示され、PDFやエクセルの書類、ワードの書類などをアップロードすることができます。

ページの追加･削除