おすすめテーマ

【ZOOMY使い方講座】SNSサイトの基本設定をします。カラー設定中心で

ZOOMYを使ってSNSサイトを作る講座の第2回目です。

第1回目は、SNSサイトの完成形をイメージしやすいように、ダミー記事を必要数作りました。

今回は、TCDテーマオプションの中にある「基本設定」をしていきます。

先に結論を書くと、基本設定はカラー設定とロード画面設定をするくらいで大丈夫です。

あっという間に設定は終わりますよ。

★第1回目の記事はこちら↓

★最終的なSNSサイトはこちら↓
ZOOMYで作った猫のSNSサイト>>

ZOOMY基本設定の内容

まずは、ZOOMY基本設定の中身を見てみましょう。

たくさんの設定項目がありますよね。(全部で16項目)

これらの項目を全部設定しようとすると、時間もかかるし、気力も無くなってしまいます。

そこで、各項目の簡単な内容と、最初に設定する必要があるのかを説明したいと思います。

  • カラー設定
    SNSサイトのメインカラーを設定します。
    この色を設定すると、SNSサイトのイメージがある程度決まります。
    スライダーのボタン色や、グローバルメニュー色は別設定になります。
    後ほど設定をしていきたいと思います。

  • ファビコンの設定
    ブラウザのアドレスバーやタブに表示される小さいアイコンです。
    ファビコンは設定しなくても大丈夫です。

  • フォントタイプ
    SNSサイトでベースとなるフォントを選びます。
    好みで選べばいいのですが、初期設定どおり「游ゴシックベース」でOKです。

  • 大見出しのフォントタイプ
    大見出しで使うフォントを選びます。
    初期設定の「游ゴシックベース」としておきます。

  • 絵文字設定
    絵文字を使うかどうかの設定です。
    どうしても絵文字を使いたいという強い希望がない限り、絵文字は使わない(チェックは外す)ようにします。
    絵文字を使うと表示が遅くなったり、文字化けの原因となるのでおすすめしません。
    チェックはしないでおきます。

  • クイックタグ設定
    TCD独自のクイックタグを有効にします。
    関連記事カードリンク、囲み枠、フラットボタン、角丸ボタンなどを使うことができるようになります。
    クラシックエディターのプラグインを使うと項目がでてきます。
    初期設定どおりでOKです。

  • サイドバーの設定
    サイドバーを、左側に表示するか右側にするか選ぶことができます。
    初期設定は右側になっています。
    今回は初期設定どおりで、何も変更しません。

  • ロード画面設定
    ページ読み込み中に表示するロード画面の設定です。
    ロード画面は、「サークル、スクエア、ドット」の中から選ぶことができます。
    ここは後ほど設定します。

  • ホバーエフェクト設定
    マウスカーソルがサムネイル画像に乗ったときのアニメーションの設定です。
    ホバーエフェクトは、「ズーム、スライド、フェード」から選ぶことができます。
    ここは好みで選べば良いのですが、初期設定のズームにしておきたいとます。

  • Facebook OGP設定
    Facebook OGP設定ですが、ここはサイトが完成してからゆっくり設定すれば大丈夫です。
    今回は設定しません。

  • Twitter Cards設定
    Twitter Cards設定ですが、ここはサイトが完成してからゆっくり設定すれば大丈夫です。
    今回は設定しません。

  • ソーシャルボタンの表示設定
    ソーシャルボタンの表示を選ぶことができます。
    今回は初期設定どおりで、何も変更しません。

  • Googleマップ設定
    ページにグーグルマップを表示させることができます。
    位置を示すマーカーは、文字や色をカスタムすることができます。
    今回はグーグルマップを使うことはないので、何も変更しません。

  • カスタムCSS
    ページのデザインやレイアウトを自分オリジナルに変えることができます。
    SNSサイトが完成して、余裕ができたときに挑戦してみると面白いと思います。
    最初からこの機能を使う必要はありません。

  • カスタムスクリプト
    グーグルアナリティクスやPtengineなどのアクセス解析スクリプトを貼り付けることができます。
    スクリプト専用の項目があると、HTMLソースを編集しなくていいので楽ですね。
    サイトがある程度形になったら、アクセス数を計測するために使いましょう。
    今回は使いません。

  • 検索設定
    検索設定は、写真と投稿だけで大丈夫です。
    初期設定のままで、何も変更しません。

基本設定の項目は、これで全てです。

この中から、初期設定のままにしておく項目を除くと、「カラー設定」と「ロード画面設定」だけになります。

設定項目はたくさんありますが、基本設定は初期設定のままでいいものがほとんどです。

では、カラー設定とロード画面設定をしてしまいましょう。

ZOOMYのカラー設定

WordPressメニューから、

TCDテーマ→TCDテーマオプション→基本設定

とクリックしてください。

そうすると、一番上に「カラー設定」が表示されます。

ZOOMYの初期設定では、カラーは青系統で統一されています。

今回は、猫のSNSサイトを作るので、ちょっと落ち着いたピンクにしてみようと思います。

猫のかわいらしさは、ピンクがよく合いそうですからね。

カラーは、上の画像の「色を選択」の部分をクリックすると変えることができます。

「色を選択」をクリックすると、上の画像のようにカラーピッカーが表示されます。

自分の好みの色を、カラーピッカーから選びましょう。

マウスカーソルをちょっとずつ動かして、好みの色を探していきます。

今回はいろいろと試した結果、

メインカラー
#ed9589

サブカラー
#ed7e6f

記事本文内のリンク文字色
#ed8e82

としてみました。

「色を選択」の右側に上の文字をコピペすると、当サイトと同じ色になります。

ピンク色のサイトを作りたいときには、参考にしてみてください。

このカラー設定の色がサイト全体のイメージにつながるので、こだわってみてくださいね。

ZOOMYのロード画面設定

SNSサイトが表示するまでのわずかな待ち時間に、ロードアイコンを表示させることができます。

わずかな時間ですが、ロード中を示すアイコンが表示されないと、訪問者は他のサイトに行ってしまうかもしれません。

設定はしておいた方が良いと思います。

「ロード画面を表示する」にチェックを入れます。

  • ロードアイコンのタイプ
    今回は「サークル」を選択します。

  • 最大表示時間
    最大表示時間は3秒にしておきます。
    3秒はけっこう長い時間だと思います。

  • ロードアイコン色
    ロードアイコンの色は、先ほど設定した「カラー設定」のメインカラーと同色がいいでしょう。
    今回は「#ed9589」とします。

  • サブカラー
    サブカラーは、「カラー設定」のサブカラーにしておきます。
    今回は「#ed7e6f」とします。

ロード画面の設定は、これで終わりです。

ZOOMY使い方講座 ここまでのまとめ

ZOOMYの使い方講座の第2回目は、TCDテーマオプションの「基本設定」の説明でした。

基本設定は設定しなくてはいけない項目は少なく、「カラー設定」を自分のサイトに合う色に変更しておけば大丈夫です。

色はカラーピッカーで選ぶことができますが、なかなか好みの色を探すのは時間がかかります。

私もマウスカーソルを細かく移動させながら、好みの色を探しました。

今回はネコのSNSサイトということで、やわらかいピンクを主体にした色にしてみましたが、いかがでしょう?

自分のSNSサイトのイメージカラーをどうするか、楽しみながら探してみてくださいね。

★第3回目の記事はこちら↓

★おすすめテーマはこちら↓
2019年、WordPressテーマの目的別おすすめベスト3を発表!>>

ZOOMYの詳細はこちら>>

関連記事

  1. ZOOMY使い方講座

    【ZOOMY使い方講座】自分オリジナルのSNSサイトを作ろう。超簡単で…

  2. TCDのZOOMY

    TCDの「ZOOMY」は、SNSサイトの運営とメルマガ配信ができるテー…

  3. TCDのNUMERO

    TCDの「NUMERO」は、「いいね」と画像編集ができるギャラリーテー…

  4. STYLYトップ

    TCDの「STYLY」は、サイトをスタイリッシュにまとめるギャラリー向…

  5. 【ZOOMY使い方講座】コンテンツビルダーでSNSサイトのトップページ…

  6. 【ZOOMY使い方講座】ヘッダーコンテンツの画像スライダーを設定しよう…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP

おすすめテーマ

企業サイトにおすすめの高品質なWordPressテーマ12選【日本語対応】

おすすめテーマ

女性向けの美しい(かわいい)WordPressテーマを集めました

おすすめテーマ

ブログにおすすめのWordPressテーマ。クオリティーの高い有料テーマに厳選し…

ONEでCTA設置

おすすめテーマ

美容室・サロン向けの高級感あるWordPressテーマを比較してみました

TCDテーマ「SKIN」

おすすめテーマ

アフィリエイトにおすすめのWordPressテーマ。すべて複数サイトで使い回しO…

おすすめテーマ

WordPressでネットショップが作れるおすすめテーマ【Welcart・Woo…

おすすめテーマ

トップページに動画再生可能な、おすすめのWordPressテーマを集めました

おすすめテーマ

2019年、WordPressテーマの目的別おすすめベスト3を発表!

目的別テーマのおすすめベスト3