Bootstrapモビライズブロックスタイル設定

1. ページの複製について
2. URL、メタタグの設定
3. サイトのスタイル設定
4. ブロックパディング
- - 4.3.1. Top、Bottomの高さを指定する
5. Bootstrapブロックの設定

ページの複製について

モビライズではコンテンツページが仕上がると、複製してのページ量産が大変便利です。

Mobirise上の設定	解説
1.左メニューからPagesを選択	コピー元となるページを選択し、コピーアイコンのClone Pageをクリックします。
2.ページ名を入力	すぐ下に複製されたページが出来上がります。まずはページタイトルだけリネームしておきましょう。
3.ブロックからヘッダーを選択	ブロック一覧が表示されます。一番上のMenu（グローバルナビゲーション）をクリックします。

URL、メタタグの設定

ページごとのメタタグの設定を行います。検索エンジンからの流入増加に重要な意味合いを持ちますので、漏れることなく設定しておきましょう。

ページ説明文の設定

歯車アイコンをクリックするとページ設定画面が開きます。ページタイトルは先のステップで変更しましたのでここではPage Description（ページ説明文）を入力します。この説明文はGoogle検索の結果ページに表示される可能性があり大切なテキストです。
１００文字前後で簡潔にわかりやすいページ説明文を記述しましょう。

ページURLを変更

ページURLも合わせて変更しておきましょう。（例：フォームページなら、form.htmlなど）決まっていない場合には公開前でもいいのですが、忘れがちとなりやすいので気をつけてください。デフォルトでは、page**.htmlのように**に数字が入ることになります。

SERPsプレビュー確認

検索エンジン上での表示イメージが確認できます。説明文やURLが最適かどうか、”desktop”と”mobile”タブを切り替えてチェックするようにしてください。

サイトのスタイル設定

フォントやカラーテーマを設定できます。最初に設定してもいいのですが、１ページ作成してからの方がイメージは掴みやすいと思います。ソフトウェア右下、ブロックの追加＋ボタンの上に青いペンアイコンがありますのでクリックします。

メインカラーの設定

サイトのメインカラーを設定します。グリッドで選べるほか、CMYK値を直接指定することもできます。
白と黒のナビゲーションがベースとなります、ここで基調色を決定します。Sitesメニューからも指定が可能です。

ボタンとリンクカラー

基調色が決まったら、サブで使用する色を決めます。最大５色が選択可能です。あまり多色使いになるとサイトのトーン＆マナーが乱れますので、補色として１〜２色を考えるとよろしいかと思います。

フォントのサイズと種類

H1（Title1）やH2(Title2)でどのフォントを使うかを指定できます。サイズ調整はグリッドで指定できます。一度ページを作成してみると見出しが大きすぎるなどがわかりますので、ここでコンマ１(.1)単位で調整します。サイト全体に反映されますので注意しましょう。

ボタンの角丸化をする

Rounde ButtonsをONにすると、入力ボックスや各種ボタンが角丸になります。柔らかい印象を取り入れたいサイトには有効なエフェクトですね。

ページ上部へ戻る固定ボタン

Scroll to TOP ButtonをONにします。どのページでもページ下部に矢印アイコンが配置されいつでもページ最上部に移動できます。ユーザビリティ上必要な機能ですね。

ブロック間のアニメーション効果

Animation on ScrollのトグルをONにするとブロック間のスクロールでアニメエフェクトになります。画像やテキストがふわっと浮いてくるようなイメージですね。

ブロックパディング

サイトのスタイルを印象づけるパディング。
モビライズではCSSを触ることなくグリッドで調整可能です。

Top、Bottomの高さを指定する

グリッドを動かしてみるとわかりますが、ブロックの高さ調整が簡単に行えます。
前のブロックとコンテンツが関連付く場合にはTopのパディングを1にしたり、コンテンツの終わりでは余白を大きく取るなど直感的に操作できます。

Bootstrapブロックの設定

ブロックを選択し歯車アイコンを押下するとそのブロックで設定可能なメニューが表示（ブロックにより異なります）されます。難しい英語表記はありませんのでまずは触って慣れて行きましょう。
ここでは代表的なブロックの調整メニューをご紹介します。

テキスト表記のOFF,ON

紹介するコンテンツによって見出しやサブタイトル、詳細説明が必要な場合があります。これらのON,OFFがトグルで簡単に調整できます。

カード表示枚数

コンテンツによっては、同じフォーマットで繰り返し表記した方が効果的です。カードの枚数を調整することでコンテンツをわかりやすくします。

画像サイズを調整

テキストの分量によっては画像を小さくした方がいいかもしれません。また説明画像重視であればMedia Sizeを大きくしましょう。

ブロック背景の設定

背景色を単色か画像を背景にするのか動画を配置するのか選択できます。画像の場合は表示されるテキストを読みやすくするOpacityが現れます。

ブロックの移動

ブロック選択時に表示される↑↓アイコンをクリックしながらブロックごと移動します。
ブロックを掴みながらスクロールしていくイメージでコンテンツの移動がかんたんに行えます。

繰り返し使うブロックは保存可能

頻繁に使うbootstrapブロックはユーザーブロックに保存しましょう。別のページでも繰り返し使うことができます。名称は日本語でリネーム出来るほか、アプリ上で検索も可能です。

不要なブロックはゴミ箱へ削除

プレビューしながらページ制作を進行

昨今のウェブアクセスではモバイルからのアクセスが大半を占めるサイトが少なくありません。
サイト制作ではデスクトップビューで進めるのが効率的ですが、モバイルユーザーからはどう見えるのか？逐次チェックしながら進めましょう。
プレビューはアプリケーション上段の４つのアイコンから適宜切り替えることが可能です。