こんにちは。All About ホームページ作成ガイドの西村文宏です。
ウェブサイトを自由自在に作るには、自力でHTMLやスタイルシートを書くのが一番ですが、慣れないうちはなかなか難しいですよね。
PC用サイトだけならまだしも、スマートフォン独特のインターフェイスを備えたスマホ用サイトも作ろうと思うと、必要な知識が多くなって大変です。
そこで今回は、直接HTMLやスタイルシートを書くことなく、ソフトウェアのインストールすらも必要なく、ブラウザ上だけで簡単にスマホ用サイトを作れるサービスをご紹介いたします。
Jimdoは、ブラウザ上に表示されるツールだけを使って、無料で500MBまでのウェブサイトを作成・公開できるサービスです。
ドイツ製ですが、日本国内ではKDDIがサポートしており、日本語で利用できます。
基本的に、マウス操作だけで簡単にレイアウトやデザインを調整できます。
しかし、必要に応じてHTMLソースを直接編集することもできる、便利なサービスです。
PC用サイトの画面構成をベースにして作ることになりますが、同時にスマホ用サイトも生成されますから、スマホ用サイトの作成ツールとしても使えます。
以下に、Jimdoの使い方を簡単にご紹介いたしますので、ぜひ試してみてください。
1. Jimdoの日本語版ウェブサイトにブラウザでアクセスします。
2. 上部の入力欄に、希望のURL、メールアドレス、パスワードを入力します。
3. 利用規約を承認するチェックボックスにチェックを入れてから、「無料ホームページを登録！」ボタンをクリックします。
4. スパム防止用のCaptcha（歪んだ文字の画像）が表示されるので、そこに見えている文字列を入力して、再度「無料ホームページを登録！」ボタンをクリックします。
5. すると、「Jimdoにご登録いただきありがとうございます。」と表示され、入力したメールアドレス宛に確認メールが届くので、受信します。
6. メール本文内に記載された「メールアドレスを確定」というボタンをクリックします。ブラウザに、「あなたのメールアドレスが確定されました。」と表示されれば、アカウントの開設は完了です。
7. そのまま「さあホームページを編集しましょう」というボタンをクリックすると、ログインページへ移動できます。
以下のログインページをブックマークに登録しておくと便利です。
自分のドメイン名( xxxx.jimdo.com など )と、
パスワードを入力して「ログイン」ボタンをクリックします。
編集したい箇所にマウスを載せると、編集用のボタンなどが表示されます。本文そのものをクリックすれば、エディタが現れて、その場で編集できます。なお、右端には各種設定アイコンの並ぶメニューバーが表示されています。
この時点で、既にウェブサイトは一般に公開されています。ブラウザに自分のJimdoのURLを入力すれば、表示を確認できます。
なお、スマートフォンで閲覧すると、次のように見えます。（デザインは後で変更できます。）
まずはページのタイトルを設定しましょう。以下のように操作してください。
1. .右端に並んでいるアイコンの中から「SEO」アイコンをクリックします。
2. すると、図3のようにページタイトルや説明文が入力できるようになります。
3. 入力後に「保存」ボタンをクリックすると、保存されます。
なお、全ページに共通する「サイト名」は、以下の手順で登録できます。
ここに入力した名称は「サイト名」として扱われ、全ページで使われます。
1. 右端に並んでいるアイコンの中から「設定」アイコンをクリックします。
2. たくさん出てくるアイコンの中から「ページタイトル」アイコンをクリックします。
3. すると、下記のような画面になりますので、自由な名称を入力します。
4. 最後に「保存」ボタンを押して保存します。
Jimdoには、豊富にページデザインが用意されていて、いつでも自由に変更できます。
なお、PC用デザインとスマホ用デザインは、別々に指定します。まず、PC用サイトのデザインを変更するには、以下のように操作します。
1. 右端に並んでいるアイコンの中から「レイアウト」をクリックします。
2. 下記の図のように様々なレイアウトが表示されます。（最初はF4193が選択済み）
3. 好きなレイアウトをクリックすることで、実際にそのレイアウトを適用できます。
レイアウトを切り替えると、ページの最上部に「新しいレイアウトを適用しますか？」と質問が表示されます。「はい」をクリックすればデザインが確定され、「いいえ」をクリックするとキャンセルされます。PC用サイトのデザインを変えても、スマートフォンで閲覧した場合のデザインは変わりません。
スマホ用サイトのデザインを変更するには、以下のように操作します。
1. 右端に並んでいるアイコンの中から「設定」アイコンをクリックします。
2. たくさん出てくるアイコンの中から「スマートフォン表示」をクリックします。
3. 図のように、スマートフォンでのプレビュー画面が表示されます。
4. 左側に表示されているデザイン一覧から好きなものを選ぶことで、スマホ用のデザインを変更できます。
※もし、何らかの設定画面が開いている場合には、左上の丸い[×]ボタンをクリックすることで、元の画面に戻れます。
編集したい箇所にマウスを載せると、下部や左端などに、編集用の各種ボタンが表示されます。
また、本文（文章）の修正であれば、表示されている文章を直接クリックするだけで、図のような編集領域が現れます。
ここで、自由に文字を入力したり、色を変更したり、リンクを作ったりできます。
編集が終わったら、編集領域の下部にある「保存」ボタンを押してください。
Jimdoでは、HTMLソースの直接編集も可能です。アフィリエイトを掲載したいなど、何らかのHTMLソースを直接記述する必要がある場合は、以下のように操作します。
1. 先ほどの図で見えている編集領域上部のツールバーには、右端に「HTML」と書かれたボタンがあります。それをクリックします。
2. すると、次の図のように「HTMLソースエディタ」が開き、自由にHTMLを編集できます。アフィリエイト用のHTMLソースをここに貼り付けると良いでしょう。
最初から「ホーム」・「プロフィール」・「お問い合わせ」の3ページが作られています。
これらのページには、ナビゲーションバー上のリンクをクリックすることで移動できます。
新しくページを追加したい場合は、ナビゲーションバー上にマウスを載せたときに表示される「ナビゲーションの編集」をクリックします。
すると、図9のように、ページの順序変更や新規追加ができるダイアログが表示されます。ここで「新規ページを追加」ボタンをクリックすると、ページを追加できます。
このように、ブラウザ上での操作だけで、簡単にウェブサイトが作成できます。500MBまでは無料で作れますので、ぜひ、試してみてください。
なお、右端のメニューから「？」アイコンをクリックすると、詳しいマニュアルが読めますので、そちらも参考にしてください。
ご注意ください
カテゴリーから探す
タグから探す