定期的に更新中!

SANGO|サイトを作るときに最低限変更したい箇所

SANGO|サイトを作る時に変更したい箇所

SANGOは、デフォルトでもデザイン性があってとても素敵なテーマでなのですが、最低限変更したいものがあります。その度に検索をしていたので、それをナレッジ&リスト化しておきたいと思います。
※随時更新中

サイトの色を変更したい

サイトブランディング(イメージを印象付けるため)には、サイトをどのようなカラーで配色するのかも重要です。そんな時に設定できるのが、以下の方法です。

設定できる項目

上記のページで、以下などが設定方法が確認できます。

  • メインカラー
  • アクセントカラー
  • ベースカラー
  • リンクのカラー
  • ヘッダー関連のカラー
  • ウィジェット関連のカラー

設定する方法

参考 色の設定をしようSANGOカスタマイズガイド

ブログのタイトル変更・表示位置の変更・ロゴを設置したい

ブログのタイトルや位置を変更できます。ロゴの設置なども可能です。

うまく反映できたときの見え方

本サイトでいうと、下記の1行目にある「Weeeeby|WEB制作の現場で役立つWEBtips」の部分が、ブログのタイトル(サイト名)になります。

ヘッダー

設定する方法

参考 ブログのタイトルとロゴ画像を設定しようSANGOカスタマイズガイド

メニュー(グローバルメニュー)を表示させたい

サイトのメニューを表示させることができます。
サイトのインフォメーションを担う、重要な部分です。

→ グローバルメニューとは

うまく反映できたときの見え方

本サイトでいうと、下記の2行目にある「ディレクション」「現場で使う用語集」「現場で使う基礎知識」「現場で使う文章一覧」の部分が、グローバルメニューになります。

ヘッダー

設定する方法

参考 メニューの設定をしようSANGOカスタマイズガイド

タブ切り替えのメニューを設置したい

TOPページにタブ切り替えのメニューを表示でき、最大で4個のタブを表示できます。

うまく反映できたときの見え方

タブ切り替え

設置するときに注意すること

  • タブが1個・3個のレイアウトは、スマホの表示がおかしなレイアウトになるので、タブの数は偶数(2個・4個)にすることをオススメします。
  • 左端は、最新情報が表示されるよう始めから設定されています。
  • カテゴリーのIDを調べる方法:カテゴリ一覧で調べたいカテゴリーの「表示」おnテキストリンクをクリックすると、「?cat=〇〇」と表示される。〇〇の部分がカテゴリーID。

設定する手順

  1. 管理画面の[外観]の[カスタマイズ]をクリック
  2. [SANGOオリジナル機能]の[記事一覧タブ切替(トップページ)]をクリック
  3. 取得したい記事一覧を選択したら完成
    ※タブやカテゴリをセレクトできます。

設定する方法|詳細

参考 SANGOトップページのタブ切替機能の設定方法まとめSANGOカスタマイズガイド

画面右側(右カラム)にメニュー(ナビゲーション)を付けたい

画面右側に、ナビゲーションを表示する方法です。
ユーザーが欲しい情報を探しやすくするためのナビゲーションになります。

設定する手順

手順.1
サイドバーを設定できる画面を表示する
管理画面の左メニュー[外観]の[カスタマイズ]をクリックします。すると画面が変わるので、メニューの[ウィジェット]をクリックし[サイドバー]をクリックします。
手順.2
サイドバーを設定する
メニューに、[+ウィジェットを追加]ボタンが配置されているので、それをクリックします。すると、追加できるウィジェットがスライド表示されます。
手順.3
追加するウィジェットを選択し反映する
追加したいウィジェットをクリックします。
手順.4
入力したい情報をウィジェットに入力する
後は、入力したい情報をウィジェットに入力すれば完成です。

表示する位置を変更したい場合

変更方法は簡単!
変更したいウィジェットをドラッグアンドドロップします。

※ドラッグアンドドロップ
変更したいウィジェットをクリックしたまま、変更したい位置に動かすこと。

Weeeebyで表示しているウィジェット

  • 検索
  • テキスト
  • タグクラウド
  • 人気記事
  • 最近の投稿
  • カテゴリー
  • 固定ページ

タイトルを装飾したい

タイトルを装飾する方法です。
ページをより見やすく・文章をより読みやすくするためには、タイトルの装飾は重要です。

うまく反映できたときの見え方

リボン風だと、こんな感じの見え方だよ~

ステッチ風は、こんな感じ~

折れてる見出しは、こんな感じで反映できるよ~

設定する方法1

簡単&ノーリスクで反映できる設定方法です。

参考 見出しの挿入方法と種類一覧SANGOカスタマイズガイド

設定する方法2

私は、見出しのカラーも変えたかったのと、hタグに反映することで、どのページでも自動的に見出しを反映させたかったので、以下の中から選んで、CSSを変更しました。
コーディングが苦手は私には、難しかった!そして、突然バグって・かなり焦った!!

なので、調整されたい方は、自己責任で&バックアップ(私の場合は、元データをメモ帳にコピペ保存してから変更着手)をしっかりとってから設定することをオススメします。

参考 CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選サルワカ | サルでも分かる図解説明マガジン

SANGO|記事投稿でよく使う装飾・タグリスト

記事投稿でよく使う装飾やタグをまとめました。

SANGO|記事投稿でよく使う装飾リスト SANGO|記事投稿でよく使う装飾・タグリスト

コメントを残す

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

CAPTCHA