WordPressテーマをAFFINGER5からSANGOへ変えました。
1年2ヶ月目でこれで4つ目のテーマですね。
（STORK→JIN→AFFINGER5→SANGO）
SANGOの導入で少し困ってしまうのが、ただ載せ替えるだけではいわゆる「よく見るSANGO」にはならないということ。
SANGOは発売されて2年以上経つテーマなので、蓄積されたカスタマイズの情報がめちゃくちゃ豊富なんですよね。
ブログで使われているSANGOもその多くがカスタマイズされたもの。
このブログも現在の状態に持ってくるまでわりと時間がかかったので、ここでは採用したカスタマイズについてまとめてみました。
外観の設定は楽しい作業である一方、かかる時間は生産性に直結しない部分でもあります。
なるべく時短ですませられるよう情報を集約してみたので、これからSANGOをお考えの方はぜひ参考にしてみてください。
子テーマ「PORIPU tears」を導入
SANGOには公式から提供の子テーマがありますが、今回はマサオカブログさんの作成された「PORIPU」を導入しました。
» 収益がアップするSANGOの公認 子テーマ｜PORIPU-SANGO公認の子テーマ
なお導入したのは上位版の「PORIPU tears」。
これにより本来のSANGOよりもデザインや機能面が拡張されています。
POPURIは上位版tearsと通常版があり
PORIPUには上位版の「tears」と通常版の無印があります。
必要なもの
- PORIPU tears：4,980円
- PORIPU 通常版：3,980円
ちなみにtearsはPORIPUの機能を拡充してアフィリエイト機能を強化したもの。
価格的は1,000円しか違わないので、余裕があれば上位版を購入でよいかと思います。
私もPORIPU tearsを買いました。
PORIPUの機能
具体的に何ができるようになるかと言うと、下記のとおり。
| PRIPU 通常版 | PORIPU tears | |
|---|---|---|
| アイキャッチにバイラルデザインを選択 | ◯ | ◯ |
| アイキャッチにキャプションを表示 | ◯ | ◯ |
| アイキャッチを記事ごとに非表示 | ◯ | ◯ |
| 吹き出しの色を変更 | ◯ | ◯ |
| トップページにおすすめ記事を表示 | ◯ | ◯ |
| オリジナルデザインの装飾 | ◯ | ◯ |
| 赤字・青字を太く調整 | ◯ | ◯ |
| グーテンベルクエディタ対応 | ◯ | ◯ |
| 商品ランキング機能 | ◯ | ◯ |
| 記事中広告の追加 | ◯ | ◯ |
| インフィード広告の挿入 | ◯ | ◯ |
| 自動広告のページごとの表示設定 | ◯ | ◯ |
| WordPressPopularPostsへの対応 | ◯ | ◯ |
| SNSCountCashへの対応 | ◯ | ◯ |
| WPアソシエイトポスト・RINKERへの対応 | ◯ | ◯ |
| カスタマイズボックスを３パターン１５種類追加 | ◯ | ◯ |
| フッターにブログロゴを自動表示 | ◯ | ◯ |
| ポチレバデザインをSANGO風に調整 | ◯ | ◯ |
| カエレバのYahoo!ショッピングボタンの色味を調整 | ◯ | ◯ |
| モバイル追尾ヘッダー | — | ◯ |
| ウィジェット アイテムランキング（サイドバー用・記事内用） | — | ◯ |
| ショートコード アイテムランキング（記事内用） | — | ◯ |
| ランキング用アイテムの管理スペース | — | ◯ |
| ショートコード 新吹き出し（吹き出し下） | — | ◯ |
| モバイル時の固定ヘッダー | — | ◯ |
| FontAwesome5対応 | — | ◯ |
| その他デザイン追加 | — | ◯ |
視覚に訴える機能が主なため、公式サイトで実際にご覧いただいた方が理解が早いかもしれません。
かなり多機能なので、購入しておくと何かしらに活用できるかと思います。
利用しそうな機能がなければ購入を見合わせるのもありですね。
あとからSANGOの公式子テーマに重ねてインストールもできるようなので。
ちなみに私の場合は自動的に適用されるもの以外では、主にボックスデザインを増やすために利用しているかたちです。
当初はトップページのサイト型設定を目的として購入しましたが、次にご紹介するカスタマイズ方法を採用したので、結局使っていません。
トップページをサイト型にカスタマイズ
トップページをサイト型にカスタマイズしています。
サイト型デザインはみやちまんさんのnoteを参考に
詳細は下記を参考にさせていただきました。
» マクリンブログのようなトップページを実現するカスタマイズ方法【SANGO限定】：みやちまん｜note
サイト型にするとカテゴリごとに記事をピックアップできるので、回遊率が上がります。
特化・半特化ブログはぜひ採用したい表示方法です。
なお最新のマクリンさんのブログはデザインが変わっているので、一代前のデザインですね。
aタグ消失バグとpタグ余白バグに注意
サイト型カスタマイズは上記のnoteの手順どおりに進めれば完成するのですが、WordPressのエディタ起因のバグにより上手く進まない場合があります。
しかも私の場合は2つが絡んでいたのでちょっと混乱したところもあります。
ポイントは主に次の二つ。
- ビジュアルエディタとテキストエディタを切り替えた際にaタグが勝手に消える場合がある
- エディタの自動整形機能により、pタグが自動挿入されデザインに余白が生じる場合がある
二つ目のpタグ問題はnoteに解決策も含めて書いてあるのですが、TinyMCEの設定で自動整形を回避する方法は上手くいかず。
結局noteにも書いてある、function.phpにコードを差し込む方法を採用しました。
一つ目のaタグ問題は原因がしばらくわからなかったのですが、どうやらこちらに書いてある説明で当たりっぽいですね。
» 【WordPress】ビジュアル・テキスト切り替えでタグが消えてしまう
コードを修正してpタグとaタグを入れ替えるのが正解のようです。
それ以外ではエディタを切り替えないようにするか、極力トップページに触らないようにするかのどちらかしかないのではないでしょうか。
マイクロコピー対応ボタンを導入
sangoはデフォルトで用意されているボタンのバリエーションは豊富ですが、マイクロコピー対応がありません。
そのため、下記のサイトさんを参考にさせていただきました。
» 【SANGOを自分でカスタマイズ】ボタン周りにテキストを追加してみた｜for men
for menさんはSANGOをはじめWordPressテーマのカスタマイズ例が豊富なサイト。
おしゃれなデザインが揃っているので、どんどん取り入れたいですね。
マイクロコピーはこのような感じ。
追加CSSに貼るだけで簡単に利用できます。
オーソドックスなマイクロコピーボタンとしてまず導入したいですね。
サルワカ公式からカスタマイズ例を採用
SANGOの製作者、サルワカさんも公式にカスタマイズ例を紹介してくれています。
サイドバーにプロフィールを導入
サイドバーにプロフィールを導入します。
» サイドバーや記事下にプロフィール（この記事を書いた人）を設置する” site=”サルワカ
方法はウィジェットからカスタムHTMLを選んでコードを貼り付けるだけ。
簡単ですね。
プロフィール欄はブログにとっては超重要なのでまず最初に対応しておきたいところです。
SHAREボタンの文字色を変更
SHAREボタンの文字色はデフォルトでは黒系の配色ですが、ボタンの色によっては見えにくくなってしまうことがあります。
白系の方がよければ、追加CSSで対応するのがおすすめです。
» アイキャッチ画像右下のSHAREボタンの色を変更したい｜サルワカ
積み上げ横棒グラフのカスタマイズを導入
ぽんひろ.comさんもWordPressカスタマイズを幅広く紹介してくれているサイト。
VOD関連記事でグラフの利用場面が多くなることが想定されたので、下記のカスタマイズを以前から導入しています。
» 【HTML/CSS】割合がわかる積み上げ横棒グラフ【WordPress】｜ぽんひろ.com
適用するとこのようなグラフが使用できます。
画像で作成する手間が省ける上、デザインも美しいので一石二鳥。
おいしいカスタマイズです。
インフォグラフィックやグラフの自作も静かなブームですが、目的によって使い分けるのがよさそうです。
- 手早くグラフを作りたい→ぽんひろ.comカスタマイズ
- 被リンク獲得も視野に入れたい→自作
このグラフカスタマイズはこちらの記事で使用しています。
» 国内ドラマを見放題できる動画配信サービスは？おすすめVODを徹底比較
まとめ：SANGO導入はカスタマイズを事前にチェックするとスムーズ
これで4つ目のテーマということで、テーマを変えすぎやろ！というツッコミもあるかと思いますが、やはりSANGOはデザインが至高。
長く使っていきたいですね。
また突発的に載せ替えてしまった結果、カスタマイズのネタ元を探すのに予想以上に時間がかかってしまいました。
他サイトを見てもカスタマイズした結果こうなっているのか、オリジナル機能でそれができるのかすら最初のうちは分からないんですよね。
載せ替えは計画的に行うに越したことはないので、事前によくリサーチすることをおすすめします。
とくにショートコードは手動で置き換えようとすると死ぬ目に遭います。
SearchRegexの利用は必須なので、正規表現も含め、事前に置き換えの対応表を作っておくと失敗がありません。
事前準備によって全体の作業量も違ってくるので計画をよく立てておきましょう。