ワードプレスで会員サイトを簡単に作っちゃうよ！15分で作る会員サイトデザイン編

「ワードプレスで会員サイトを簡単に作っちゃうよ！15分で作る会員サイトデザイン編」で作成した会員サイトはそのまま使用することも可能ですが、せっかくなら見栄えの良いサイトに仕上げたくありませんか？

今回使用している無料テーマCOCOONは、簡単にオシャレなデザインを作ることができます。

そこで、このデザイン編では会員サイトのカスタマイズについてをご紹介していきます。

COCOONについて

COCOONの初期設定は、白主体のシンプルなデザインです。

ただ、ワンタッチで変更できる「スキン」が用意されているため、簡単にサイト全体の配色変更などを済ませることができます。

カスタマイズを行う際は、ワードプレスのメニュー画面にある以下の2項目を使用します。

では、それぞれのカスタマイズ設定について見ていきましょう。

デザインなどの編集を行う画面は、Cocoon設定がメインとなります。

wordpressのメニューに表示されている「Cocoon設定」を選択し、上の画面を表示しましょう。

Cocoon設定のページ内に表示されているプレビューは、リアルタイム反映型ではありません。「変更をまとめて保存」を押すことでサイトに反映され、プレビューにも表示されます。

今回の会員サイトで使用しているスキンは、「Season (Spring) [作者: ぽんひろ]」です。

各スキン名の左に表示されているimageアイコンにカーソルを合わせると、イメージ画像が表示されますので、サイトの雰囲気にあうスキンを選択しましょう。

今回は上記のスキンのみを変更しています。

タイトルの見せ方や記事内のカスタマイズなどを行いたい場合は、「スキン」以外のタブも設定を行うと、よりこだわり感のある仕上がりになります。

ワードプレスのメニュー「外観」の中にある「カスタマイズ」を開きましょう。

表示されたページには、「サイト基本情報」などの計6種類のメニューがあります。

今回は、ナビゲーションメニューの追加について説明していきます。

メニューでは、ナビゲーションメニューなどの作成が行えます。

今回の場合は、「プロフィール」などが表示されているタイトル下のメニューです。

メニューを作る

管理メニューの「外観」にある「メニュー」を開きましょう。

メニュー名を設定する

グローバルナビやヘッダーメニューなどのわかりやすい名前を設定しましょう。

生成された固定ページを選択し、メニューに追加する

サイトを新設した直後であれば、サンプルページと新規登録以外の全ての固定ページを選択しましょう。

各メニューをカスタマイズする

ナビゲーションラベルを変更すると、表示させる名前を変更することができます。

「元の名前」に表示されているページにリンクが貼った状態となるので、好きな名前に変更しましょう。

ちなみにですが、今回は以下のように変更しています。