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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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