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

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

ページの複製について

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

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

URL、メタタグの設定

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

モビライズのURL、メタタグの設定

ページ説明文の設定

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

ページURLを変更

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

SERPsプレビュー確認

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


サイトのスタイル設定

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


メインカラーの設定

Mobiriseメインカラーの設定

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


ボタンとリンクカラー

Mobiriseボタンとリンクカラー

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


フォントのサイズと種類

Mobiriseフォントのサイズと種類

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


ボタンの角丸化をする

Mobiriseボタンの角丸化をする

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


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

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

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


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

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

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


ブロックパディング

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

Mobiriseブロックパディング

Top、Bottomの高さを指定する

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


Bootstrapブロックの設定

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

Mobirise Bootstrapブロックの設定

テキスト表記のOFF,ON

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

カード表示枚数

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

画像サイズを調整

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

ブロック背景の設定

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


ブロックの移動

Mobirise ブロックの移動

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


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

Mobirise

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


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

Mobirise

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

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

Mobirise

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


画像の高さが揃わない

Mobirise

画像とテキストが均等に配列されていないサイトはあまり見栄えはよくありませんよね。これは画像アスペクト比の違いが原因です。以下のような事象では画像アスペクト比を調整し解決します。CSS調整やフォトショップは不要です。

画像編集ツールを開く

Mobirise

対象画像をクリックし、左下にマウスを移動。
画像のペンアイコンをクリックし編集ツールを開きましょう。


統一するアスペクト比を選択

Mobirise

Crop imageが表示、Moreをクリックします。
4種類のアスペクト比が選べますのでここでは16:9のワイドを例にします。


トリミングするエリアを選択

Mobirise

つまみは16:9に設定されていますから、比率がズレることはありません。つまみを引っ張りながら切り取る位置を調整します。

Bootstrapのページ設定やスタイルについて理解できたところで、次はサイト内の回遊をスムーズにする、グローバルメニュー、ナビゲーションの設定を見ていきましょう。

モビライズでのグローバルナビ設定方法について