会員サイトデザイン テーマ2(シルバー)の仕様について

2017/4/22のバージョンアップにより会員サイトのデザインが追加されました。
左のメニューで会員サイト記事が選択しやすくなったデザインになっています。

site_sample_image
サンプル画像

※会員サイトの機能はスタンダードプランおよびマッハプランでご利用できます。

・デザインの選択

・会員サイトの初期化

会員サイトを利用するには「会員サイトの初期化」を行う必要があります。
 シナリオ管理メニュー → 会員サイト管理
で「会員サイト管理メニュー」の画面が表示されます。

会員サイトのレイアウトには

  • テーマ1(クラシック)
  • テーマ2(シルバー)

があります。
そこで「テーマ2(シルバー)」を選択して「初期状態にリセット」ボタンを押してください。
※注意:「初期状態にリセット」を押すと既存データは消去されてしまいます。
    デザインを確認したい場合は、別シナリオを作成してご確認ください。

layout_select

・タイトルの変更(header2.html編集)

・タイトルの横幅の変更

タイトルの横幅は

  • 中央にあわせた横幅(初期設定)
  • 画面全体にあわせた横幅

があります。

  • center_title
    中央にあわせた横幅
  • wide_title
    画面全体にあわせた横幅

「画面全体にあわせた横幅」に変更したい場合は、
 会員サイト管理メニュー → header2.html → 編集画面

変更前)
<div id=”header_top” class=”">

変更後)
<div id=”header_top” class=”full_width”>

と「class=”full_width”」を追加してください。

・タイトル名の変更

タイトルの変更には

  • テキスト型(初期設定):テキストによる変更
  • 画像型:header_title_img.pngの表示

があります。

・テキスト型(初期設定):テキストによる変更

会員サイトのタイトルをテキストで変換したい場合は
 会員サイト管理メニュー → header2.html → 編集画面
で下記の赤文字のところを変更するとタイトルが変更されます。

<div id="header_title_string">
<a href="./top.html"><span class="bold_font shadow_font">会員サイト<span></a><br>
<a href="./top.html"><span class="bold_font shadow_font">%item_name%<span></a>
</div>

・画像型:header_title_img.pngの表示

会員サイトのタイトルを画像で表示したい場合は
 会員サイト管理メニュー → header2.html → 編集画面

変更前)
<div id="header_title" class="string_mode">

変更後)
<div id="header_title" class="img_mode">

と「class=”img_mode”」に変更してください。

また、画像は
会員サイト管理メニュー → 【画像ファイルの一覧】→ 【画像ファイルのアップロード】
で「header_title_img.png」というファイル名でアップしてください。

・左メニューの変更

・右メニューに変更

左に配置しているメニューを右に配置したい場合は「custom.css」に下記のコードを追加してください。

/*メニュー位置を右に変更*/
#header {
float: right;
}

right_menu

・項目追加

会員サイト記事以外で項目を追加したい場合は
下記のコードの「TOP」の下に<li>(項目名)</li>で追加してください。

<!– TOP –>
<div class="top_menu_h3 myasp_accordion_open">
<h3>TOP</h3>
<ul class="menu">
<li id="top">
<a href="./top.html">TOP</a>
</li>

<li >
<a href="(URL)">追加項目1</a>
</li>
<li >
<a href="(URL)">追加項目2</a>
</li>

</ul>
</div>

赤文字:追加コード例
add_menu
項目追加

・会員サイト記事

会員サイト記事を表示・変更するには
 会員サイト管理メニュー → menu.html → 編集画面
で下記のタグを変更すると表示状態を変更することができます。

  • 閉じないメニュー・公開時間が古い順
    <category_and_article_list_asc>
  • 閉じないメニュー・公開時間が新しい順
    <category_and_article_list_desc>
  • 閉じるメニュー・初期状態が開いている・公開時間が古い順
    <category_and_article_list_accordion_open_asc>(初期設定)
  • 閉じるメニュー・初期状態が開いている・公開時間が新しい順
    <category_and_article_list_accordion_open_desc>
  • 閉じるメニュー・初期状態が閉じている・公開時間が古い順
    <category_and_article_list_accordion_close_asc>
  • 閉じるメニュー・初期状態が閉じている・公開時間が新しい順
    <category_and_article_list_accordion_close_desc>
  • lock_menu

    閉じないメニュー
  • open_menu

    開いているメニュー
  • close_menu

    閉じているメニュー

・サブ項目

サブ項目

  • 個人設定
  • パスワード変更
  • ログアウト

は非表示されています。
下記のコードのコメントを外すとメニューに表示されるようになります

<!–
<div class="bottom_menu_h3 myasp_accordion_open">
<h3>設定</h3>
<ul class="menu">
<li id="setting">
<a href="./setting.html">個人設定</a>
</li>
<li id="password">
<a href="./password.html">パスワード変更</a>
</li>
<li id="logout">
<a href="./logout.html">ログアウト</a>
</li>
</ul>
</div>
–>

sub_menu
サブ項目表示

・レスポンシブ画面

・メニュー表示

携帯などで会員サイトを表示した場合はレスポンシブ対応のメニューが表示されます。

responsive_menu
レスポンシブ時のメニュー

メニューを開いたままにしたい場合は
  会員サイト管理メニュー → menu.html → 編集画面

<mobile_menu>

をコメントアウトしてください。

responsive_open_menu
開いた状態のメニュー

・レスポンシブ時メニューの位置を変更する

レスポンシブ時のメニューを画面下に移動させたい場合は
mobile.cssの
 #headerのorder

 1 → 3
に変更してください

変更前

#header
{
order: 1;
}

変更後

#header
{
order: 3;
}

・ハンバーガー(3連ドット)メニュー

・メニューの表示

画面右上に「ハンバーガーメニューのアイコン」があります。

hamburger_icon
ハンバーガーメニューアイコン

「ハンバーガーメニューのアイコン」をクリックすると別画面が表示され
メニューの項目が表示されています。

hamburger_menu
メニュー表示

・メニューの変更

メニュー内の項目を変更したい場合は
 会員サイト管理メニュー → menu.html → 編集画面
の下記のコードがメニューの内容になっています。

<!– ハンバーガーメニュー(右上) –>
<div class="fat-nav">
<div class="fat-nav__wrapper">
<!– TOP –>
<div class="top_menu_h3 myasp_accordion_open">
<h3>TOP</h3>
<ul class="menu">
<li id="top">
<a href="./top.html">TOP</a>
</li>
</ul>
</div>

<!– 会員サイト記事 –>
<category_and_article_list_accordion_open_asc>

<!– 設定画面を追加したい場合は下記のコメントアウトをはずしてください –>
<!–
<div class="bottom_menu_h3 myasp_accordion_open">
<h3>設定</h3>
<ul class="menu">
<li id="setting">
<a href="./setting.html">個人設定</a>
</li>
<li id="password">
<a href="./password.html">パスワード変更</a>
</li>
<li id="logout">
<a href="./logout.html">ログアウト</a>
</li>
</ul>
</div>
–>
</div>
</div>

メニュー内の項目の変更については「左メニューの変更」を参考ください。

・YouTube動画の埋め込みについて

下記のマニュアルをご参考ください。
マイスピーの会員サイトの記事にYouTubeの動画を埋め込むにはどうしたらよいでしょうか?

コメントを残す

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)

サブコンテンツ

このページの先頭へ