各業界のプロに学ぼう「本じゃ読めないアフィリエイト講座」

All About ホームページ作成ガイド 西村 文宏
All About ホームページ作成ガイド
西村 文宏 (ニシムラ フミヒロ)
2001年より、その道のプロ(専門家)が情報発信する生活総合情報サイトAll About内で、「ホームページ作成」ガイドサイトを担当。ウェブ製作に関して毎月数本の記事を連載。HTMLの記述方法から、スタイルシートやJavaScriptの活用方法、アクセス数向上テクニックなど、2011年現在までに300本近くの記事を公開している。著書として、「プロ顔負けのホームページ作成術」・「SEO・SEM使いこなしテクニック」などがあり、最近は作家デビューも果たしている。
コーポレートサイトhttp://allabout.co.jp/gm/gt/1053/
講師PR
RSSフィードを自動生成するフリーソフト「Fumy RSS & Atom Maker」が人気です!『にししふぁくとりー』
http://www.nishishi.com/

ブラウザ上でスマホ用サイトを簡単に作成できるサービス(第1回)

2014/04/22

 

こんにちは。All About ホームページ作成ガイドの西村文宏です。

 

ウェブサイトを自由自在に作るには、自力でHTMLやスタイルシートを書くのが一番ですが、慣れないうちはなかなか難しいですよね。

 

PC用サイトだけならまだしも、スマートフォン独特のインターフェイスを備えたスマホ用サイトも作ろうと思うと、必要な知識が多くなって大変です。

 

そこで今回は、直接HTMLやスタイルシートを書くことなく、ソフトウェアのインストールすらも必要なく、ブラウザ上だけで簡単にスマホ用サイトを作れるサービスをご紹介いたします。

 

●「Jimdo」(ジンドゥー)

 

Jimdoは、ブラウザ上に表示されるツールだけを使って、無料で500MBまでのウェブサイトを作成・公開できるサービスです。

 

ドイツ製ですが、日本国内ではKDDIがサポートしており、日本語で利用できます。

基本的に、マウス操作だけで簡単にレイアウトやデザインを調整できます。

 

しかし、必要に応じてHTMLソースを直接編集することもできる、便利なサービスです。

 

PC用サイトの画面構成をベースにして作ることになりますが、同時にスマホ用サイトも生成されますから、スマホ用サイトの作成ツールとしても使えます。

以下に、Jimdoの使い方を簡単にご紹介いたしますので、ぜひ試してみてください。

 

 

●「Jimdo」にアカウントを新規開設する

 

1. Jimdoの日本語版ウェブサイトにブラウザでアクセスします。

 


Jimdoの日本語版ウェブサイトはコチラ


 

2. 上部の入力欄に、希望のURL、メールアドレス、パスワードを入力します。

 

3. 利用規約を承認するチェックボックスにチェックを入れてから、「無料ホームページを登録!」ボタンをクリックします。

 

4. スパム防止用のCaptcha(歪んだ文字の画像)が表示されるので、そこに見えている文字列を入力して、再度「無料ホームページを登録!」ボタンをクリックします。

 

5. すると、「Jimdoにご登録いただきありがとうございます。」と表示され、入力したメールアドレス宛に確認メールが届くので、受信します。

 

6. メール本文内に記載された「メールアドレスを確定」というボタンをクリックします。ブラウザに、「あなたのメールアドレスが確定されました。」と表示されれば、アカウントの開設は完了です。

 

7. そのまま「さあホームページを編集しましょう」というボタンをクリックすると、ログインページへ移動できます。

 

 

●「Jimdo」にログインする

 

以下のログインページをブックマークに登録しておくと便利です。

 


Jimdoログインページ


 

自分のドメイン名( xxxx.jimdo.com など )と、パスワードを入力して「ログイン」ボタンをクリックします。

 

 

●「Jimdo」の画面構成

 

Jimdoの画面は、図1のように、ほぼ実際のウェブページの表示と同じです。

 

編集したい箇所にマウスを載せると、編集用のボタンなどが表示されます。本文そのものをクリックすれば、エディタが現れて、その場で編集できます。なお、右端には各種設定アイコンの並ぶメニューバーが表示されています。

 

≪図1≫ http://aribsd.sakura.ne.jp/info/30/im30-j1.png

 図1

 

この時点で、既にウェブサイトは一般に公開されています。ブラウザに自分のJimdoのURLを入力すれば、表示を確認できます。

 

なお、スマートフォンで閲覧すると、図2のように見えます。

(デザインは後で変更できます。)

 

≪図2≫http://aribsd.sakura.ne.jp/info/30/im30-j2.png

図2

 

 

 

●ウェブサイト名などの基本情報を設定する

 

まずはページのタイトルを設定しましょう。以下のように操作してください。

 

 1.右端に並んでいるアイコンの中から「SEO」アイコンをクリックします。

 

2. すると、図3のようにページタイトルや説明文が入力できるようになります。

 

3. 入力後に「保存」ボタンをクリックすると、保存されます。

 

 

≪図3≫ http://aribsd.sakura.ne.jp/info/30/im30-j3.png

図3

 

 

なお、全ページに共通する「サイト名」は、以下の手順で登録できます。

 

ここに入力した名称は「サイト名」として扱われ、全ページで使われます。

 

 1. 右端に並んでいるアイコンの中から「設定」アイコンをクリックします。

 2. たくさん出てくるアイコンの中から「ページタイトル」アイコンをクリックします。

 3. すると、図4のような画面になりますので、自由な名称を入力します。

 4. 最後に「保存」ボタンを押して保存します。

 

 

≪図4≫ http://aribsd.sakura.ne.jp/info/30/im30-j4.png

図4

 

 

●デザイン(レイアウト)を選ぶ

 

Jimdoには、豊富にページデザインが用意されていて、いつでも自由に変更できます。

 

なお、PC用デザインとスマホ用デザインは、別々に指定します。まず、PC用サイトのデザインを変更するには、以下のように操作します。

 

 1. 右端に並んでいるアイコンの中から「レイアウト」をクリックします。

 2. 図5のように様々なレイアウトが表示されます。

(最初はF4193が選択済み)

 3. 好きなレイアウトをクリックすることで、実際にそのレイアウトを適用できます。

 

≪図5≫http://aribsd.sakura.ne.jp/info/30/im30-j5.png

図5

 

 

レイアウトを切り替えると、ページの最上部に「新しいレイアウトを適用しますか?」と質問が表示されます。「はい」をクリックすればデザインが確定され、「いいえ」をクリックするとキャンセルされます。PC用サイトのデザインを変えても、スマートフォンで閲覧した場合のデザインは変わりません。

 

スマホ用サイトのデザインを変更するには、以下のように操作します。

 

1. 右端に並んでいるアイコンの中から「設定」アイコンをクリックします。

2. たくさん出てくるアイコンの中から「スマートフォン表示」をクリックします。

3.  図6のように、スマートフォンでのプレビュー画面が表示されます。

4. 左側に表示されているデザイン一覧から好きなものを選ぶことで、スマホ用のデザインを変更できます。

 

 

≪図6≫http://aribsd.sakura.ne.jp/info/30/im30-j6.png

図6

 

 

 

●ページの中身を作る

 

※もし、何らかの設定画面が開いている場合には、左上の丸い[×]ボタンをクリックすることで、元の画面に戻れます。

 

編集したい箇所にマウスを載せると、下部や左端などに、編集用の各種ボタンが表示されます。

 

また、本文(文章)の修正であれば、表示されている文章を直接クリックするだけで、図7のような編集領域が現れます。

 

ここで、自由に文字を入力したり、色を変更したり、リンクを作ったりできます。

編集が終わったら、編集領域の下部にある「保存」ボタンを押してください。

 

≪図7≫ http://aribsd.sakura.ne.jp/info/30/im30-j7.png

図7

 

 

 

 

●アフィリエイトのHTMLソースを掲載する

 

Jimdoでは、HTMLソースの直接編集も可能です。アフィリエイトを掲載したいなど、何らかのHTMLソースを直接記述する必要がある場合は、以下のように操作します。

 

1. 先ほどの図7で見えている編集領域上部のツールバーには、右端に「HTML」と書かれたボタンがあります。それをクリックします。

 

 2. すると、図8のように「HTMLソースエディタ」が開き、自由にHTMLを編集できます。アフィリエイト用のHTMLソースをここに貼り付けると良いでしょう。

 

≪図8≫ http://aribsd.sakura.ne.jp/info/30/im30-j8.png

図8

 

 

●ページを移動・追加する

 

最初から「ホーム」・「プロフィール」・「お問い合わせ」の3ページが作られています。

 

これらのページには、ナビゲーションバー上のリンクをクリックすることで移動できます。

 

新しくページを追加したい場合は、ナビゲーションバー上にマウスを載せたときに表示される「ナビゲーションの編集」をクリックします。

 

すると、図9のように、ページの順序変更や新規追加ができるダイアログが表示されます。ここで「新規ページを追加」ボタンをクリックすると、ページを追加できます。

 

≪図9≫ http://aribsd.sakura.ne.jp/info/30/im30-j9.png

図9

 

このように、ブラウザ上での操作だけで、簡単にウェブサイトが作成できます。500MBまでは無料で作れますので、ぜひ、試してみてください。

 

なお、右端のメニューから「?」アイコンをクリックすると、詳しいマニュアルが読めますので、そちらも参考にしてください。

 

次回は、今回ご紹介した「Jimdo」よりも、さらに簡単にスマホ用サイトを作成できるサービスをご紹介いたします。

 

 

 

Loading...
このエントリーをはてなブックマークに追加      mixiチェック
続きを読む>>
続編
2014.04.23
ブラウザ上でスマホ用サイトを簡単に作成できるサービス(第2回)

▲ページトップへ戻る

1CLICKアンケート!!
Loading...
1CLICKアンケート!!
アフィリエイトで稼ぐための心構え3カ条
1.「稼ぐ気持ち」を出しすぎない
稼ぎたい気持ちが全面に出ていると、ユーザーはサイトに対し良い印象を持ちません。
2.「納得できる方法」で稼ぐ
報酬額ばかりで選ばず、自分自身がお薦めできるプログラムを心が伝わるように紹介しましょう。
3.実績のある方法や考え方などを「学ぶ」
「成功者のノウハウ」、「今盛り上がっている市場は?」など、常に最新情報をキャッチし、実践できているかどうかが、アフィリエイト成功のカギ。アフィ大では、アフィリエイトで稼ぐためのお役立ち情報を数多くの成功者が発信しています。ぜひご活用ください!

▲ページトップへ戻る