SNS作成サービス!そーしゃるぱーく > 管理者ヘルプ > SNSのデザインを変更する

5.SNSのデザインを変更する

5-1.SNSのデザインについて

管理画面からはサイト内に使用するスキン画像変更配色CSS変更(カスタムCSS追加は上級者向け)の設定が可能です。


5-2.使用するスキン画像を変更する

SNS管理画面メニューで「デザイン」→「スキン画像変更」を選択するとSNS内で使用するスキン画像を変更できます。

プリセットデザインから設定

  • プリセットデザインは、OpenPNE版SNS-PARK版ITLab版がございます。
  • プリセットデザインを使うと、あらかじめ用意された画像をSNS内で使用することができます。各画像をクリックして表示されるサンプルを参考に、ラジオボタンをクリックしてデザインを選択し、「変更」をクリックしてください。画像が一通り変更され、選択したプリセットデザインがSNSに反映されます。
  • プリセットデザインの画像は既存の画像に上書きされてしまうので、既にカスタマイズ設定でオリジナルの画像が使用されている場合は必ず変更前に元の画像を保存しておいてください。
  • プリセットデザインITLab版を選択すると、HTML挿入ABCD(PC版)の箇所が微妙に変更になりますのでご注意ください。
    管理画面>デザイン>HTML挿入>PC版全ページ共通>HTML挿入(ABCD)にあるキャプチャー画像参照。
  • プリセットデザインから、招待制かOPEN制の選択設定を行っても、SNSの招待制かOPEN制の設定を行ったことにはなりません。この設定は、あくまでもスキン選択のみの設定となります。招待制かOPEN制の設定は必ずSNS設定の「招待制/オープン制」の設定を行ってください。(ITLab版に関してはスキンの選択設定はございません。)
プリセットデザイン

■カスタマイズ設定

自分で用意した画像をSNS内で使用するには、各画像下にあるa.「参照」ボタンでローカルからファイルを選択し、「変更」をクリックしてアップロードしてください。

カスタマイズ設定

また、画像を作成する際は規定のサイズにあわせて作成する必要があります。各項目の右下にあるb.「詳細を確認する」から画像サイズなどを参照して作成してください。
なお、「SNSポータルクリエイター」を使用した場合、設定したポータルページがログイン画面のかわりに表示されますが、その場合も「ログイン前ヘッダ」「共通フッタ」の画像は使用されますので、ポータルページを使用する場合でもヘッダ・フッタ画像を変更するにはこちらから操作を行ってください。


5-3.SNSの配色を変更する

SNS管理画面メニューで「デザイン」→「配色・CSS変更」を選択するとSNS配色設定画面に移ります。SNS内の配色を変更するには、ここでそれぞれのRGB値を入れて「変更」ボタンをクリックすると配色が更新されます。更新されると、RGB値の右に反映された色が表示されます。
また、「プリセットカラー」からパターンを選択すると、個別設定の配色がそのパターンで設定されますので、「変更」をクリックするとパターンに応じた配色が設定されます。配色パターンを選択したうえでRGB値を変更して更新することもできます。 配色を設定する際に「戻す」をクリックすると、現在保存されている配色設定に戻ります。

配色・CSS変更

5-4.携帯電話用画面の配色を変更する

SNS管理画面メニューで「デザイン」→「携帯版配色変更」を選択すると携帯電話用画面の配色設定画面に移ります。ここでそれぞれのRGB値を入れて「変更」ボタンをクリックすると配色が更新されます。更新されると、RGB値の右に反映された色が表示されます。
また、「プリセットカラー」からパターンを選択すると、個別設定の配色がそのパターンで設定されますので、「変更」をクリックするとパターンに応じた配色が設定されます。配色パターンを選択したうえでRGB値を変更して更新することもできます。 配色を設定する際に「戻す」をクリックすると、現在保存されている配色設定に戻ります。

携帯版配色設定

5-5.カスタムCSS追加(上級者向け設定)

配色設定画面の下部にある「カスタムCSS追加」欄にCSSを入力し変更すると、独自のCSSをSNS上に反映できます(ここで設定したCSSがデフォルトのCSSよりも優先されます)。

カスタムCSS

5-6.フリーページを使う(上級者向け設定)

フリーページを作成すると、HTMLを利用して自由に記述した情報をページ全体に掲載することができます。
フリーページを設定するには、管理画面メニューで「デザイン」→「フリーページ管理」を選択し、フリーページ管理画面から操作を行ってください。

フリーページ管理

フリーページを新たに作成する

フリーページ管理画面にある「フリーページの新規追加」から「ページタイトル」「ページ内容」を入力して「追加する」をクリックしてください。フリーページが作成されます。
ただし、フリーページは作成しただけではSNS上のどこからもリンクされていない状態となります。下記「作成したページを確認する」で表示されたページのURLをお知らせ欄やメール本文などに貼り付けることでSNSメンバーに告知してください。

なお、フリーページでの制限事項は以下の通りです。

  • HTMLタグが使用できますが、タグを使用しない改行は反映されず、URLも自動ではリンクになりません。
  • 初期設定で中央寄せになっていますので、それ以外の表示を指定する場合は別途HTMLタグにて指定してください。
  • 「SNS認証:なし」、「対象ブラウザ:携帯」を選択するには、「コンテンツ公開制」に設定する必要があります。⇒2-2.初期設定の手順
  • 「SNS認証:あり」のフリーページにアクセスするには、SNSのログインが必要です。
  • 「対象ブラウザ:PC」のフリーページはPCからのみ表示可能となっており、携帯電話からはアクセスできません。
(例)左寄せにする場合
<div align = "left">
--ここにページ内容----
</div>

作成したページを確認する

フリーページを作成するとフリーページ管理画面にある「フリーページリスト」にページが追加されます。ここでページタイトルをクリックすると、作成したフリーページを確認する事ができます。
また、作成したフリーページをSNSメンバーに伝える場合、ここで表示されたフリーページのURLを使用してください。

既存のページの内容を変更する

作成済みのフリーページの内容を変更するには、該当するフリーページ名の右にある
「編集」
をクリックすると、フリーページの内容が表示されますので、ここから変更を行ってください。

作成したフリーページを削除する

作成済みのフリーページを削除するには、該当するフリーページ名の右にある
「削除」
をクリックしてください。確認画面の後、フリーページが削除されます。


5-7.ナビゲーションバーを設定する

SNS管理画面メニューで「デザイン」→「ナビゲーション変更」を選択すると、SNS内で使用されているナビゲーションバーについて設定できます。ここで設定できるのはナビゲーション項目の「URL」と「説明(alt属性)」であり、画像(画像内の文字も含む)の変更は「5-2.使用する画像を変更する」で行ってください。

設定の手順は、まず変更するナビゲーションバーの種類を選び(グローバルナビゲーション、h系ナビゲーション、f系ナビゲーション、c系ナビゲーション)、それぞれの画像と変更欄を表示します。ここではグローバルナビゲーションを選択した場合の画面にて説明します。

ナビゲーション変更

ナビゲーションバーの並び順にあわせて項目がありますので、それぞれ「URL(クリックしたときのリンク先)」と「説明(マウスオーバー時に表示される文字)」を設定できます。それぞれの項目を入力しa.「変更」をクリックすると変更が反映されます。また、b.「リセット」をクリックすると、初期設定の状態に戻ります。
なお、「ログアウト」については固定となっており、変更できません。


5-8.テンプレートを挿入する(上級者向け設定)

挿入するテンプレートを作成すると、HTMLを利用して自由に記述した情報をSNS内の特定のページに掲載することができます。
テンプレートを設定するには、管理画面メニューで「デザイン」→「テンプレート挿入」を選択し、テンプレート挿入画面から操作を行ってください。
※「テンプレート挿入」機能は「SNS設定」で「コンテンツ公開制」に設定しなければ使用できません2-2.初期設定の手順

フリーページ管理

テンプレートを挿入する箇所を選択する

ページ下部にある「テンプレート挿入場所対応図」を参考に、左のリストよりテンプレートを挿入する箇所を選択してください。

挿入するテンプレートを編集する

挿入するテンプレートをHTML形式で記述し、「変更する」ボタンを押してください。

※タグの閉じ忘れ等がありますと表示が崩れるなどの問題が起こることがありますのでご注意ください。