会員サイトテーマのバージョンが「Ver.2.0」の場合は下記のマニュアルをご覧ください。
関連:会員サイトデザイン テーマ2(シルバー)の仕様について
新しく追加されたデザインに変更したいんですが、「変更する」ボタンがありません。どうしたらいいですか?
会員サイトテーマのバージョンが「Ver.3.0」の場合は本マニュアルをご覧ください。
Q.会員サイトの見た目を変更したいのですが、
WEBデザイナーにお願いして、デザイン調整を変更するなど、
高度なカスタマイズが可能なのでしょうか?
はい、可能です。
「デザイン変更」>「ディレクトリ&ファイル一覧」にある
htmlファイルやcssファイルなどを直接変更することで、
マイスピーで用意している基本デザイン以外のデザインに変更することができます。
※ご自身で用意したファイルをアップロードすることもできます。
会員サイトのデザインの変更方法
1)シナリオ管理メニュー > 会員サイト管理 をクリックします。
2)「ディレクトリ&ファイル一覧」より
会員サイトのHTMLやディレクトリを編集することができます。
MyASPの変更ページを使って変更する方法
2)編集画面が開き、htmlファイルの内容を変更することができます。
「置き換え文字の挿入」ボタンから、
ユーザー情報等の置き換え文字を挿入できます。
パーソナライズ(読者固有の情報)な内容に変更したいときに使うと便利です。
htmlファイルをダウンロードして変更する方法
1)ファイル名の右側にある「ファイルダウンロード」 アイコンをクリックします。
2)ダウンロードされたファイルを、
普段、使い慣れているHTMLエディタやテキストエディタなどで編集します。
3)編集したファイルを、
元ファイルがあるディレクトリの
「ファイルアップロード」 アイコンからアップロードします。
よくある質問
TOP画面のサンプル動画を削除するには?(top.htmlの変更方法)
「会員サイトを作成」した初期状態のTOP画面には、
MyASPのサンプル動画が掲載されています。
この動画は「top.html」から削除することができます。
1)「member」ディレクトリの
「top.html」のファイル名部分をクリックします。
2)下記の記述を削除して、『⇒保存する』をクリックします。
自身のYoutube動画などに差し替えたい場合は、
サンプルの記述を参考にURLやHTMLタグを置き換えてください。
<!– youtube サンプル –>
<div class="video-container">
<div>
<iframe src="https://www.youtube.com/embed/cv8y2m8uqKs?rel=0" frameborder="0" allowfullscreen> </iframe>
</div>
</div>
<div class="center">サンプル動画</div>
3)会員サイトのTOPページから動画が削除されます。
会員サイトの「タイトル」を変更するには?(header2.htmlの変更方法)
会員サイトのタイトルは、
「header2.html」に記載されています。
「header2.html」ファイルを編集することでタイトルを変更できます。
「header2.html」を編集する
1)「ディレクトリ&ファイル一覧」から
「parts」ディレクトリにある
「header2.html」のファイル名部分をクリックします。
2)サイト記事作成・編集画面の本文内から、
以下の記述の「会員サイト %item_name%」部分を
書き換えたいタイトル名に変更して『⇒保存する』をクリックします。
<div class="title"><span>会員サイト %item_name%</span></div>
3)会員サイトを確認すると、変更内容が反映されています。
「header2.html」の呼び出しタグについて
「top.html」等の各ページでは、
会員サイトのタイトルが記載されている「header2.html」を
呼び出すための置き換え文字が設定されています。
■置き換え文字
<header2>
この置き換え文字を削除することで
「header2.html」の内容自体を反映させないこともできます。
『<header1>』の置き換え文字で呼び出しています。
自身で用意したCSS(スタイルシート)を反映したい場合は、
「header1.html」を編集して追記するか、
置き換え文字を削除してご自身でHTMLタグを追記してください。
会員サイトのロゴ・ヘッダー画像を変更するには?(画像の挿入方法)
会員サイトのロゴ画像やヘッダー画像は、
「custom.css」から変更できます。
まずは、会員サイト用のロゴ・ヘッダー用の画像をアップロードしましょう。
画像のアップロード方法
1)「images」ディレクトリの
「ファイルアップロード」 アイコンをクリックします。
2)「ファイルを1つ選ぶ」ボタンからファイル選択、
もしくは直接ファイルをドラッグ&ドロップして画像をアップロードします。
3)アップロードした画像ファイルは、
ファイル名をクリックすることで内容の確認と画像URLを取得できます。
ロゴ・ヘッダー画像の変更方法
1)「css」ディレクトリの
「custom.css」のファイル名をクリックします。
2)変更したい画像のコメントアウト(/*、*/)を削除し、
画像URLのファイル名をアップロードした画像のファイル名に書き換え、
『⇒保存する』をクリックします。
該当する記述が無い場合は、
下記の内容をファイル名を書き換えて追記します。
■ロゴ画像を書き換える場合
#header-section .logo {
background: url(“../images/ロゴ画像名.拡張子”)no-repeat;
background-size: cover;
}
■ヘッダー画像を書き換える場合
#header-section {
background: url(“../images/ヘッダー画像名.拡張子”)no-repeat;
background-size: cover;
}
3)会員サイトにログインし、
変更した画像が反映されていることを確認します。
※参考画像ではロゴ画像だけ変更しています
補足(より高度なデザイン変更をする場合の参考)
スタイルを確認する方法
会員サイト管理画面上部にある、
『⇒スタイルガイドの表示』(※)をクリックすると、
現在利用しているテーマデザインに応じた
スタイルの参考(ガイド)を見ることができます。
※会員サイトのバージョンが「ver3.0」以上からご利用いただけます。
スタイルガイドでは、
見出し(hタグ)や区切り(hrタグ)、リンク(aタグ)等、
HTMLタグを利用した際に
MyASPのテーマデザインのCSSがどのように作用するかを確認できます。
会員サイトの編集時に参考にしてください。
「ディレクトリ」について
ディレクトリとは、ファイルを保管するためのフォルダのことです。
ディレクトリの追加方法
1)新しいディレクトリを追加したい階層の
ディレクトリにカーソルをあわせ、
「ディレクトリ作成」アイコンをクリックします。
2)ディレクトリ名を入力し、「保存」をクリックします。
ディレクトリ名には、
半角英数字、「-」(半角ハイフン)、「_」(半角アンダーバー)のみ利用できます。
3)作成したディレクトリが追加されます。
自身で追加したディレクトリは、
【任意】ディレクトリとして黄色のアイコンで表示されます。
任意ディレクトリには、
ディレクトリ名の変更や階層の移動、削除等の操作が行なえます。
3’)これに対して、既定ディレクトリ があります。
これは、MyASPの会員サイトを構成する上で必要なディレクトリです。
青色のアイコンで表示されています。
規定ディレクトリは新規シナリオ作成後、
「会員サイトを作成」した時点で用意されています。
また、規定ディレクトリに対しては、
ディレクトリ名の変更や階層の移動、削除等の操作はできません。