モビライズページ制作方法

完全無料のホームページ作成ツールモビライズのページ制作法

まずはグローバルメニューフッターの設置。はじめにサイト内全ての共通パーツ、グローバルナビゲーションを設置します

Mobirise上の設定	解説
1.Create NewPageをクリック	メニューPages内からアクセスします。
2.ブロック一覧を表示	ページ右下下部の赤色＋ボタンを押下します。
3.ブロックからヘッダーを選択	ブロック一覧が表示されます。一番上のMenu（グローバルナビゲーション）をクリックします。

メニューをドラッグしページ上部へ配置します。（白テキストの場合まだページ上では見えません。）

グローバルメニューをサイト全体の共通化パーツとして設定しますか？と聞いてくるので、OKを押下。

次にHeadersをクリックしてみましょう。様々なメインイメージレイアウトが並んでいます。お気に入りのものをドラッグし配置してみましょう。

グローバルナビゲーション同様、フッターメニューも設置します。こちらも全ページで共通パーツとなるようにグローバル化の確認では、OKを押下します。これによりメニューが増えた場合でも各ページごとの修正は不要になります。（テーマにより機能有無が異なる）

上記の手順で、モビライズでのページ制作のベースは整いました。
ここからは作成するコンテンツに応じて、最適なブロックを挿入し編集していく手順となります。

編集できるブロックの種類は大きく以下６つのパターンに分類できます。

画像やビデオ設置、ギャラリーなどが作成可能です。

テキスト中心の構成。イメージ＋画像のパターンも豊富にあります。

テーブル表や価格表、時間表記などが利用可能です。

進行度を示すプログレスをパイチャートで、％表記の棒グラフなど美しく表現できます。

ページ上に簡単にフォーム設置が可能です。

FAQなどに最適なアコーディオンや情報の格納に便利なタブ表示など。

Mobirise上の設定	解説
1.記事系ならArticleを選択	文章を中心とした記事を書くのであればArticleを選択しましょう。もちろん画像を併用して華やかなリスティングに彩ることも可能です。
2.ソフト上で直接テキストを変更	サンプルの英字テキストが入っていますのでダブルクリックし変更します。テキストは太字やイタリックなどの装飾が可能です。部分的にリンクを張ることもできます。
3.文字サイズ・位置の調整	テキストを全体選択ではなく、文字と文字の間を選択すると文字のカラー変更やサイズの変更が可能です。右寄せセンタリングなどAlignも調整できます。

テキストのスタイル指定について

テキストサイズはペンアイコンをクリックすることで調整できます。フォントのサイズ指定が自由に行えます。

使いたいイメージがすでにPC内にある場合、Browse Computerから画像をアップロードしましょう。アップした画像はソフトウェア内のSite Libraryに保存されます。

画像の無料ダウンロードサイトPixabay.comと連携しています。ソフト内で好きなキーワードから著作権フリーの画像ライブラリを利用できます。ただし英語で検索するようにしましょう。

選択した画像のトリミングや縮尺率の変更（16:9など）もソフト内で行えますのでPhotoshop等のソフトウェアも不要です。オリジナルの画像はソフトに残らず編集後の画像が保存されます。

YouTube,VImeoのURLを貼り付けるだけでサイトに動画の埋め込みが可能

Mobirise上の設定	解説
1.ビデオURLの入力	YouTubeまたはVimeoのURLを入力します。
2.アスペクト比の設定	標準画面かワイド画面かの選択を行います。
3.自動再生、ループの設定	チェックボックスのON,OFFだけで動画再生ルールの設定が簡単に行えます。

Bootstrapのブロック概要や種類が理解できたところで、ページの複製やスタイルの調整について設定法を見ていきましょう。

モビライズでのスタイル、ブロック設定について