3-プラットフォーム-土台-アメーバowndの準備01234567890

サイトの紹介と使い方動画


created: 2021/08/08 modified: 2021/09/14

初めに

① パソコンでプログラムを作成するためには、プラットフォームが必要です。
プラットフォームとは土台のことです。
② 最も基本的な土台は、WindowsやMacなどのOSです。
OSの土台の下に土台を目的に応じて プラットフォーム として用意していきます。
③ この記事では「アメーバownd」をインストールします。

目的

① ホームページ(ブログ)の機能を利用してHTML・CSSを学びます。
② HTML・CSS は、 ホームページを作成するための最も基本的なWEB言語と呼ばれます。
③ この記事では、ブログの説明はしません。

用意するプラットフォーム

① 無料のホームページのプラットフォームはいくつかありますが、「アメーバ ownd」を選択しました。
② 理由は、
・インターネット上の評判や実績と筆者の経験から最も安全なサイトの1つだと判断したためです。
・AWSやGCPは安心・安全ですが、プラットフォームの用意に手間がかかることと、有料プランへと移行する可能性があるため、今回は候補から外しました。
③  AWSやGCPは 無料プランから有料プランへの移行の基準が、難しくてよくわかりませんでした。

アメーバ ownd のインストール

① Windows10であることを前提とします。
② インストールとは、あるソフトウエア(今回は アメーバ ownd )をパソコン上で利用できるようにすることです。

インストール手順

ステップ1

① アメーバowndをクリックします。

ステップ2

① 赤枠内の「詳しく見る」をクリックします。

ステップ3

① 赤枠内の「サイトを作成」をクリックします。

ステップ4

① 赤枠の「Googleでログイン」をクリックします。

ステップ5

① 黒く塗りつぶされた部分に2-googleアカウントの作成で作成したGmailが表示されるのでクリックします。

ステップ6

① 赤枠の生年月日と性別を入力します。
② 緑枠の「利用規約に同意して会員登録する」をクリックします。

ステップ7

① 赤枠の中に希望する名前を入力します。
既に誰かがその名前を使っているとエラーになるので、その時は、違う名前にしてください。
② 緑枠の「このURLに決定」をクリックします。

ステップ8

① 赤枠の「ホームページを作成する」をクリックします。

ステップ9

① 赤線から下のデザインを1つ選んでクリックします。
デザインは後からでも変更できるので、適当に選んでください。

ステップ10

① 赤枠の「このデザインで始める」をクリックしてください。
② これで完了です。

アメーバowndへログイン

ステップ1

① ここ(アメーバownd)をクリックします。

ステップ2

① 赤枠の「詳しくみる」をクリックしてください。
② 既にログインしていればステップが省略されることがあるので、下のステップを確認してください。。

ステップ3

① 赤枠の「サイトをお持ちの方」をクリックします。

ステップ4

① 赤枠の「Googleでログイン」をクリックします。

ステップ5

①  黒く塗りつぶされた部分に2-googleアカウントの作成で作成したGmailが表示されるのでクリックします。

ステップ6

① 画面の左側に下図が表示されればログイン完了です。

記事

① この記事の「アメーバownd のインストール」「インストール手順」「ステップ7」で入力したURLが、自分のサイトになります。
② このサイトが本だとすると、記事は本のページになります。

記事を作成する

ログインが完了したならば、プログラミングの準備をします。

ステップ1

① 赤枠の「記事を書く」をクリックします。

ステップ2

① 赤枠の「タイトル」をクリックします。

ステップ3

① 下図のように「タイトル」の左側に縦棒が点滅表示されます。
② ここに適当(好き)な文字を入力してください。
筆者は、[test1]と入力しました。

ステップ4

① 赤枠の「本文を入力」に 適当(好き)な文字を入力してください。
筆者は、[111]と入力しました。

ステップ5

① 赤枠の「今すぐ公開」をクリックします。

ステップ6

① 赤枠の「×」をクリックします。

ステップ7

① 赤枠の中にステップ2で入力したタイトルが表示されていれば完了です。

ステップ8

① ステップ1~7をもう一度行います。
② これによって記事(ページ)が増えます。
③ 記事は最低2つ作成してください。
④ 記事はいくつ作成しても問題ありません。
⑤ ここで作成した記事は全世界の人が閲覧できます(あまり気にする必要はありません)。

作成した記事を編集する(記事の内容を変更する)

ステップ1

① 赤枠①「ブログ管理」をクリックします。
② 赤枠②「記事一覧」をクリックします。

ステップ2

① 編集したい赤枠のタイトルをクリックします。

ステップ3

① 赤枠「HTML編集」をクリックします。

ステップ4

① 赤枠の中をクリックして編集できるようにします。

ステップ5

① 赤枠の中に「<p>abc</p>」と入力します。
② 漢字モードでないことを確認してください。
③ 赤枠「OK」をクリックします。

ステップ5-1

① 再編集したい時など、ステップ5の画面は、下図の赤枠をクリックすると表示されます。

ステップ6

① 赤枠①「更新」をクリックすると、ステップ5で入力した内容が保存されます。
② 赤枠②「×」 をクリックすると、 ステップ7の画面が表示されます。
③ 「更新」しないで、 「×」 をクリックすると、 ステップ5で入力した内容が保存されま せん。

ステップ7

① 赤枠①のタイトルをクリックすると、ステップ3の画面が表示されます。
② 赤枠②「記事を見る」 をクリックすると、 タイトルの内容が表示されます。
ステップ5で入力した内容が表示されるとOKです。
尚、この表示画面では、編集できません。

CSSの編集方法

ステップ1

① 赤枠①「カスタマイズ」をクリックします。
② 赤枠②「CSSカスタマイズ」をクリックします。

ステップ2

① 赤枠①に、下の内容を入力します。
漢字モードでないことを確認します。

p{
  font-size:20px;
}

② 赤枠②「保存」をクリックします。

メールアドレス:

お問合せ・御要望

  • お問合せ
  • トップへ戻る
    タイトルとURLをコピーしました