これからホームページを作りたい人向けにまとめてみました。
ホームページを作成するにあたって、方法は様々ありますが、どの方法で作成するにせよ、基本的な知識が必要となります。
今回はホームページの作成方法の基礎的な部分から自治会のホームページの作成、運用まで紹介します。
１.ホームページの仕組み
ホームぺージを公開するためには、図のように「サーバー」にデータを保存する必要があります。
閲覧者は、サーバー上に保存されているデータを参照することでホームページを見ています。
ホームページを作るためには、データを保存する場所として「サーバー」が必須となります。
ホームページ作成にあたり、もう1つ必要なものがあります。
それは「ドメイン」です。
https://www.○○.com
これの○○.comの部分を「ドメイン」と呼びます
２.サーバーの取得方法
２-1.無料で提供されているサーバを利用します。
ホームページ作成サービスや、インターネットサービスプロバイダを利用すると、無料で使えるサーバがあります。
しかし容量や機能が少ない場合がありますので、注意が必要です。
２-2.有料のレンタルサーバーを使用する。
本格的にホームページを作る場合、有料のレンタルサーバーを借りることをおすすめします。
・ホームページの表示速度が速い
・機能が豊富
・サポート体制が充実しています。
２-3.自宅サーバーを設置する。
自宅サーバーとは、文字通り自宅で運用するサーバーのことです。
自宅サーバーの場合、ユーザーは自由にスペックを変更できます。たとえば自宅サーバーであれば、数TBの保存領域も、比較的安価な価格で利用可能です。
同じスペックをレンタルサーバーで実現しようとした場合、一般的には高価な月額費用が発生します。
スペックの割にランニングコストは安いといえます。
必要なランニングコストはサーバの電気代くらいです。
ハードの費用は数万円から高価なものがあり用途によって選べます。
しかしネットワーク構築に準備が必要で使えるようになるまで手間がかかります。
又不具合・障害発生時の対応に自分で解決しなければならなく手間と時間がかかる場合があります。
手軽な方法としてSylogogy NASを利用して付属しているwebサーバソフトのWordPressを用いWebサイトが構築できます。
３.ドメインを手に入れる
３-1.レンタルサーバを利用する。
レンタルサーバーを申し込んで独自ドメインを手に入れることができます。
３-2.Synology NASにて独自ドメインを設定する。
Synology NASのDDNSを設定して独自ドメインを手に入れることができます。
DDNS(Dynamic Domain Name System)について説明する前に、DNS(Domain Name System)について説明します。
DNS(Domain Name System)とは、インターネット上のホスト名や電子メールのアドレスに使われるドメイン名と、IPアドレスとの対応づけを行い、ドメイン名からIPアドレスを取得する（またはその逆を行う）仕組みのことです。
DDNS(Dynamic Domain Name System)とは、IPアドレスが頻繁に変わるホストに固定的にドメイン名を割り当て、アドレス変更に即座に追随してDNS情報を更新するシステム、また、その仕組みを利用して提供される動的なDNSサービスのことです。
通常のDNS（Domain Name System）ではIPアドレスとドメイン名を固定的を前提で運用されています。
個人宅でインターネットサービスプロバイダ（ISP）を通じてインターネット接続する場合などには、切断・再接続のたびに事業者側が保有するアドレス群からそのとき空いているものを選んでDHCPなどで自動的に割り当てるため、同じアドレスを固定的に使い続けることができません。
DDNSでは専用のクライアントソフトなどがIPアドレスを監視し、変更が発生すると即座にDNSサーバに通知してドメイン名に対応付けるIPアドレスを更新します。
これにより、外部からそのドメイン名への問い合わせがあると、DNSサーバは常に最新のIPアドレスを応答することができます。
４.ホームページの作り方
４-1.専門業者に依頼する
上質のものが作成できますが、業者選びが大変で料金も様々です。
４-2.有料のソフトを使う
上質のものが作成できますが、料金が高く、使いこなすにはかなりの専門知識が必要です。
４-3.無料のソフトを使う
お金をかけずに作ることができますが機能が少なく、サービスが終了すれば消えてしまいます。
４-4.WordPressなどのCMSを使う
初心者でも簡単に作れ容易にカスタマイズすることができます。
費用は少し発生します。
CMSとは、Contents Management Systemの略のこと。
CMSはプログラミングやWebデザインの知識がなくても、Webサイトの構築やコンテンツの編集・追加が可能なシステムを指します。
４-5.自分でHTMLとCSSを作成する
カスタマイズが自由にできますが高度な専門知識が必要です。
以上の観点を踏まえてSynology NASでのWordPressを用いたホームページ(Webサイト)を構築することにしました。
又私のブログサイトもSynology NASでのWordPressを用いて開設しており、ネットワーク環境も再構築が必要ですがこれに決めました。
しかし自治会のホームページは継続が必要ですのでレンタルサーバーに移行する予定です。
５.インターネット通信の基本的なこと
５-1.HTTPとHTTPSについて
Web上で見かけるURLの先頭が「http」で始まっている場合と「https」で始まっている場合があります。
私たちがインターネット上でWebページを閲覧するとき、スマホやパソコンとサーバがやり取りをする時の通信の種類がいくつか存在しています。
HTTPは 「Hyper Text Transfer Protocol（ハイパーテキストトランスファープロトコル）」の略で、HTTP通信によってスマホやパソコンからWebページを閲覧するときには「データが暗号化されていない」状態になっています。
IPv4とIPv6について
IPvは「Internet Protocol Version」を略したもので、IPv4は「Internet Protocol Version 4」、IPv6は「Internet Protocol Version 6」となり、通信規格のバージョンの違いを表しています。
PPPoE(Point-to-Point Protocol)は企業や一般家庭などのイーサネット上で使用できる従来の通信方式のことです。
モデムを利用したインターネット接続や、ルーター同士を接続する際に用いられるプロトコルのことを指します。
インターネット回線への接続にあたって、中継ポイントにアクセスするためにIDやパスワードの入力や設定が必要です。
IPoE（IP over Ethernet）: IPoEは、新しいインターネット接続方式で、最近のブロードバンドネットワークでより一般的に使用されるようになっています。
インターネットの接続の際に、網終端装置を介さない通信方法です。
プロバイダーのネットワークに直接接続して通信するため、インターネット回線の混雑がなく、PPPoEよりも安定した通信環境で利用できます。
IPoEでは、PPPoEとは異なり、セッション管理や認証などのために追加のプロトコルが必要ありません。
IPアドレスの取得は、DHCP（Dynamic Host Configuration Protocol）を使用して自動的に行われます。
NTT PR-500MI 赤枠の設定は2020年6月迄は可能となっていました。
NTT PR-500MI VPNサーバー設定は2020年6月から無くなっています。
以上からPR-500MIではWebサーバーのポート開放ができないことがわかります。
７.ネットワーク構築
検討の結果、IPv6のメリットを活かしつつ別途IPv4を構成しIPv6とIPv4を併用した構成にしました。
IPv6の高速通信はスマホ、テレビ、レコーダーに利用し、IPv4はブログ、ホームページに利用します。
構築したネットワーク構成図です。赤枠部分が今回追加した機器です。
ネットワークA IPv6 192.168.1.〇〇〇 試験用、写真、動画
ネットワークB IPv4 192.168.2.〇〇〇 趣味のブログサイト
ネットワークC IPv4 192.168.3.〇〇〇 自治会ホームページ
IPアドレスは全て固定にしています。
ギガビット無線LANルーターAC2600とSynology NAS DS210+で構成しました。
趣味のブログは既に追加済です。
８.機器設定
８-1.ギガビット無線LANルーターAC2600の設定
インターネット接続タイプ PPPoE(IPv4)
ユーザー名、パスワードを入力します。インターネットプロバイダーとの契約書に書かれています。
最後に保存します。
ポート開放の設定
「詳細設定＞」＞「NAT転送」＞「仮想サーバー」を選択します。
内部IP:192.168.3.10はSynology NAS DS220+のIPアドレスです。
８-2.WebサーバSynology NAS DS220+の設定
８-2-1.固定IPアドレスの設定
Synology NASのDSMコンソールにブラウザでログインします。
[コントロールパネル]＞［ネットワーク］を選択します。
［ネットワークインタフェース]タブを選択、接続しているLANを選択し、［編集］を選択します。
［IPv4］を選択し、「手動で設定する」のボタンを設定して、必要な項目を入力します。
８-2-2.デフォルトゲートウェイ DNS Serverの手動設定
８-2-3.DDNSの設定
Synology NASのDSMコンソールにブラウザでログインします。
サービス プロバイダ：サービスプロバイダを選択します。Synology のDDNSサービスを使用するため、ドロップダウン メニューから [Synology] を選択します。
ホスト名：DDNS ホスト名 (example123.synology.me など)を入力します。前半は自分で設定したいホスト名部分後半はSynologyが管理しているドメインとなります。
テスト接続：入力したホスト名が使用可能か確認します。すでにホスト名が使用されていた場合はエラーとなります。エラーが出ない名前を探す必要があります。
ステータス：ステータスが正常になればOKです。
Let’s Encrypt から証明書を取得して、デフォルトの証明書として設定する：このチェックボックスをチェックして、Synology DDNS の Let’s Encrypt SSL 証明書を適用し、DSM のデフォルト証明書として設定します。
有効Hearbeat：チェックしおくと接続が停止した際にSynologyから通知が来ます。ONにしておきます。
９.Sylogogy NASでのWordPressのインストール
WordPressがSynology NASのDSM（DiskStation Manager)でパッケージとして提供されているため、簡単にインストールすることが出来ます。
WordPressを実行するためには、LAMP環境を構築することが必要となります。
LAMP環境とは「Linux」、「Apache」、「MySQL」、「PHP」の4つのオープンソースでWebシステムを開発する環境のことをいいます。
Synology NASのOSであるDSM（DiskStation Manager)は、LinuxベースのOSであるため、残り３つの「Apache」、「MySQL」、「PHP」をインストールする必要がありますが、インストーラーで簡単にインストールすることが出来ます。
また、DSMの場合は「MySQL」の代わりに互換データベースソフトである「MariaDB」が採用されています。
DSMコンソールにログインし、［パッケージセンター］より［WordPress]をインストールします。
「Web Station」「MariaDB」「Apache」のインストールを行う旨のダイアログが表示されますので、「はい」を押します。
Webサーバ管理ソフトウェアである「Web Station」がインストールされ、続いてWebサーバである「Apache」がインストールされます。
MariaDBのインストールとセットアップの手順が始まります。
データベース管理者用のパスワードを要求されるので、ここでパスワードを入力します。
MariaDBをインストールする旨の表示を行いますので、「完了」を押して続行します。
MariaDBのインストールが実行されます。
MariaDBにWordPressで使用するためのデータベースをセットアップします。
先ほどMariaDBのインストールの手順で設定したデータベース管理者用のパスワードを要求されますので、パスワード欄に入力します。
WordPressが作成するデータを格納するためのデータベース名、およびデータベースアクセス用のユーザアカウント、データーベースアクセス用のユーザアカウントのパスワードを入力します。
WordPress本体のインストールとなります。
ウィザードがWordPressパッケージをインストールする旨の表示を行いますので、そのまま「完了」を押して続行します。
WordPressのインストールが完了しました。
WordPressの設定
WordPressを実行すると初期設定が開始されます。
最初に言語設定の選択画面が表示されますので日本語を選択し、次へをクリックします。
WordPressの初期設定画面が表示されます。
サイトのタイトル：Webサイトのタイトルです。
ユーザ名：WordPressの管理画面にログインするときのアカウント名となります。
パスワード：WordPressの管理画面にログインするときのアカウントのパスワードとなります。
メールアドレス：WordPressの管理用のメールアドレスとなります。
入力後「WordPressをインストール」をタップします。
「成功しました！」の表示でセットアップが完了となります。
ログイン画面が表示されますので、先ほど設定した「ユーザ名」、「パスワード」を入力して、「ログイン」をクリックします。
WordPressの管理画面にログインし、ダッシュボード画面が表示されます。
１０.WordPressの初期設定
１０-1.テーマ
このテーマというのはWordPressサイトのおおまかなデザインだったり機能が搭載されているテンプレートです。
テーマは無料で利用できるものがあり機能に問題はありませんがより高度な機能を求めるなら有料テーマとなります。
有料テーマは販売元から購入して、そこでダウンロードしたものをWordPressの管理画面内からインストール・有効化させることで利用可能です。
私は有料テーマ THE THORを導入しました。
THE THORはオシャレなサイトデザインを施すことができる人気のある優秀なテンプレートです。
かなり細かいデザイン設定ができる反面、設定個所が多く、なかなか使いこなせません。
「外観」＞「テーマ」 新規追加でインストールできます。
１０-2.プラグイン
WordPressではプラグインというインストール・有効化させることで利用できる機能を増やせる仕様があります。
このプラグインもテーマと同様に基本は無料のもので十分です。
１０-3.エディター
2018年のWordPress5.0へのアップデート以降、WordPressには「ブロックエディター」と「クラシックエディター」の2つのエディターがある状態が続いています。
ブロックエディター
WordPress5.0から標準で使われている新しい方のエディターです。グーテンベルグとも呼ばれています。
文章（段落）、見出し、画像などを一つの「ブロック」で投稿し、一つの記事を作成します。
文章の段落の入れかえ、画像の移動などがかんたんにでき編集がしやすいのが特徴です。
クラシックエディター
WordPress5.0以前に使われていた旧エディターです。
一つの記事を一つのかたまりで投稿します。
操作が文章作成ソフトと似ていてこちらの方が使いやすい面があります。
利用するにはプラグインを入れて使用します。
私はクラッシックエディターのプラグインを導入し、ブロックエディターと使い分けています。
プラグインのサポートは2022年末になっていますが未だ使用できます。
１１.投稿
投稿はブログ記事を書くために用意されている機能です。
投稿記事はもっとも重要な要素で、そのサイトで伝えたい情報そのものです。
投稿記事には固定ページと投稿があります。
ホームページを作成する場合は、トップ記事として多くのページが固定ページで作成します。
そのページ単体で完結するページです。
投稿はブログ的なページで、お知らせであったり、サイトに関連した情報の記事です。
１１-1.新規固定ページを追加
フロントページ(トップページ、ホームページ)の記事を作成します。
固定ペーシ＞新規追加をタップします。
①記事のタイトルを入力します。
②本文を書いていきます。
③デザインを整えます。
メニュー作成、文字装飾、見出し、リンク、引用、表、カラム等のデザインを整えます。
１１-2.新規投稿を追加
投稿＞新規追加をクリックしてください。
記事の作成は新規固定ページを追加と同じです。
１１.自治会ホームページ作成
１１-1.ホームページの構成とデザイン
ホームページの構成、デザインとは「ホームページの見た目」のことです。ホームページ全体のレイアウトや色使いなどを決定します。
自治会ホームページのデザイン、レイアウトは固定ページにグローバルメニューを設定し、投稿記事にリンクさせます。
固定ページ(トップページ)のデザイン、レイアウトです。
１１-2.固定ページ(トップページ)の作成
固定ページを選択し新規固定ページ追加をクリックして作成していきます。
１１-3.グローバルメニューの設置
グローバルメニューとは、ヘッダメニューやメインメニューなどとも呼ばれ、画面上部に設置されているホームページの全ページに共通して表示するメニューのことです
最初に新規メニューの作成を行うので、WordPressダッシュボードのメニュー設定画面（外観 ＞ メニュー）へ遷移します。
メニューの作成画面から「メニュー名」を入力します。
名称はサイトには表示されません。
次に、メニュー設定の項目で「ヘッダーエリア」にチェックを入れます。
最後に、「メニューを保存」ボタンをクリックし、新規作成は完了です。
１１-4.カテゴリーの登録
グローバルメニューに表示される各カテゴリーを登録します。
新規カテゴリーの作成方法
【ダッシュボード】→【投稿】→【カテゴリー】
「名前」はグローバルメニューのカテゴリーです。
【ホーム】【自治会】【お知らせ・回覧】・・・・サブメニューも追加します。
「スラッグ」は、URLに表示されるので半角英数字で入力します。
「親カテゴリ」
親カテゴリーは入力しなくてもメニュー作成画面のカテゴリで階層化できます。
入力が終わったら新規カテコリーを追加をタップします。
１１-5.カテゴリーをグローバルメニューに表示
【外観】→【メニュー】→【メニューを編集】→【固定ページ】→【カテゴリー】→【すべて表示】
作成したカテゴリーが出てくるので各カテゴリーにチェックを入れ「メニュー追加」をタップします。
メニュー構造が作成されます。
ドラッグ＆ドロップで並び替え、階層を作成できます。
階層は右にずらします。
終わりましたら「メニュー保存」をタツプします。
１１-6.メインビジュアル設定
トップページに表示される画像や動画のことを、メインビジュアルと呼びます。
自治会ホームページのデザイン、レイアウトの中の画像貼り付け部分です。
カスタマイザー画面が開くので、「トップページ設定」 ＞ 「メインビジュアル設定」をクリックします。
「メインビジュアル設定」の項目から、「メインビジュアルを表示するか選択」を「表示」にします。
表示サイズを設定する場合は、「表示サイズ[横]を選択」の項目から変更してください。
ワイドサイズ、ビッグサイズ、ノーマルサイズが選択できます。
縦のサイズは自由に変更できます。
表示モードを設定します。
「メインビジュアルの表示モード設定」の項目を変更してください。
画像を選択します。
静止画時の設定、スライドショー時の設定ができます。
WordPressで記事を投稿する場合、多くは本文中にリンクを含みます。
しかし、本文中にリンクをテキストで埋め込むと目立ちにくく、クリックされにくい場合もあります。
そんなときに利用したいのがリンクをボタン化する方法があります。
メリットとしてはリンクであることが明確になる、視認性の向上です。
リンクをボタン化する方法は、「共通ボタン」を使います。
種類はプライマリーボタン、セカンダリーボタン、ノーマルボタンでサイズが違います。
ここではサイズが小さめのセカンダリーボタン、表示位置は左端にしました。
「リンクテキスト」をクリックして、「編集」に進みます。
設定(歯車)をタップします。
リンクの挿入・編集
リンク先のURL、リンクテキストを入力します。
「リンクを新しいタブで開く」にチエックをいれます。
離脱率を下げる為に「リンクを新しいタブで開く」にチェックを入れておくのが良いです。
１１-8.文字にリンクを設定
1つのページにさまざまな関連情報を詰め込みすぎるのは良くありません。
内容が長くなり、最後まで読まれなかったり、必要な情報が見つけにくくなります。
内部リンクを設置して詳しい情報に導き、情報が必要な閲覧者にだけ別記事のリンクを用意し閲覧者の利便性を高めることができます。
①リンクさせたいテキストをドラッグして②リンクの挿入・編集をクリックします。
リンク先のURLを入力し、「適用」をクリックします。
公開しているページがあればリンク設定歯車マークをクリックします。
これまで公開した記事一覧が表示されるのでその中からリンクさせたい記事をクリックすると自動的にURLが表示されます。
最後に「リンク追加」をクリックします。
１１-3.新規投稿ページの作成
投稿＞新規追加で記事を作成していきます。
カテゴリー一覧で「お知らせ・回覧」にチェツクをいれます。
完成しました。トップページ（ホームページ）です。
