新サイトに移行中です。移行済みの記事は kireigo.com に遷移します

SANGOのカスタマイズ(デザイン編)最初に行う設定2

SANGOのカスタマイズ(デザイン編)

ここでは、ブログのデザインやレイアウト、その他のカスタマイズを説明します。記事の表示の仕方、サイドバーやフッター、メニュー等です。これが終われば、ブログの形が完成します。あと少し頑張りましょう。

操作メニュー

ダッシュボードのメニューを確認しておきます。

投稿メニュー

投稿メニュー

外観メニュー

カスタマイズメニュー1

1.1カスタマイズのメニュー

カスタマイズメニュー2

カスタマイズ

画像編に書いてないもので、最初に設定しておきたいものを順番に説明します。

画像編を見てない方はこちらへどうぞ。

SANGOのカスタマイス(画像編)SANGOのカスタマイズ(画像編)最初に行う設定

1.1外観のカスタマイズ(2)色 を選んで設定します。

色設定

このブログでは、背景色を少し変えました。

時々気になるデフォルトのカラーコードです。(主なもの)
メインカラー   #6bb6ff
薄めの背景色   #c8e4ff
アクセントカラー #ffb36b
リンク色     #4f96f6

デザイン・レイアウト

1.1外観のカスタマイズ(3)デザイン・レイアウト を選びます。

ここでは、記事一覧のレイアウト、フォントのサイズ/種類が変更できます。フォントのサイズ/種類は、普通は変更不要です。

記事一覧のデフォルトは四角形です。

記事レイアウト

横長にできます。好みに合わせて変更しましょう。

記事レイアウト横長

SANGOオリジナル機能

1.1外観のカスタマイズ(4)SANGOオリジナル機能 を選びます。
ここでは次の事ができます。

  1. 記事一覧タブ切替(トップページ)
  2. モバイルフッター固定メニュー
  3. ヘッダーお知らせ欄
  4. フォローボックス(記事下)
  5. 関連記事(記事下)
  6. おすすめ記事(記事下)
  7. CTA(記事下)
  8. トップページへ戻るボタン
  9. シェアボタンの設定

このブログでは、関連記事(記事下)のみ有効にしています。

関連記事
関連記事(記事下)の表示例

メニュー、ウイジェット

ブログの全体像はこんな感じです。

全体像

メニューとウイジェットで行うのは、主に次のものです。

  1. ヘッダー部分のメニュー
  2. サイドバーの表示項目設定
  3. フッターの表示項目設定
MEMO
ウイジェットは広告の表示も設定できますが、ここでは省略します。

メニューとウイジェットは2か所にあります。

一つ目は1.2ウイジェット、1.3メニューです。
2つ目は1.1カスタマイズ(8)メニュー、(9)ウイジェットです。

MEMO
2つ目のカスタマイズの中では、右側で設定後の画面のプレビューを見ながら設定できます。慣れてくると、メニューの階層が浅い方が便利かもしれません。

ヘッダー部分のメニュー

1.3メニュー、または、1.1カスタマイズ(8)メニュー で設定します。

ヘッダーメニュー

先頭の icSPEng はトップページに遷移します。HOME が自然ですが、このように自由に文字を設定できます。

ストーリーとレッスンは、表示の順番を投稿順にしたかったので、固定ページで投稿順の記事一覧画面を作って、カスタムリンクでそのURLを指定しています。

投稿順の記事一覧画面はショートコードを使って簡単に作成できます。

ストーリー固定ページ

ショートコードで、2つ目のカテゴリー、30件表示、投稿順(ASC) を指定

MEMO
カテゴリーを使うと新着順になります

他のメニューは、カテゴリーとタグを設定しています。

画面の下の方にある メニューの設定 で、ヘッダーメニューをチェックすることで、ヘッダー部分に表示されます。モバイル用フッター固定メニューはモバイル端末の画面下に固定表示されます。

モバイル用固定メニュー
モバイルのフッター固定メニュー

サイドバー

1.2ウイジェット、または、1.1カスタマイズ(9)ウイジェット で、サイドバーに表示させたい項目を選びます。

ウイジェットサイドバー

画像にあるもの以外で、最近の投稿や、カテゴリー、タグなどいろいろありますので、好みに合わせて表示項目を選び設定しましょう。

MEMO
このブログでは、プロフィールはテキストで作成していますが、【SANGO】プロフィールで簡単に設定できます
MEMO
一番下のタイルメニューは、カスタムHTMLで作成しています。詳細な記述の仕方はここでは省略します。なお、現在は【SANGO】ボックスメニューが追加されており、それを使えば簡単に設定できます。

記事を見るときは目次が表示されます。(SANGOオリジナル機能・関連記事(記事下)の画像を参照)
これは、プラグイン Easy table of Comtents を利用しています。このプラグインは、SANGO公式ページでも紹介されています。インストールして簡単な設定で利用できます。ウイジェットに目次が追加されるので、追尾サイドバーに設定しています。

フッター

フッターは、左、中、右の三つに別れています。サイドバーと同じように、表示したいものを選んで設定できます。

このブログでは、左に固定ページ、中にカテゴリー、右にタグを表示しています。ただし、表示の順番と表示形式を統一したかったので、好みの順番のメニューを作り、そのメニューをそれぞれのウイジェットに設定しています。

ウイジェットフッター

カテゴリー、タグ

メニューウイジェットで度々出てきたカテゴリーとタグの設定方法を説明します。カテゴリーは、記事を書き始める前に決めることをお勧めします。このブログで言えば、ストーリー、レッスン、ノウハウ、ブログ、その他です。

カテゴリー

ダッシュボードで、記事のカテゴリー を選び設定します。

カテゴリー

カテゴリーの数が多くなる場合は、親カテゴリーを作り分類することもできます。

MEMO
スラッグはURLの一部になるので、英数字で設定しましょう。

タグ

タグはキーワードで分類する付箋紙のようなものなので、必要に応じて追加しています。一つの記事に複数のタグを付けても問題ないので、読者が記事を見つけやすくなる工夫をしてください。

ダッシュボードで、記事のタグ を選び設定します。

タグ

設定

3.設定 では次の事ができます。

  1. 一般設定
  2. 投稿設定
  3. 表示設定
  4. ディスカッション
  5. メディア
  6. パーマリンク
  7. プライバシー

①一般設定、⑥パーマリンク は、WordPressの初期設定 で説明しているので、ここでは省略します。②投稿設定、⑤メディア も変更不要のため省略します。

表示設定

3.設定の表示設定 を選んで設定します。

トップページや各カテゴリーの1ページの表示投稿数を設定できます。10件~30件がお勧めです。

ディスカッション

3.設定のディスカッション を選んで設定します。

ディスカッション設定

主にコメントの設定になります。コメントを許可しないのが管理は楽ですが、許可する場合は、怪しいコメントの対策として、コメントの手動承認を必須にしておきましょう。

MEMO
コメントを許可する場合は、プラグイン Invisible reCaptcha for WordPress のインストールをお勧めします

プライバシー

3.設定のプライバシー を選んで設定します。

プライバシーページを設定した場合は、フッターのCopyrightの上に「プライバシーポリシー」の文字でリンクが表示されます。

固定ページ

固定ページで、プロフィール、プライバシーポリシー、お問い合わせを作成しています。必須ではありませんが、Wordpressを利用する人の多くは、Googleアドセンスやアフェリエイトを考えていると思います。審査に合格するためにも早めの作成をお勧めします。

まとめ

WordPressの初期設定から始まり、画像の設定、そしてこの記事で設定した、ブログのデザインやレイアウト、その他のカスタマイズで、ブログの形はできました。ここまで来たら、多少の事は気にせず記事を書き進めて大丈夫です。その中で気になる部分を少しずつ変更し、理想のブログに仕上げましょう。

お疲れさまでした。

2021/06/01 SANGO V2.6.0 ウィジェットにボックスメニュー追加を反映
SANGOのカスタマイス
呼子朝市 佐賀