概要
コーポレートサイトでブログを公開することがよくあると思います。
外部のブログサービスを利用してブログを立ち上げ、コーポレートサイトにリンクを貼ってコーポレートサイトからブログへ飛べるようにします。
無料でブログを公開できるサービスはたくさんありますが、今回はWordpressというCMS（コンテンツマネージメントシステム）サービスを利用します。
Wordpressは、ブログを書くツールとしても便利ですが、プラグインを利用したりすることで幅広い利用が可能です。Wordpressをカスタマイズしてコーポレートサイトを作成することも、ショッピングサイトを作成することもできます。
ですので、Wordpressを知るステップとしてWordpressでブログを開設していきたいと思います。
完成イメージ
wordpressのブログ
コーポレートサイト
事前知識
wordpressには、wordpress.comとwordpress.orgがあります。
wordpress.comはレンタル型で自分でサーバを用意する必要はなく、wordpress.comのサーバ上で開設ができます。サーバを用意する必要が無いので、簡単に試したいときなどはwordpress.comを利用するといいでしょう。
コーポレートサイトとしてwordpressを利用する場合などは、wordpress.orgを利用したほうがいいです。wordpress.orgは自分で用意したサーバにwordpressをインストールして利用するもので無料です。
今回は簡単に試すだけなので、wordpress.comの無料プランを利用します。
全体の手順
Blogを作成してコーポレートサイトにリンクする手順は以下のとおりです。
- wordpressに登録する
- ブログを書く
- コーポレートサイトにリンクをつける
外部参考サイト
WordPressに登録する
wordpress.comの登録・ブロク投稿手順は、wordpress.comのアップデートによって日々変わります。
本コンテンツで案内しているのは2019年5月24日時点での方法です。
wordpress.comの公式サイトから手順に沿って登録をします。
登録したメールアドレスに認証メールが届き、認証ができたら登録完了です。
初回設定
メールの認証ボタンをクリックすると、メールアドレスの確認ができたというアラートが表示されるページに移ります。
左上の参加サイトをクリックします。
ここからサイトを作成していきます。
今回は、簡単なテスト用ブログを作るので無料でできる範囲で行います。
5つのステップを進めていきます。
今回はブログを作成するので項目でブログを選択します（あまり関係ありません）
興味のあるトピックを適当に選択します。
サイト名を指定します。
wordpressから割り当てられるドメイン名の希望を入力します。
希望どおりのドメインは基本有料になってしまいます。
今回は、テストなので、無料で提案されたものを選択して進めます。
有料プランに導かれそうになりますが、無料で開始を選択します。
サイトが完成します。
公開されたサイトを確認します。
左上に表示されたサイト名をクリックします。
右上のサイトを表示をクリックします。
現在公開されているブログが表示されます。
ブログを書く
ブログを書く
公開が完了したので、ブログを書いてみたいと思います。
公開されたサイトの右上の「投稿」ボタンをクリックします。
すると、ブログを書く画面が表示されます。
ガイドに沿って、タイトルと文章を入力します。
文章は、HTMLで記述することもできます。
簡単な文章がかけたら、「公開する」ボタンを押して記事を公開します。
（wordpressでは、公開のタイミングを設定したり、公開する前に管理者だけチェックする非公開やパスワードを知ってる人だけ閲覧するように設定することもできます。）
投稿を公開できたので、「投稿を表示」ボタンを押して記事を確認します。
記事を確認できました。
投稿した記事が表示されているページはシングルページと言って、記事の詳細ページです。
トップページをカスタマイズ
ブログタイトルをクリックしてトップページに移動してみます。
トップページにはブログが表示されていません。
記事の詳細ページはできましたが、記事の一覧の表示がないので、トップページに最新の記事5件のタイトルが表示されるようにカスタマイズしていきます。
画面右下に編集メニューが表示されるので、カスタマイズをクリックします。
ウィジェットを選択します。
サイドバーを選択します。
今、サイドバーには、検索窓とサイドバーテキストウィジェットが設定されています。
ここの検索窓とサイドバーテキストウィジェットの間にブログを表示させるように変更してみましょう。
「+ウィジェットを追加」をクリックします。
追加できるウィジェットリストが表示されるので、最近の投稿を選びます。
表示できる投稿数や表示の順番などカスタマイズできますが、タイトルだけ「ブログ」にして、あとはとりあえずそのままで完了をクリックします。
追加されたウィジェットをドラックアンドドロップで検索とサイドバーテキストウィジェットの間に移動させます。
設定できたら「公開」ボタンをクリックします。
すると、トップページのサイドバーにブログが表示されました。
この要領で、トップページに表示するもの自体を変更することもできるのでいろいろいじるといいです。
コーポレートサイトにリンクをつける
コーポレートサイトのメニューバーに「ブログ」を追加します。
ローカル環境でindex.htmlとpage.html、confirm.php、send.phpのメニューバーを編集します。
本記事の最後にメニューバーの変更が必要なファイルを表示していますので、すべて変更できたか確認して見てください。
index.html/page.html/confirm.php/send.php
<header>
<div class="container">
<div class="header-logo">
<h1><a href="index.html"><img src="img/square_logo.png" id="logo"></a></h1>
</div>
<!-- ハンバーガーメニューボタン -->
<div class="toggle">
<div>
<span></span>
<span></span>
<span></span>
</div>
</div>
<nav class="sp-menu menu">
<ul>
<li><a href="index.html#service">サービス</a></li>
<li><a href="index.html#news">お知らせ</a></li>
<li><a href="index.html#about">会社概要</a></li>
<li><a href="index.html#contact">お問合せ</a></li>
+ <li><a href="ブログのURL">ブログ</a></li>
</ul>
</nav>
<nav class="pc-menu menu-left menu">
<ul>
<li><a href="index.html#service">サービス</a></li>
<li><a href="index.html#news">お知らせ</a></li>
<li><a href="index.html#about">会社概要</a></li>
<li><a href="index.html#contact">お問合せ</a></li>
+ <li><a href="ブログのURL">ブログ</a></li>
</ul>
</nav>
</div>
</header>また、ブログページを別ブラウザで開きたい場合は、aタグでtarget属性で_blankを指定します。
例
<li><a href="ブログのURL" target="_blank">ブログ</a></li>追加したら、ブラウザで確認します。
「ブログ」が表示され、クリックするとwordpressのブログページに飛べばリンク成功です。
確認できたら、サーバーにアップロードして完了です。
メニューバーの変更が必要なファイル
メニューバーは、ページそれぞれ独立しているので、変更や追加があった場合はすべてのページで修正が必要です。
ブログの外部リンクを追加
| No. | ファイル名 | 内容 |
|---|---|---|
| 1. | index.html | メニューバーに外部ブログリンクを追加 |
| 2. | page.html | メニューバーに外部ブログリンクを追加 |
| 3. | confirm.php | メニューバーに外部ブログリンクを追加 |
| 4. | send.php | メニューバーに外部ブログリンクを追加 |