初心者が、WordPressでコーポレートサイトを作る全手順-２

福永忠夫

7年前

初回の「初心者が、WordPressで企業サイトを作る全手順-１」では、企業サイトの体裁をおおよそ完成させた。

第2回目となる今回は、各セクションの体裁をどうするか、どうやって更新していくかについて紐解いていこうと思う。

数あるCMSツールのなかでも、WordPressは実は初心者にとっても扱いやすいもので、なおかつ極めようと思えば、その意思に応えてくれる奥深さも備えている。

「初心者が」のキモは、あらかじめテンプレートが準備されているCMSツールを活用することによって、HTMLやCSSといった、いわゆるWEB制作の知識がなくても、WEBサイトとしてある程度の体裁を整えられることだ。

少し馴れてきたら、WordPressを使って、試行錯誤しながらでもWEBサイトにあなたのオリジナリティを組み入れていくことにもチャレンジしてほしい。

※上記の手順のうち、グレーになっているものが第1回で作業済みのもの。
※各項目は、全三回の記事のそれぞれの項目にジャンプしています。

サイトのTOPページ（HOME）を作る

ここから固定ページの内容の入力を進めていく。
まずは、サイトTOP（HOME）だ。

現状は、サイトTOPには、投稿ページで入力されている最新の記事が表示される設定になっている。
ページの内容を入力する前に、サイトTOPに固定ページで作った「サイトTOP（HOME）」が表示されるように変更する。
操作は、管理画面の［設定］－［表示設定］の「フロントページの表示」を変更すればよい。
「固定ページ」をチェックし、「フロントページ」から「TOPページ」を選び保存する。

ここまでの作業でサイトのTOP（HOME）には固定ページで作成した「TOPページ」が表示されるようになった。ここで、1点気になることが・・・。それは「TOPページ」と固定ページのタイトルが表示されていることだ。
会社案内や事業内容であればこれでいいが、サイトのTOPに「TOPページ」とは、なんともセンスがない。

これを解消するには、テーマを改造する方法もあるが、ここでは固定ページのタイトルをHTMLのコメント化（コメントアウト）し、表示させなくすることで回避しておく。
操作は、管理画面の［固定ページ］－［固定ページ一覧］から以前に作成した「TOPページ」を編集で開く。
そして、タイトルをHTMLのコメント記述ルールに従って修正する。HTMLのコメントは、表示したくない文字列を「＜！ーー」と「ーー＞」で囲めばよい。
今タイトルに入力されている「TOPページ」を「＜！ーーTOPページーー＞※」と修正し、更新する。

※本来は半角で記述すべき。

サイトのTOPページを確認すると、固定ページのタイトルは表示されなくなった。

次にTOPページの内容を入力していこう。
まずTOPページに何を掲載するかを考える。
無難なところで、

事業内容をイメージできるビジュアル画像
企業メッセージ

で構成する。

まず、ビジュアル画像を準備する。WordPressの管理画面の中で画像のリサイズや切り出しなどの編集も可能だが、今回は幅600px高さ200pxの画像を事前に準備した。
操作としては、先ほどと同様に管理画面の［固定ページ］－［固定ページ一覧］から以前に作成した「TOPページ」を編集で開く。そして、仮の入力内容を消去後、「メディアを追加」から準備したビジュアル画像を選択する。

「メディアを追加」をクリックすると「メディアを追加」画面がポップアップするので、「ファイルを選択」から表示されるダイアログで準備しておいたビジュアル画像ファイルを選択する。

選択したビジュアル画像を開くと、画像をアップロードの後、以下のような画面になる。
「添付ファイルの表示設定」の中の「サイズ」をフルサイズにして「固定ページに挿入」をクリックすれば、固定ページの入力画面に組み込まれる。

以下が固定ページの入力画面に組み込まれた状態だ。

次にビジュアル画像の下に企業メッセージを掲載する。
ビジュアル画像の下あたりをクリックし、Enterキーを押すとカーソルが表示されるので、メッセージを入力して、更新する。

TOPページを見てみよう。

会社案内ページを作る

次に会社案内のページを制作する。
会社案内に関しては、次の手順で制作する。

MS-Excelで内容を入力
MS-Excelのセルをコピー、WordPressの固定ページ入力画面にペースト

この方法を用いると、HTMLを知らなくても表組みで内容の掲載が可能になる。

まず、MS-Excel上で会社案内の内容を入力する。おおよそ以下のような内容だろう。

次に管理画面の［固定ページ］－［固定ページ一覧］から以前に作成した「会社案内」を編集で開く。
そして、先ほどのMS-Excelに入力した内容を範囲選択してクリップボードへコピーし、「会社案内」の編集画面でペーストすれば完了だ。

会社案内ページを見てみよう。
表組みされているので項目名と内容がきれいに面一で揃っている。
画像では見難いが罫線も入っている。

初心者が、WordPressでコーポレートサイトを作る全手順-２、後半は

「事業内容ページを作る」へ

事業内容ページを作る

手順は、会社案内ページと同じだ。
管理画面の［固定ページ］－［固定ページ一覧］から以前に作成した「事業内容」を編集で開く。
そして、会社案内と同様にMS-Excelに入力した内容を範囲選択してクリップボードへコピーし、「事業内容」の編集画面でペーストする。
事業案内では、サブタイトルを太文字にしたい。サブタイトルをマウスで選択して反転し、「太文字]
化ボタンをクリックすれば可能だ。

事業内容ページを見てみよう。

お問い合わせページを作る

お問い合せページは、本当であればフォームを準備したいところだが、その紹介だけで一つ記事が書けるボリュームになるため、今回は問合せ先の掲載に留める。
ちなみに、WordPressには、問合せフォームを設置するためのプラグインがいくつか存在する。
興味があれば以下のキーワードを検索してほしい。

「WordPress Contact Form 7」
「WordPress MW WP Form」
「WordPress 問合せフォームプラグイン」

お問い合せページの制作は、事業内容ページと同じだ。

WordPressがあれば、初心者でも十分に企業サイトを構築できる

ここまでの作業で、一通りのコンテンツは揃った。HTMLやCSSについて知識がなくても、ここまで作り込むことができる。

「管理画面」と聞くと業務システムっぽく聞こえるので、テクニカルなことを学びながら進めなければいけないと感じられるかもしれないが、WordPressの管理画面は非常に使いやすく作られている。

「恐れるより馴れろ」である。ぜひとにかく触れていただきたい。トライ&エラーを繰り返しているうちに要領が得られるものだ。

「できそうかも」と感じたなら、それはきっと、はじめる時だ。

最新のお知らせを掲載する