ConoHa WINGコラボ記念!特別割引中

サイトのデザインを設定する

3 min 2,311 views

ウィジェット広告エリア
ウィジェットの機能について)

https://the-sonic.jp/wp-content/uploads/2020/02/masaoka.png

マサオカ

このページでは、サイトデザインの設定方法について紹介しています。

サイトのデザイン・カラー設定は、WordPress管理画面外観カスタマイズから行います。

Wordpressカスタマイザーの場所

ウィジェット広告エリア
ウィジェットの機能について)

サイト全体のカラーを設定する

カスタマイザーカラー設定

まずはサイトを差別化するため、サイト全体のカラーを設定しましょう。

THE SONICでは、最適なカラーバランスを簡単に表現するため、色の選択肢をギリギリまで少なくしています。

サイト全体の色設定3色、文字の色設定2色。合計5色を選ぶだけでカラー設定は完了します。

WordPressカラーの設定THE SONIC
  • 背景色
    背景に使う色。
  • メインカラー
    ヘッダーや見出し、タブ色などサイト全体に使われる色。自動で透過させてバランスを調整しているので、細かなカラーバランスは考えなくてOKです。
  • アクセントカラー
    ピックアップアイコンや新着記事の通知に使う色。ワンポイントで目立たせたい色を選んでください。
  • 文字色
    記事のテキストに使う色。黒系を選んでください。
  • リンクカラー
    リンクテキストに使う色。一般的に、青系=リンク色と認識されています。

ウィジェット広告エリア
ウィジェットの機能について)

サイト全体のデザインを設定する

カスタマイザー記事設定

THE SONICのサイトデザインは「記事設定」から編集可能です。

デザインの設定をする

カスタマイザー記事設定デザイン一括設定

THE SONICは、見出しや記事一覧カード・シェアボタンのデザインなどたくさんのデザインを用意しています。

THE SONICデザイン一括設定

「利用者のため・・・」と豊富なデザインを用意した結果、デザインの組み合わせが10億パターンを超えました

  • 記事一覧|見出しデザイン(4)
  • 記事一覧|カードデザイン(9)
  • 記事|シェアボタンのデザイン(5)
  • 記事|目次のデザイン(5)
  • h2見出し(6)
  • h3見出し(6)
  • h4見出し(6)
  • 記事|書いた人のデザイン(4)
  • 記事|関連記事のデザイン(3)
  • ページ送り|カードデザイン(PC)(2)
  • ページ送り|カードデザイン(スマホ)(4)
  • サイドバー|見出しのデザイン(8)
  • サイドバー|検索ボタンのデザイン(3)
  • サイドバー|書いた人のデザイン(4)

デザインを一括で設定する

https://the-sonic.jp/wp-content/uploads/2020/02/masaoka.png

マサオカ

そうなると、組み合わせを選ぶのがめんどくさい・・・

デザイン一括設定に任せてください!!

https://the-sonic.jp/wp-content/uploads/2020/02/kuma.png

くま

WordPressTHE SONICのデザイン一括設定

デザイン一括設定は、豊富なデザインの中からデザイナーが組み合わせた最適なセットをワンクリックで呼び出す機能です。

デザイン一括設定demo

見出しなどのデザインは、後から好みに合わせて変更できます。

各種デザイン変更demo

サイト全体のデザインを変更したい場合は、「デザイン一括設定」から行ってください。

設定できるデザイン
  • 記事一覧ページ
    • 見出しデザイン
    • カードデザイン
  • 記事ページ
    • シェアボタンのデザイン
    • 目次のデザイン
    • 見出し2のデザイン
    • 見出し3のデザイン
    • 見出し4のデザイン
    • 書いた人のデザイン
  • ページ送り
    • カードデザイン(PC)
    • カードデザイン(スマホ)
  • サイドバー
    • 見出しのデザイン
    • 検索ボタンのデザイン
    • 書いた人のデザイン

ウィジェット広告エリア
ウィジェットの機能について)

表示ルールの設定

カスタマイザー記事設定

WordPressカスタマイザー

THE SONIC機能の表示ルールを設定します。デザイン一括設定と同じく、記事設定から編集できます。

投稿ページの表示ルールを設定

投稿ページに表示される情報アイコンの表示・非表示を設定します。

情報アイコンの種類
  1. いいねボタン
  2. 更新日時
  3. 投稿日時
  4. 読了時間PV
  5. アイキャッチ
  6. この記事を書いた人(記事上)
  7. この記事を書いた人(記事下)

シェアボタンの表示ルールを設定する

表示するシェアボタンの種類と表示領域を設定します。

URLコピーボタンはスマホのみ表示です。

シェアボタンの種類
  • Twitter
  • Facebook
  • はてなブックマーク
  • LINE
  • Pocket
  • Note
  • URLコピー

シェアボタンの種類

  •  アイキャッチ下にシェアボタンを表示
  • 記事下にシェアボタンを表示
  •  左サイドにシェアボタンを表示

関連記事の表示ルールを設定する

記事下に表示する関連記事のルールを設定します。

WordPressTHE SONIC関連記事の設定

表示順はTHE SONICでカウントするPV数といいね数から選択します。

表示ルールはカテゴリーとタグから選択してください。

ページ送りの表示ルールを設定する

記事の下に表示される「前の記事へ」「次の記事へ」エリアの表示ルールを設定します。

WordPressページ送りの編集THE  SONIC

ページ送りを同一カテゴリ内の記事に限定する(親カテゴリ除外)」にチェックを入れると、その記事で選択しているカテゴリー(子カテゴリー)が関連記事として表示されます。

想定の利用例

親カテゴリ:ブログ
├ 子カテゴリ①:レンタルサーバー
├ 子カテゴリ②:WordPress
├ 子カテゴリ③:テーマ
└ 子カテゴリ④:カスタマイズ

このようなカテゴリーがあった場合。

レンタルサーバーの記事を見ている人の関連記事にブログ全体のカテゴリ記事が出てしまうと、範囲が広すぎる。というカテゴリー構成の場合に利用します。

記事に登録するカテゴリーは原則1つです。子カテゴリーにチェックを入れる場合、親カテゴリーにチェックを入れません

目次の表示ルールを設定する

目次を挿入するページ・表示ルールを設定します。

WordPress目次の設定THE SONIC

見出しラベルを変更したり、デフォルトで目次を閉じるなど細かく設定が可能です。

記事一覧ページの表示ルールを設定する

記事一覧ページで表示するラベルを設定します。

WordPress カスタマイザーの使い方ソニックの場合

トップページのNEW文言を変更したり、最新記事の「Newマーク」の表示期間を設定できます。

Newの期間は、記事公開日から起算して入力してください。

以上で表示ルールの設定が終わりました。お疲れ様でした。

POINT

デザイン設定はカスタマイザーの「記事設定」から行います。

次のページでは、はじめに設定して欲しいWordPressの設定について紹介します。

関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です