難しい知識がなくてもロリポップ!スタジオなら簡単にホームページを作れます – その1

ロリポップ!スタジオは、ロリポップ!のサーバー契約者が利用できる高機能なホームページ作成ツールです。詳しくはこちらを参考にしてください。

何回かに分けてロリポップ!スタジオの使い方を紹介します。

ロリポップ!スタジオの起動

ロリポップ!スタジオ(以下、スタジオ)を、ロリポップ!のコントロールパネル(ユーザー専用ページ)から起動します。

テンプレートの選択

スタジオは基本的にテンプレート(デザインの雛形)を基にホームページを作成するツールです。もちろんテンプレートを使用せずに、ゼロから作成することも出来ますが、操作に慣れるにはまずテンプレート機能を試してみるべきでしょう。

テンプレートには幾つかの種類があります。テンプレートのサンプルはこちらを参考にしてください。

PCサイト専用
サイズ(横幅)が固定されています。
レスポンシブ対応
画面のサイズに応じてレイアウトが動的に変化します。スマートフォンやタブレットでの閲覧に適しています。

これらに「BiND Press」と呼ばれるブログ機能の有無があります。ブログやニュースなど、定期的に記事を投稿するならこの機能が必須です。

スタジオはデザインとコンテンツを一緒に管理します。WordPressのようにデザインを手軽に変更できないため、最初のテンプレート選びは重要です。

ここでは、「レスポンシブ」と「BiND Press」に対応するテンプレート「YAMANO Kimono school」を選択します。テンプレートによっては複数のベースカラーがありますが、後から「Dress」と呼ばれる機能で変更できるためどれでも構いません。

編集モードの選択

スタジオには「スマートモード」と「エディタモード」の2種類の編集モードが存在します。テンプレートのテキストや画像を置き換えるだけなら「スマートモード」、テンプレートのカスタマイズを行うなら「エディタモード」となります。

操作に慣れるまではスマートモードを選択するべきでしょう。スマートモードを選択しておけば、後からエディタモードに変更できます。

注意
エディタモードからスマートモードへは変更できません。

全体の印象を変更する(Dress機能)

編集モードを選択すると「サイトエディタ」と呼ばれる、コンテンツを編集する画面に移動します。ここでテンプレートを基にテキストや画像の編集(置き換え)を行います。

選択したテンプレートは「着付教室」のホームページであり、かなり和風な印象です。ベースカラーを変更する「Dress機能」で全体的な印象を変えてみましょう。

画面右上にあるDressボタンをクリックします。

いくつもの設定(Dressテンプレート)が用意されているので、気になるものを選択してみましょう。最初のテンプレート選択時に用意されていた、他のベースカラーもここで選択できます。

ユーザー自身でオリジナルの設定を作成できます。下記の項目に対応しており、リストから選択するだけなので初心者でも(比較的)簡単です。操作方法は簡単ですが、基本的なCSSの知識は必要です。

デザイン設定
文字色 / 文字サイズ / 文字の太さ / フォント / 斜体 / テキストシャドウ / 文字装飾 / 文字間隔 / 行の高さ / インデント / 文字揃え(ヨコ位置) / タテ位置 / 改行 / 禁則処理 / 折り返し / リスト記号 / リスト記号の位置 / 背景色 / 背景画像 / 背景折り返し / 背景位置 / 背景固定 / 背景サイズ / ボーダー
高度な設定
display / opacity / transition / transform / border-radius / margin / padding / width / height / box-shadow / float / overflow

「White」を選択すると背景がなくなりシンプルな印象となります。さすがにDress機能だけでは和風っぽさを消すことはできませんね。

これをベースに、レンタルサーバーを紹介するホームページを作成していきます。それでは、上部メニューの「ページを編集する」をクリックして、コンテンツ編集画面へ移動しましょう。

ヘッダーの編集

スタジオは「ブロック」単位で構成されています。例えば、ヘッダー、フッター、メイン、ビルボード、サイドなどがあります。もちろテンプレートごとに異なります。

各ブロックを選択すると左上にメニューが表示されます。ブロック位置の変更や、ブロックに含まれるコンテンツの編集が可能です。「編集」をクリックしてみましょう。

ヘッダーを構成する設定を編集できます。それでは画像を置き換えてみましょう。テンプレートの画像を選択して、右側に表示される編集メニューの「画像変更」をクリックします。

画像の選択ウィンドウが表示されます。置き換えたい画像をドラッグ&ドロップすると自動的にアップロードされます。アップロードした画像を選択して「選択」をクリックします。

スタジオにはSiGN Proと呼ばれる画像編集機能があります。アップロード後に画像を調整したい場合に役立つでしょう。画像一覧画面で「編集」をクリックするとSiGNが起動します。

これでヘッダーの画像が置き換わりました。それでは背景画像も変更してみましょう。先ほどと同様にブロックの編集画面に移動します。

背景に関する機能は「設定」にあります。背景画像のリストにある「ファイルを選択…」を選択します。

予め幾つものデザインが用意されています。もちろんユーザー自身で用意した画像も、アップロードすることで利用できます。

これでヘッダーの置き換えが完了しました。テンプレートと比較してかなり印象が変わったのではないでしょうか。

次の記事へ続きます。


利用画像
Logo Open Stock

関連記事