自作WEBのお話のPart1で、何気なく書いた「ワードプレス」という言葉。そもそもワードプレス自体は多くの人が知っている・・ぐらいの書き方でしたが・・いかがなものか？Part1.こちら
そして、Part2では、更新する内容、運営の仕方をよくよく考えてから、実行に移そう。ということを伝えました。Part2.こちら
ただ、よくよく考えたら、そもそも「ワードプレスって何？」って思っている人もいるのでは？ということで、今回は、その仕組み、ワードプレスに代表されるCMSってなーに？ということを交えて、WEBページの構成（作り方）について伝えて行こうと思います。
更新に必要なCMSってなーに？
- Contents Management System「コンテンツ・マネジメント・システム」の略。
- テキストデータや画像データ、テンプレートなど、WEB用データを一元管理できる。
- データベースに情報（WEB用データ）を蓄積するだけで、WEBページを自動生成できる。
更新し続けるためには、このCMSを利用することが必須ともいえます。なぜなら
CMSを使うメリット
- 自動生成できるということは、作業がそれだけ軽減されるということ！
- HTMLやCSSなどの専門知識がなくても、更新することがでる。
- インターネット上に、データが蓄積され、PCやスマホなど、どこでも更新作業ができる。
イメージが出来ましたでしょうか？難しく考えることはなく、インスタグラムやフェイスブックなどを利用している人なら、スマートフォンアプリを使って、当たり前のように、インターネット上に、情報を蓄積し、修正を加え、更新をしている人も多いと思います。
要するには、それと何ら変わりません。ネット上にデータベースがあり、更新するのはその中身（文章か画像）ということになります。
では、このCMSを利用しない場合は、どうなるのか？というと、1ページごとに、WEBページ全体をつくる必要があります。といっても、ピンとこないですよね。Part1で、私は最初に【メモ帳さえあれば、ホームページは作れるのです。】と書きました。
つまりこの時は、CMSを使わずに、1ページずつ、WEBページを作成するという方法です。
WEBページ作成に必要な言語
- 必須の言語HTML（Hypertext Markup Language）
- HTMLと一緒に使うCSS（Cascading Style Sheets）
HTMLは、ページ全体の構成（要素）を作るためのもので、それをより見栄えよくするために使うのが、CSSということになります。
WEBサイトは、このHTML言語と、CSS言語さえ分かれば、誰でも作ることができるのです。では、どうやって？の部分については、たくさんネット上に解説があるので、HTMLやCSSで検索してみて下さい。
例えば、下記のようなサイト
HTML の基本 – ウェブ開発を学ぶ | MDN (mozilla.org)
解説では、HTMLタグという言葉が出てくるはずです。このタグで文章を囲むことで、ただの文字列が、例えば、段落とか、見出しとか、意味（要素）を持つ、文字列になります。今、あたなが読んでいるこの文章も、表示されていないタグが存在し、そのタグによって、この文章自体は囲まれており、段落という意味を持っています。
このページのタイトル部分は、見出しタグで囲んであります。この見出しタグに対して、赤い下線を引いたり、少し影をつけて囲んだりするためには、CSSを使います。これが見栄えをよくする部分、ということになりますね。
タグの種類も、スタイルシートの種類も、たくさんありますので、これはひたすら調べながら、何がどんな意味を持ち、どんな設定をすれば、どういう表現ができるかは、学んで実践するしかありません。
WEBサイトは、このタグで囲まれた文章さえあれば、とりあえずは、出来ている状態にはなりますが、このタグやスタイルシートを設定する労力が大変なのです。コンピューターの世界は、ちょっとした打ち間違いなどを許してはくれませんので、アルファベット一文字が抜けただけでも、思ったような表示がされなくなってしまいます。
そこで、CMSを使うメリットの部分で書いた「HTMLやCSSなどの専門知識が無くても更新できる」仕組みが重宝するわけですね。
ただし、実際に、全く知らなくても、出来るとすれば、それは、アメブロ（アメーバブログ）やはてなブログのような無料のブログサイトを使う場合に限られると思います。このようなブログサイトは、多くの人が予め用意されている仕組みやレイアウト、デザインをそのまま、使用しているからです。（あくまでも私の印象で、実際にはある程度カスタマイズも出来るようになっています。）
もし、あなたが、日々の日記として使う、あるいは、自分の書いたことが、WEBサイト上にあるだけで良い。ということであれば、この無料のブログサイトを使用し、日々の更新を行えば十分です。
そして、オリジナルデザインにしたいということであれば、全く知識が無くても出来るというわけには、残念ながらいきません。だからこそ、最初の構成とデザイン部分だけは、WEB制作できる人に依頼して作ってもらっていることが多いんですよね。
そこに、CMSの仕組みを取り入れてもらえば、その後の更新のみ、ご自身で出来るということになります。ここで重要なのが、Part2で書いた、更新する内容、目的、頻度など運用を考えておくこと。
今回は、ご自身で作ることを目的とするので、続いて「ワードプレス」を解説。
このサイトも、ワードプレス（WordPress.org）を利用しています。かなりのシェアを獲得しているCMSで、無料で使えるのに、自由度が高いというのが、大きな魅力。また、使用している人が多いということは、解説も多いということ。ネット検索で、十分情報を拾うことができます。
ワードプレスを利用するために
- サーバーを用意する ・・一般的にはレンタルサーバーを契約（有料）
- ドメインの取得 ・・ドメインとサーバーを同時に契約できるサービスもある（有料）
- WordPressをインストール ・・簡単インストールなど各社サービスを展開（無料）
- WordPressテンプレート（テーマ）を使用 ・・必要に応じて（無料・有料）
- デザインカスタマイズ ・・必要に応じて（自力で頑張る）
- WordPress プラグインの使用 ・・必要に応じて（無料・有料）
レンタルサーバー、ドメインの取得は、別々に行うこともできますが、同時契約の方が、設定作業などが不要になるので、簡単です。ただ、各社サービス展開がいろいろなので、ご自身の利用状況に応じて選択する必要があると思います。（ドメインについては、Part2.で解説しています。）
ワードプレスでは、デザインを決めるテンプレートを「テーマ」と呼んでいます。オリジナルのテーマが用意されているので、その中から選んでも良いですし、多くの無料テーマも存在しますので、ネット検索で探してみても良いでしょう。
オリジナルテーマは、Twenty Nineteen ・ Twenty Twenty など、基本的にシンプルな設計になっているので、そのまま使っても、良いと思います。
ただ、それでは物足りない方は、無料の範囲で選んでもたくさんのテーマがあるので、ぜひネット検索してみてください。もちろん、有料のものもあって、これは素晴らしい。このままのデザインで使える！という優れモノが見つかったら、お金を払う価値もあるでしょう。
ちなみに、このページは、[Cocoon]という無料テーマを使用ています。
Cocoon | WordPress無料テーマ (wp-cocoon.com)
テーマの多くは、ぱっと見た時、かっこいい！おしゃれ！素敵！など、デザインというか、表示された写真などが美しかったり、ロゴが可愛かったり、印象良く作られているのですが、じゅうまどうべ（じゅうmado宇部）としての運用を考えた時に・・そんな、おしゃれで、かっこいい写真など、あるはずもなく、デザイン性優位でつくることは、避けたかった。構造的にネットニュースのような、タイル型の記事が並ぶだけ・・のイメージだったので、このシンプルなCocoonを選びました。
このサイトでは、見た目よりも、中身を読んでもらってなんぼ・・みたいに考えていたからです。
そのため、みなさんは、自分のサイト運営の目的に合わせて、このテーマをまずは、探してみてください。テーマを探すだけでも、時間がかかります（正直言って…結構な労力です（汗））
これいいな。と思うものがあれば、解説を読んでみる。大抵は、テーマの設定方法なども一緒に書いてあるはずです。その通りに作業をすれば、無事、使用可能となるはずです。
この先は、テーマごとに、操作が変わってきます。そのため、無料テーマを利用する場合は、解説を自分で読んだりしながら、設定をしていく必要があります。
また、プラグインとは、新しい機能を追加することを意味しています。例えば、このサイトでは、お問い合わせや、掲載申請などの際に使用している、「送信フォーム」でContact Form 7というプラグインを使用しています。
他にも、予約フォームなどもプラグインを利用しています。プラグインを利用することで、自分でプログラムを組むことなく、簡単に機能追加ができますし、ワードプレスでの入力や操作を楽にするためのプラグインなども存在します。これもまた奥深いですが、ネット検索で情報は十分に拾えますよ。ぜひチャレンジしてみましょう。
今回、CMSを使うことをメインに書きましたが、やっぱり、HTML言語ってどういうもの？ぐらいは知っておかないと困るかな。と思いなおして、Part4では、HTMLタグについての解説を加えました。よろしかったら読んでみてくださいね。
