1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。
ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。
さらにサーバーを借りなくてはなりません。するとお金がかかったりします。
では、お金の無いあなたや私はどうすればいいのでしょうか?

そこで、無料でホームページが作りるものはないのかと探したところ、Owndというものを見つけました。これは無料な上に使いやすい!
というわけで、今回は世界平和のために、Owndを使って無料で超簡単にホームページを作ってみようと思います。

目次
  1. Owndでホームページを開設してみよう!
  2. サイトの設定をしていこう!
  3. アメブロに連携させてみよう!

Owndでホームページを開設してみよう!

Owndでホームページを開設するために、まずOwndにログインしてみましょう。
Owndにログインするには、次のアカウント内のどれか一つが必要です。

  • アメーバID
  • Yahoo! JAPAN ID
  • Twitter
  • Google
  • Facebook
  • mixi
  • 楽天会員ID

今回は、アメーバIDを取得してサイトを作ってみようと思います。
ちなみに、アメブロを使ってブログを作ると、ホームページと一体感のあるサイトを作ることができます。
マジでこれはすげーぞ!

アメーバIDを取得してみよう!

アメーバIDはOwndのページから作ることができます。
ではまず、Owndのページに行ってみましょう。

Ownd

Ownd
Ownd

こちらのサイトの右上にある、「ログイン/新規登録」をクリックします。
すると、様々なログイン方法が表示されるので、アメーバIDを持っていない人は、「Ameba新規登録(無料)」をクリックします。
あとは、表示された画面にメールアドレスを入力し、送られてきたメールから、登録を完了します。

サイトを作っていこう!

それでは、実際にサイトを作ってみたいと思います。
今回作りたいサイトは、音楽サイトです。ヒップホップの素晴らしさを世の中に伝えようという趣旨のサイトにしたいと思います。

Owndにログインした状態で、そのサイトの右上にある▼をクリックします。
その後、「新しいサイトを作成」をクリックします。

新しいサイトを作成
Ownd

すると、下のように表示されます。
ここで自分が作りたいサイトのURLを決めます。

まず、サイトのURL(アドレス)を決めましょう
Ownd

入力したら、「このURLに決定」をクリックします。
すると、下のように表示されます。この中から自分の作りたいサイトに一番ピッタリなものを選択します。

作成したいウェブサイトの種類を選択してください
Ownd

私は個人のブログやポートフォリオを選びました。

次はカテゴリの選択です。
今回私が作りたいサイトは、音楽系のサイトなので、「音楽」をクリックして、その中から「ヒップホップ・レゲエ」をクリックしました。

関連性の高いカテゴリを選択してください
Ownd

そして、さらにサイトのデザインを選択します。
この中から好きなデザインを選びます。

サイトのデザインを選択してください
Ownd

これを選べば、サイトを作るための大まかな準備はできました。

サイトの設定をしていこう!

続いて、サイトの設定を行います。

まずはページ編集をしてみよう!

最初に、ページ編集をしていきたいと思います。
まず、「ページ編集」をクリックしてください。

Ameba Owndへようこそ
Ownd

そして、次に表示された画面から、「Posts」をクリックします。

Ownd
Ownd

次の画面で、「Posts」というページを編集できます。
詳しい編集方法は後日別の記事で紹介するとして、今回はこのページの名前だけ変えてみたいと思います。

とりあえず、このページをトップページにしたいので、左上の「Posts」を入力されている部分を「Top」に変更します。
そして、右上の「ページの更新」をクリックします。

Ownd
Ownd

基本設定を変更してみよう!

では、サイトの基本設定を変更してみましょう!

「設定」→「基本設定」と進むと次のような画面になります。

Ownd
Ownd

ここにサイト名やキャッチフレーズなどを入力します。
下の方にスクロールさせると、アイコンやカテゴリの変更ができます。

入力したら、保存をクリックします。

アメブロに連携させてみよう!

最期にアメブロに連携してみたいと思います。

Amebaと連携させる

「設定」→「ソーシャルメディア連携」といって、Amebaの「連携」をクリックするだけです。

するとどうでしょう!
作ったサイトの上部分、Topの隣に、「Ameblo」と表示されました。
そのままアメブロを見ると、アメブロの上部にも同じメニューが表示されています。

it-is-rのブログ
アメブロ画像

メニューがアメブロに表示されない時の対処法

メニューがアメブロに反映されるまでに一時間ほどかかる場合があります。なので気長に待ちましょう。
それでも反映されない時は、選択したテーマがアメブロのメニューに対応していない可能性もあります。
別のメニューに変更して、もうしばらく待ってみましょう。

ちなみに、私が試してみたところ、PJというテーマは対応していませんでした。他は知らん!

スポンサードリンク

関連コンテンツ

オススメ記事

enchant.js

enchant.js でクラスを作る、激分かりやすい方法!

こんばんわ、ちょっと海外へ行っておりました@It_is_Rです。 前回までの enchant.js の記事で、画像の表示やキャラの移動など、ゲーム制作には欠かせない基礎知識が身についたのではない

【Android Studio】新規プロジェクトを作成する方法。

インスタント焼きそばを作ろうとすると、なぜか焼うどんになります。 @It_is_R です。 しかも、ラーメン作ろうと思うと焼きそばができあがります。 前回、 Android Studio のイ

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

こんばんわ、@It_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

wordpress

WordPress にウィジェット(サイドバー)を追加する方法。

サイドバーというより、頭がパーな@It_is_Rです。やかましいわ。 WordPress テーマ自作シリーズ、早くも第6回目です。 今回はウィジェット(サイドバー)を追加する方法を紹介します。

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。 管理画面をカスタマイズする

WordPress テーマの基本構成と読み込まれるファイルの優先順位。

ドラクエとかにテンプレートっていう武器ありそうですね。@It_is_Rです。 WordPress テーマ自作シリーズ第4回目です。 今回はテーマを作成する上で、重要な知識を書いていこうと思いま

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 WordPress テーマ自作シリーズ、第2回目です。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていき

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

コメントをどうぞ!

メールアドレスが公開されることはありません。