ワードプレスなしで サイトを作る方法

結論:ロリポップ! のエコノミープランに申し込む(2021年5月現在:月額110円)

ワードプレスでサイトを作るのと、なしで作るのと、どう違うの?

個人的な感覚としては、たとえば、新しくカフェをオープンする場合、 内装を業者さんに依頼するのか(ワードプレスを使う)、自分ですべてDIYするのか(ワードプレスなし)。

以下、実際に、ワードプレスなしで、ロリポップ!でサイトを作ってみた手順です。 読んでみて、「なんか、めんどくさそう...」と感じたら、ワードプレスありのプランを検討してみましょう。

ロリポップ!なら大人気のWordpressも簡単インストール!
あなたもWordPressでブログデビューしちゃおう!!

目次

独自ドメインを取得する

独自ドメインは、インターネット上の自分の住所。 たとえば、このサイトは「https://kanata.blog」

ドメインは、 「.com」「.net」「.org」などで、 料金は、だいたい年間1500円〜。 取得料(1年目)と 更新料(2年目以降)が異なるので、注意。

以下は、「 ムームードメイン 」で取得した場合の手順です。

レンタルサーバー

レンタルサーバーは、インターネット上の土地のようなもの。

ワードプレスなしでサイトを作る場合は、 ロリポップ! のエコノミープランに申し込みましょう。

DNS設定

ムームードメインから、ログインして、DNS設定の項目で「ロリポップ!」を選びます。

https化する

「http」のままだと、自分のサイトを表示したときに 「安全ではありません」という表記が出てしまいます。

URLをhttps化するには、 ロリポップから、ログインして、 「セキュリティ」→「独自SSL証明書導入」。 今後、サブドメインを設定したら、それも1つ1つhttps化しましょう。

FTP

ここから先は、すべて「ロリポップFTP」での作業となります。

↓ ↓ ↓ ↓ ↓ ↓ ↓

URLリダイレクト

個人的には、ここが1番挫折しそうになったポイントでした。

https化したあとは、「https://kanata.blog」と「http://kanata.blog」 両方のURLが使える状態になります。

でも「kanata.blog」とだけ入力すると 「http://kanata.blog」に飛んで、 「安全ではありません」と表示されてしまう。

この問題を解決するために「.htaccess」ファイルを作ります。

FTPで新規ファイル作成
ファイル名は「.htaccess」
右上にある「現在の属性」は「604」に設定


RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

上記のコードを「.htaccess」ファイルにコピペ。

これで、 「kanata.blog」と入力しても 「http://kanata.blog」と入力しても 「https://kanata.blog」に飛びます(リダイレクトされる)。

他にも「wwwあり、なし」 「index.htmlあり、なし」 「サブドメインのリダイレクト」など、 色んな種類のリダイレクトがあるので、自分の好みに合わせて調べて設定してみましょう。

以下ページにお世話になりました。

.htaccessファイルでHTTPからHTTPSにリダイレクト
サブドメイン型URLを設定したときに確認するべきこと
.phpや.htmlなどの拡張子をURL表示させない方法

ありがとうございます!

最初のページを作る

「index.html」が、トップページになります。つまり、 「https://kanata.blog」で表示されるのは「index.html」

FTPで新規ファイル作成
ファイル名は「index.html」


<html>
<body>

kanata.blog

<br><br>

海外ドラマ
<br>
はじめの5分に学ぶ英語

<br><br>

心と星の世界

</body>
</html>


上記のコードで、 以下のような感じになります。

トップページ:index.html

CSSデザイン

CSSは、フォントの種類やリンクの色、 見出しを自分好みにカスタマイズ、 蛍光ペン風のマーカーを文字に適用、などなど。 全体的なデザインに関する設定ができます。

FTPで新規ファイル作成
ファイル名は「style.css」

「CSSデザイン」などで検索して、自分の好みのCSSコードを 自分の「style.css」ファイルにコピペしていきましょう。

「style.css」のファイルができたら、index.htmlの、上のheadタグ内に以下のように記述する。


<html>

<head>
<link rel="stylesheet" type="text/css" href="/style.css">
</head>

<body>

kanata.blog

<br><br>

<a href="/english">
海外ドラマ
<br>
はじめの5分に学ぶ英語
</a>

<br><br>

<a href="/astrology">
心と星の世界
</a>

</body>
</html>

cssファイル作成後の「index.html」

ちなみに、こちらが、cssファイル作成前の「index.html」
cssファイル作成前の「index.html」

そして、これが、2020年秋の「index.html」
今の「index.html」

文字化け防止と言語指定

自分の場合、パソコンとスマホでは、普通に見られるけど、 タブレット(iPad)のブラウザで表示すると、日本語が文字化けしていました。

「なぜ!??」

解決策に、たどり着くと、どうってことないけど、 道中の「なんで上手くいかないのか分からない」状態は、 やっぱり、いつも少し不安になってしまいますね。

ファイル名の下にある文字コードが「UTF-8」の場合、 以下の記述で解決しました。


headタグ内の1番上に

<meta charset="utf-8">

あと、htmlタグに以下の記述で、自分のウェブサイトが日本語であることを言語指定することができます。 これが必要かどうかは、調べてみると、色んな意見があるみたいですが、自分は、つけておくことにしました。


<html lang="ja">

すでに作成済みのhtmlファイルすべてに、文字化け防止のコードをコピペしていく作業は、少し面倒だったが、 まだファイル数が少ない頃でよかった。

このような基本的なコードの枠組みは、 できるだけ初期段階に確立できると、のちのち楽だということを学びました。

アイコンとタイトルを設定

何もしない状態だと、ブラウザ上のタブには 「デフォルトのアイコン」と「URL」が表示されます。 URLではなく、ページのタイトルを表示するには、 「.html」ファイルに、以下のように記述します。


headタグ内に

<title>ここにタイトル</title>

ちなみに、ブラウザ上のタブの アイコンのことを「favicon」と呼ぶみたいです。 .htmlファイルに 以下のように記述することで設定できます。


headタグ内に

<link rel="icon" href="画像ファイル">
 
<link rel="apple-touch-icon" sizes="180x180" href="画像ファイル">

スマホ・レスポンシブ

.htmlファイルに 以下のように記述する。


headタグ内に

<meta name="viewport" content="width=device-width, initial-scale=1">

style.cssファイルに 以下のような感じで記述。
(数字は、それぞれ自分好みに編集)



@media screen and (max-width: 640px){
	img{
		width:100%
	}

body{
        font-size:17px;
}

}

当サイトは、現在(2021年5月)、横幅が640pxなので、 640px以下の画面(スマホ、タブレットなど)で観覧する場合、 画像は、その画面の横幅に合わせてサイズが変わり、文字サイズは、17pxになります。

meta descriptionとは?

検索エンジンで、タイトルの下に表示される説明文のことです。

.htmlファイルに 以下のように記述する。


headタグ内に

<meta name="description" content="ここにページの概要を書く">

すべてのページに書くのは、めんどくさいという場合、サイトの中から、 いくつか選んで説明文を書くという方法も、ありかも。

自分は、とりあえず、トップページ、海外ドラマのメインページ、西洋占星術のメインページに、 meta descriptionコードを記載してみました。

CSS見出しデザイン

以下参考にさせていただきました。
ありがとうございます!

シンプルなHTMLとCSSコピペで実装できるタイトル(見出し)のデザインサンプル 50

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選

CSS見出しデザイン参考100選!コピペ可!どこよりも詳しく解説!

h1タグのデザイン


h1 {
  padding: 0em 0.5em;
  border-bottom: 17px solid #94d1ca;
  font-size:33px;
  letter-spacing:2px;
}

h2タグのデザイン


h2 {
  font-size:27px;
  padding: 1.1em 1em 0.8em;
  background-color: #e2f1f1;
  -webkit-box-shadow: 5px 5px #88bfbf;
  box-shadow: 5px 5px #88bfbf;
  border-radius: 20px;
}

pタグとbrタグ

pタグは、段落を構成するためのタグ。
brタグは、改行するときのタグ。

以下の記事、pタグに関して、とても勉強になりました。

HTMLのpタグ(段落)の使い方

特に、CSSでpタグ下の余白を設定することで、 HTMLファイルでbrタグをそんなに使わなくてすむ。 ということに目からウロコ。


p {
  margin-bottom: 50px;
}

画像(img)をpタグで囲むということも知らなかった。

あと、「pタグ(や他のタグ)で囲むことができるタグってなんだろう?」とか 「あれ、このタグって、pタグで囲めるのかな?」となったとき、以下の記事を参考にしています。

HTML5でのタグの入れ子のルールを徹底まとめ

画像について

「images」というフォルダを作成し、画像ファイルは、そこにアップロードする。

画像を入れたい記事に、以下のように記述。


<p>
<img src="/images/〇〇.png" alt="画像の説明を書く">
</p>

画像は、pタグ、divタグ、spanタグなどで囲むことができる。

箇条書きリスト

箇条書きリストを作成するときは、以下のように記述。


<ul>
<li>部屋の掃除をする</li>
<li>ブログ記事を書く</li>
<li>A子にメールする</li>
</ul>

箇条書きリストは、pタグで囲まない。

何もしないと、左は「丸」
自分は「四角」にしたかったので、CSSに以下のように記述。


ul {
  list-style-type: square;
}

箇条書きリストを数字にする場合は、「ul」ではなく、「ol」にする。

  1. 部屋の掃除をする
  2. ブログ記事を書く
  3. A子にメールする


<ol>
<li>部屋の掃除をする</li>
<li>ブログ記事を書く</li>
<li>A子にメールする</li>
</ol>

参考記事:
【HTMLで箇条書き】ul・ol・liタグの使い方まとめ

ありがとうございます!

多くの方が、道しるべとなるような 解説を書いてくれていたのが、すごく助かりました。 ありがとうございます!

これからも、新しいことを学びながら 進んでいきたいと思います。

まとめ

ここまで来られた方、おつかれ様です!

一応、基本的なことをザッとまとめてみました。 「ワードプレスなしでサイトを作ってみたい」という方にとって、少しでも参考になれば嬉しいです。

「挑戦してみようかな」という方は、 ロリポップ! で、ワードプレスなしのエコノミープラン無料体験に申し込みましょう。

「自分は、ワードプレス派」という方は...

WordPressを使うならロリポップ!
簡単インストール完備で楽々スタート!


人生を記録しよう。
LifeLogノートを作ろう。