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

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

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

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

COCOONについて

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

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

COCOONの主なカスタマイズについて

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

  • Cocoon設定
  • 外観

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

Cocoon設定

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

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

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

スキン

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

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

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

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

外観:カスタマイズ

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

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

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

メニュー

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

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

メニューを作る

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

メニュー名を設定する

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

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

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

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

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

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

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

デフォルト名 変更後の名前 表示される人
Members 会員一覧 すべてのユーザー
アカウント アカウント設定

Logged In Users

(全てチェック有)

パスワードリセット  

Logged In Users

(全てチェック有)

ユーザー プロフィール

Logged In Users

(全てチェック有)

ログアウト  

Logged In Users

(全てチェック有)

ログイン  

Logged Out Users

メニューを階層化してまとめる

ついでにメニューの位置を次の画像のように階層化すると、スッキリと表示させることができます。

メニューの表示位置を指定する

COCOONはPCとスマホでメニュー表示が変わるため、「ヘッダーメニュー」と「ヘッダーモバイルメニュー」にチェックを入れましょう。

ここまでの設定が終わったら、「メニューを保存」しましょう。

工程⑥の作業で、サイトにナビゲーションメニューが表示されるようになります。

デザイン編のまとめ

今回ご紹介している会員サイトは、スキンを使えば簡単にサイトイメージを変えられるテンプレートです。

追加CSSを指定することなく表示を変更できるので、好みに合ったデザインに仕上げましょう。