7/15日から始まるAmazonプライムデーの準備はおすみですか? ギフト券チャージで最大3%ポイント還元!

たけのこブログのSANGO+PORIPUの設定

たけのこ

SANGOの公式ページを見ながらブログの設定をしたんだけど、少したつとどうやって設定したか忘れてしまうんだよね…。

あと、カスタマイズも増えてきて何を修正したか忘れてしまう…。

 

本ブログのデザインは、WordPressの有料テーマであるSANGOPORIPUを使用しています。

公式ページに設定方法は全てのっているのですが、情報量が多く、もう一回調べたいときに手間がかかってしまいます。

それが面倒になってきたため、自分のブログで設定したことを本記事にまとめておきます。

もし、SANGO+PORIPUユーザーで「たけのこブログの設定を知りたい」という方がいたら参考になればと思います。

 

合わせて読みたい

本ブログの多くのカスタマイズの多くは、くまさん(@Bearface18)のサイトを参考にしています。

参考記事for-men / SANGOカスタマイズまとめ

配色

本ブログの配色パターンは、サルワカの配色パターンの一つを参考に設定しています。

パッと見おしゃれな配色だなと思ったのと、「万人受けする配色」という言葉に惹かれました。

自分の感性は、万人受けするものが好きということですね。笑

参考 配色パターン見本40選サルワカ

 

参考までに、本ブログで設定している色コードをのせておきます。

  • メインカラー:#aad6ec
  • 薄めの下地色:#eef9ff
  • アクセントカラー:#fc9d9d
  • テキストリンク色:#0044cc
  • ヘッダー背景色:#aad6ec
  • ヘッダータイトル色:#fff
  • ヘッダーメニュー文字色:#fff
  • ウィジェットのタイトル色:#aad6ec
  • ウィジェットのタイトルの背景色:#eef9ff
  • フッターウィジェットの背景色:#e4e4e4
  • フッターウィジェットの文字色:#5b5b5b

見出しの初期設定を変更する

SANGOのデフォルトの見出しはとてもシンプルです。

デフォルトだとこれ▼

ただ、

「オシャレな見出しを使いたい」

「使う見出しはいつも同じ」

という人は多いはずです。

サルワカでは、デフォルトの見出しを設定する方法を紹介してくれています。

参考 SANGOでデフォルトの見出しを変える方法サルワカ

 

僕の見出しはこのようになっています。

 

参考までに自分の見出しのコードを紹介します。

見出しh2

もし使用される場合は、7行目の色コードを自分のメインカラーに変更するとよいと思います。

見出しh3

見出しh4

メニューの設定

ヘッダーメニューのみ設定

本ブログでは、PCのみヘッダーメニューの設定しています。

【PC】

【スマホ】

参考 メニューの設定をしようサルワカ

メニューで使用しているアイコン

なお、メニューにアイコンを設定する方法は、「メニューの設定をしよう」と同じページに記載してあります。

念のため下にURLを貼っておきます。

参考:メニューテキストにはアイコンが使用可能

 

参考までに、本ブログのメニューで使用しているアイコンは以下になります。

  • :address-card
  • :desktop
  • :bank
  • :tags

トップページにおすすめ記事を表示する(PORIPU)

トップページにおすすめ記事を表示するのは、PORIPUの機能を使っています。

PORIPUだと記事のIDを設定するだけで、下のようなおすすめ記事をトップページに表示することが可能です。

参考 おすすめ記事をトップページに設置するPORIPU

サイドバーにプロフィールを表示する

本ブログでは、サイドバーにプロフィールを表示するようにしています。

これ▼

表示の仕方は、下のサルワカさんのサイトに詳しくのっています。

参考 サイドバーにプロフィールを表示サルワカ

 

Twitterのアイコンは、くまさん(@Bearface18 )のサイトを参考にカスタマイズしています。

参考 【SANGOを自分でカスタマイズ】SNSボタンを横長2列にしてみたfor men

そのほかのカスタマイズ

現在の見出しを上部に表示する

今読んでいる見出しを画面の上部に表示するカスタマイズです。読者の方が今読んでいる内容を確認できますね。

これ▼

 

はるしかさん(@HAL_Gatherer)の記事を参考にしました。

参考 SANGOで現在の見出しを上部に追従させるサルワカ風カスタマイズ雑食こじかの知識箱

 

僕は、表示させる色を自分のブログのメインカラーに変更しています。修正したのは以下の部分です。

function.phpに追加するコードの10行目くらい
修正前:background-color: #899cff;
修正後:background-color: 自分のメインカラーのの色コード

Rinkerのデザインを変更

また、くまさん(@Bearface18 )のサイトを参考にしています。

参考 【SANGOを自分でカスタマイズ】Rinkerのデザインを変えてみるfor men

一覧記事の画像の周りに余白をつける

またまた、くまさん(@Bearface18 )のサイトを参考にしています。

参考 【SANGOを自分でカスタマイズ】記事カードの画像に余白をつけておしゃれ感をだしてみるfor men
たけのこ

ここまでくると、SANGO+PORIPUユーザはくまさんのサイト見た方が早いですね。

くまさんのカスタマイズ記事はこちらです

過去の設定

記事一覧をタブで切り替える

記事一覧に、新着記事とおすすめのタブを設定しています。

ホーム画面のこれ▼

デフォルトでは新着記事が一覧に表示されます。

しかし、たけのこブログを知ってもらうためには、読んで欲しい記事をアピールする必要があります。

そのため、おすすめタブを用意して、読んで欲しい記事を設定しています。

参考 SANGOトップページのタブ切替機能の設定方法まとめサルワカ

タブの記事一覧画面を表示するURL

サルワカさんの記事だけでは分からなかった箇所を補足します。

WordPress初心者の自分には、

「手順5: 「もっと見る」のリンクを設定する」

のURLに何を設定したらいいか分かりませんでした。

 

タブで一覧を切り替えるためにはタグを設定しますが、

カテゴリーと同じように、タグにもスラッグを設定します。

タグの記事一覧を表示したい場合、URLは以下のようになります。

https://自分のサイトのURL/tag/設定したタグのスラッグ

サンプルに僕が設定したURLを記載します。

https://takenoko-blog.com/tag/recommend/

まとめ

本記事では以下の設定方法についてまとめました。

  • 配色
  • 見出し(h2)の初期設定
  • メニューの設定
  • 記事一覧をタブで切り替える
  • サイドバーにプロフィールを表示する

ブログのアイキャッチ画像を使用しているサイトは下の記事で紹介しています。

ブログのアイキャッチ画像に使えるおすすめサイト6選

WordPressで特定のカテゴリを一覧記事に表示させない方法を下の記事でまとめています。

WordPressで記事一覧に特定のカテゴリーを表示させない方法