bitcoin変動中!初めての口座開設はビットフライヤーがおすすめです

SANGOのカスタマイズまとめ!一番最初にやる設定集

だいたい 12 分で読めます。

今あなたがこの記事を読んでいるということは、SANGOを購入されたということですね。
\いらっしゃい/
SANGOカスタマイズ沼からぬけだせずにいるマサオカです。

マサオカ

SANGOはずっと居続けたくなるテーマ。美しさだけじゃなく、読み手を一番に考えた細やかな気遣いを所々に感じます。あなたもそういう想いに惹かれたんでしょうか。

SANGOカスタマイズガイドのコンテンツが増えてきました。今からSANGOを使い始めようとしている方は、その情報量にびっくりすると思います。

ヨメ

どれから設定やったら良いかわかんない…

 

SANGOを購入したばかりのワードプレサーのために、SANGOをインストールしたら最初に設定しておく内容をまとめておきます。

私の公開しているSANGOカスタマイズはマニアックな内容が多くて、「初めてWordpressを使う人には使いにくかった」とご指摘いただきました。

この記事では、初めて有料テーマを買った人向けに書きました。

お願い
もし、この内容で分からない箇所があったらコメント欄やTwitter(@iMassa07)で教えてください。記事作りに役立てたせていただきます。

必須項目の詳細な解説は、外部リンクに誘導させていただいています。

このページを見ればSANGOの設定が終わるようなページにしたいと思います。

マサオカ

書いているうちにだんだん文量が多くなってきました。目次を見て必要そうな項目だけ選択してください。

この記事で書いていること

  • テーマで最低限設定しておくこと
  • アドセンス広告の配置と種類
  • プラグインの設定

SANGOテーマのカスタマイズ

カスタマイズ前にSANGOの子テーマ入れておく


必須
子テーマはカスタマイズ用のテーマ

SANGOは公式ガイドに「SANGOの設計図」を公開していてカスタマイズしやすいテーマです。「そのまま使うぜ!」っていうロックな方以外は、テーマのカスタマイズをすることになります。子テーマにしておけば、「修正失敗した…」というときにも元に戻すことができます。子テーマは必ず入れておきましょう。

子テーマを入れる理由

  • テーマを更新しても、カスタマイズした内容が消えない!
    子テーマを使っていないと、テーマが更新される度にカスタマイズし直さないといけません。
  • カスタマイズを失敗しても簡単に元に戻せる!!
    子テーマを使っていないと、カスタマイズをミスした後元に戻すのは大変です。

SANGO子テーマのインストール


カスタマイザーでSANGOのデザインを決める

必須

カスタマイザーで表現するのは「ブログ=あなたのイメージ」

ブログは、あなたのもう一つの顔になります。色、読みやすさ、デザイン。第一印象を決める部分を作っていきましょう。

テーマカラーに悩んだら、人工知能に相談しても良いですね。「48の色を選んだら、人工知能が好みの色を提案してくれるやつ

今回紹介する箇所以外にも、たくさんの設定をすることができます。今回は最低限これだけ!という設定にしぼりました。

カスタマイザーを編集する理由

  • 自分のブログにあった雰囲気にする!
    発信する内容と自分の雰囲気・ブログのイメージを統一させましょう。
  • 別の記事も知ってもらえる!
    記事に興味を持った人が、筆者のあなたのことを気になったときにすぐに行動できます。

この項目で最低限やることリスト
  • サイト基本情報
    すべての項目を設定。ブログアイコンまで作って置きたいです。なければ一時的に自分のプロフィールアイコンでも構いません。

  • すべての項目を設定。ブログのカラーを決めます。「色の設定をしよう」にて細かな解説があります。
  • デフォルトサムネイル画像
    すべての項目を設定。
  • メニュー
    すべての項目を設定。一番上に表示されるカテゴリへのリンクや、プライバシーポリシー、運営者情報へのリンクを設定しましょう。
  • ウィジェット
    別途解説します。次の章をごらんください。
  • 関連記事(記事下)
    タイトルを「関連カテゴリの記事」に変更する。詳しくは「記事クリック率が劇的に上がる!SANGOの関連記事カスタマイズ」で書きました。
  • フォローボックス
    Twitterのユーザー名を登録。フォローボタンが作られます。
  • トップへ戻るボタン
    すべての項目を設定。文章が長くなるときに、右下にトップまで戻るボタンを実装します。
  • 詳細設定
    Google AnalyticsトラッキングIDとTwitterアカウントを入力。アナリティクスは直接埋め込むよりこちらに書いた方が早く、安全です。Twitterアカウントは、シェアされたときに、投稿に自分のアカウントが追加されます。
  • パブリッシャーを登録
    →すべての項目を設定。パブリッシャーとは「発行元」を示すものです。自分の名前とブログロゴ画像を入れます。

マサオカ

余裕があれば、モバイルフッターメニューの設定もやっちゃいましょう

ヨメ

モバイルフッターメニューを使わないなら、「スマホのヘッダーメニューを固定する方法」もおすすめです

カスタマイザーを設定する方法


ウィジェットでサイドバーのデザインの設定をする

必須

サイドバーは多くの記事を知ってもらうためのもの

ブログで最も重要なのはコンテンツですが、サイドバーの使い方によってブログがより価値のある物になります。PVの増加はブログ運営のモチベーション。もっとPVを上げたいと思ったら、他の記事も読んでいただけるとうれしいです。

サイドバーを入れる理由

  • ブログをもっと読んでもらえる!
    サイドバーに関連する記事を置いて置けば、興味を持った読者が読んでくれるきっかけになります。
  • 読んでもらいたい記事をアピールできる!
    プロフィールやおすすめ記事のような、初めて来た人に読んでもらいたい記事を置くことで人物像が伝わります。

サイドバーに何を表示させる?

ここは個性を出すところなので、入れておいて欲しいものをまとめますが、自分が入れていきたいものを追加してください。ただし、増やしすぎは禁物です。

この項目で最低限やることリスト
  • サイドバープロフィールメニューボックス・人気記事(後は好きなものを)
  • 追尾サイドバー(PCのみ)カテゴリ人気記事・目次どちらかをお好みで※この位置にAdSenseはNG
  • スマホ用ナビドロワー→カテゴリー(後は好きなものを)
  • AdSense広告関連→全部埋める※下で解説

ウィジェットを追加する方法


見出しのデザインをカスタマイズ

 

できれば

見出しで個性を出す

初期設定の見出しはシンプルですが少しさみしいので、自分の好きな見出しデザインに変えましょう。この変更はみんなやってる基本的なカスタマイズ。見出しデザインは「CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選」から参考にしましょう。

h3タグについてのメモ

SANGOのH3タグをそのままカスタマイズして使うと、左側に横棒が残ってしまいます。そんなときは、修正したいコードに以下のコードを付け加えてください。

css

/*--------------------------------------
  デフォルトの見出しデザインをリセットh3
--------------------------------------*/
.entry-content h3 {
border-left: none;
padding-left: 0;
}

デフォルトの見出しデザインを変える


ふきだしデザインをカスタマイズ

 

できれば

吹き出しで少し違うSANGOに

吹き出しのデザインはSANGOの機能にはないので、カスタマイズして変更します。左右の吹き出しの色を変更しましょう。色を使いすぎると読者が混乱する原因になります。使う色は3色に抑えることがポイントです。

ふきだしを変える理由

  • 個性が出る
    そのままつかう人が多いので、個性がでます。
  • 色によってはテーマと合わない場合があるので注意
    テーマの雰囲気と合わせるために、テーマカラーと似た色を選びましょう。

マサオカ

おや…こんなところに私のカスタマイズ記事が…!

コピペ一発!SANGOの吹き出しの色を変えるカスタマイズ


カテゴリーの設定をする

できれば

カテゴリページを特化ブログのトップページのように使う

SANGOでは、カテゴリ説明欄に詳しいジャンル説明を書くことができます。カテゴリの内容やリンクを貼ることができるので、カテゴリ分けと共に重要な部位となっています。オススメ記事のリンクや、「このカテゴリを誰に読んで貰いたいか」などを書きましょう。詳しい理論は「カテゴリーを整理したら「説明」を入れてアクセスを増やそう!|クロネのブログ講座」が参考になります。

カテゴリごとの順位を表示をするカスタマイズ」で、カテゴリ内だけで読者が巡回できるようにしたのでよければご参考に。

カテゴリを整理する理由

  • 興味を持ったジャンル一覧が見やすくなる!
    目的の記事を見つけて貰いやすくなる。
  • おすすめの記事を紹介できる
    カテゴリ紹介の位置にリンクをおいて、読んで欲しい記事へ誘導できる。

SANGOでカテゴリを最適化する


CSSプチカスタマイズノート

お好み

もっと自分らしく表現する

SANGOの文章を読みやすくしていきましょう。要望があるカスタマイズがあれば、まとめていきます。こちらは追記していきます。

文字の行間を詰める

CSSに追記してください。1の部分をいじると、行間が変わります。1が文字の基準サイズだから参考に。

文章全体の文字の行間を詰める
body {
 line-height: 1em 
}
全体の行間が変わります。

タグで囲った部分の行間を詰める
.gyokan span{
 line-height: 1em 
}
タグで囲った部分の行間が変わります。
記事につかうHTML
<span class="gyokan">行間を詰めたい文字をいれる</span>

カテゴリの説明欄でショートコードを使えるようにする

カテゴリの説明欄に、ショートコードを使えるようにします。表現の幅が広がりますね。
以下のコードをfunctions.phpに追記します。

コード
//「説明」でショートコードを使えるようにする
add_filter( 'term_description', 'custom_term_description' );
function custom_term_description( $term ){
 if( empty( $term ) ) return false;
 return apply_filters( 'the_content', $term );
}

アイキャッチにキャプションをつける

アイキャッチ画像に「引用元表記」をつけないといけないフリー素材を使っている方は、キャプションを使って引用元を明記しておきましょう。

商用画像にはキャプション必須!アイキャッチに表示する方法

アドセンス広告のカスタマイズ

アドセンスは一番収益の取りやすいマネタイズ方法です。私は結構ここを大切にしています。AdSenseの収益化に興味がなかったら飛ばしてOKな内容です。

マサオカ

SANGOユーザーは「お金」よりも「あり方」を大切にしてる印象なので、いれるか迷いました。

ウィジェットで広告の設定をする

必須

ブログをアドセンスで収益化するために

AdSenseの広告収入は、①クリック数×②クリック単価で決まります。クリック単価はジャンルによって変わるので操作できません。クリック数を上げるためには、クリックしてもらいやすい位置にクリックされやすい広告を置くことが大切です。

広告配置をこだわる理由

  • ブログが収益化しやすくなる!
    どうせ見られるなら収益化できたほうがいいですね。
  • 広告の置き方でクリック率は違う!
    以前のクリック率は0.2%でした。これが1.2%になると、1000人が読んだときに100クリックの差が出ます。クリック単価が50円の場合、5000円の差が生まれます。何もしなくて5,000円。同じPVなら高いほうがいいよね。まじで。

AdSense広告のサイズについて

AdSense広告は、設置場所によって適切なサイズがあります。私がクリック率が高いと判断しているものを紹介します。参考ですが、このブログのクリック率は3ヵ月平均で1.2%です。そんなに高くもありませんが、低いわけでもありません。

マサオカ

普通。私のように普通…!!
  • 記事タイトル下(モバイル)
    …レスポンシブのレクタングル改変
  • 記事タイトル下(PC)
    …レスポンシブのレクタングル改変
  • 記事中広告
    …記事中広告(PC・モバイル別広告))
  • 記事コンテンツ後広告(モバイル)
    …レスポンシブのレクタングル改変
  • 記事コンテンツ後広告(PC)
    …レクタングル(大)336 x 280を二枚
  • サイドバー…一番上に
    …レスポンシブのレクタングル改変(PC・モバイル別広告)
    現在は実験的にトップページ以外をスカイスクレイパー(300×600)に変更しています。
  • フッターウィジェット右
    …一番下にレスポンシブレクタングル(PC・モバイル別広告)
    ※現在は実験的にPCをビックバナー(728×90)に変更しています。

フッターウィジェットやサイドバーは、スマホとPCの広告切り替えができません。HTMLウィジェットに、以下のコードを使って切り分けを行います。

コード
[pc]PC用のAdSenseコード[/pc]
[mobile]モバイル用のAdSenseコード[/mobile]

レスポンシブ広告のレクタングル改変とは

レスポンシブでレクタングル広告を出す改変です。

ヨメ

???ちょっとカタカナ止めてください…

レスポンシブ広告は、広告サイズを自動で調整してくる広告。空いたスキマに広告がバシッとハマります。サイズが合うだけで、クリックされやすい広告を配置してくれるわけではないというところがポイントです。レスポンシブのサイズで、収益性の高いレクタングル広告だけを表示するのがレクタングル改変(かってに命名)。

やり方は、レスポンシブ広告のautoの部分をrectangleに変更するだけ。レクタングル広告だけを表示するようになります。

ヨメ

ちょっとなにいってるかわからんっす
細けえことはいいんだよ!これやっときゃクリック率あがるんだって!

マサオカ

赤字のautoをrectangleに
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- MBPC-記事タイトル下 -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="自分のコード"
     data-ad-slot="自分のコード"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

記事コンテンツ後広告(PC)について

AdSense広告の記事コンテンツ後広告(PC)は、「横並びで2枚」置きたいという方が多いですね。ダブルレクタングルとか呼ばれていますが、「レクタングル広告」を二枚並べて置いています。 この位置はダブルレクタングルのクリック率が高かったです。悩んだ方はとりあえずこの配置にしましょう。

広告を並べるときの注意

SANGOでの記事2枚横並びさせるときにうっかり使いがちなセンタータグ<center>は古いコード。

現在、非推奨のタグです。使うなら、SANGOのショートコードを。どちらでもOKです。

コード
[center]AdSense広告1 AdSense広告2[/center]
コード
[yoko2 responsive]
[cell]AdSense広告1[/cell]
[cell]AdSense広告2[/cell]
[/yoko2]

ウィジェットを追加する方法


インフィード広告を表示するカスタマイズ

できれば

記事一覧画面にも広告を表示できる

インフィード広告とは、記事一覧の中に表示されるAdSense広告のことです。ユーザーが目線を集めるコンテンツの間に広告が表示されるので、広告が目に入る機会が多くなります。この広告はクリック率が高くないので、読者の邪魔になると思ったら使わない選択肢もありです。

インフィード広告を入れる理由

  • クリック数が少しだけ上がる
    メイン収入になるほどではありませんが、たまにクリックされる広告です。
  • 露骨にみえるので注意!
    ブロガー路線の方はあまりいれないほうがいいと思います。

SANGOにAdSenseインフィード広告を設置する

プラグインのカスタマイズ

ここでは、最低限入れるべきプラグインをまとめています。ますは紹介しているプラグインをインストールしてください。

プラグインまとめ」では、このブログに入れているプラグインを紹介しました。SANGOに入れて大丈夫なプラグインたちです。自分にあった形を見つけましょう。


TOC+

必須

目次はコンテンツの地図

目次を作るプラグイン「TOC+」はSANGO用にオシャレデザインに変更されています。

ただ、この設定ができてなくて目次がズレているブログが多いので、必ずやってほしいです。もったいない。

TOC+を入れる理由

  • 冒頭にどんな記事が書かれているかわかる!
    本の目次のように読みたい場所まで案内できます。
  • 表示のズレに注意!
    詳細設定を行っていなくてデザインがずれている場合が多いです。要確認。

目次プラグイン「TOC+」の設定方法


AddQuickTag

必須

ショートコードを呼び出して使う

素晴らしいショートコードが用意されていますが、使えないと意味がありません。ワンクリックで呼び出しができるショートコードを登録しておきましょう。

AddQuickTagを入れる理由

  • ショートコードを覚えなくていい
    ワンクリックでショートコードが作られるので、いちいち覚える必要がありません。

AddQuicktagで簡単にショートコードを挿入しよう

 


Google XML Sitemaps

必須

上位表示のためのサイトマップ

Googleサーチコンソールに送るサイトマップは、All in One SEO Packプラグインを使って作成している人が多いです。SANGOでは使わないので、All in One SEO Packを削除したら変わりにGoogle XML Sitemapsを使いましょう。

Google XML Sitemapsを入れる理由

  • Googleにページ数を伝える
    Googleクローラーがページを巡回してどれくらいページがあるのかを知ってもらうために使います。サーチコンソールでサイトマップを送信しておくと、確実にクローラーが見に来てくれます。

XMLサイトマップの使い方


ショートコードの置き換え

必須

STORKから切り替えの人は必須

STORKユーザーがSANGOに乗り換えることが多いですね。その場合、記事の中に含まれるショートコードを置き換えなければいけません。1つひとつ記事を変更していくのは大変なので、一括で置き換えをしてしまいましょう。

ストーク→SANGOにテーマ変更。正規表現でショートコードを簡単に置換する方法|節約リッチ生活


使わないプラグイン
SANGOの標準機能で用意されているため、外のテーマでは当たり前のように使われているプラグインもSANGOでは必要ありません。

 

その他のSANGOカスタマイズ記事まとめ

今回紹介した以外にも、SANGOを初期に導入した方たちも、それぞれがカスタマイズした記録を記事にしてくれています。

以下の紹介するリンクは、カスタマイズまとめ記事を上げているブロガーさんの記事リンクです。たくさんのカスタマイズアイデアが紹介されています。こちらも参考にしてみてください。

マサオカ

カスタマイズは適当なところで切り上げましょう。沼に踏みこんだら私のようになります…

コメントを残す