WordPressテーマをアルバトロスからSANGOに変更。その理由と行ったカスタマイズ

WordPressテーマをSANGOに変更

2018年最初の三連休を使って、当ブログで使っているWordPressテーマをアルバトロスからSANGO(サンゴ)に変更しました。

アルバトロスは7,980円、SANGOは10,800円のいずれも有料テーマです。

高クオリティ&良デザインな有料日本製WordPressテーマ7選。ブログやアフィリエイトサイトに!

2018.01.30
続きを読む

前回のテーマ変更から1年弱での乗り換えとなりましたが、アルバトロスに特に不満があったわけではありません。

同じ会社さんが作ったテーマ(アルバトロス、ハミングバード、ストーク)の利用者が多いため似たブログがたくさんある難点はあったものの、デザインは統一されていて美しく、様々な便利機能も備わっており、継ぎ足し継ぎ足しで使っていてぐちゃぐちゃだったコードもずいぶんスッキリしました。ブログの読み込み速度も上がった。

私がWordPressの有料テーマ「アルバトロス」に乗り換えた経緯と理由

2018.01.09
続きを読む

では、なぜSANGOへの変更に踏み切ったのか?


今回はその理由と、導入後に私が行ったカスタマイズをまとめて紹介。

変更してまだ3日ですが、SANGOめちゃめちゃ気に入ってます!


WordPressテーマをSANGOに変更した理由

特に不満はなかったアルバトロスからなぜSANGOにテーマ変更したのか、その理由は4点。

① 作っているのが「サルワカ」の人だから

2017年2月くらいに見かけて、その美しい配色やアイキャッチ画像、丁寧でわかりやすい解説に驚いたのがサルワカというサイト。

デザインやHTML、WordPress、あとは何故か簡単レシピの記事が中心。もうとにかくわかりやすいんですよこれが。

サルワカ | サルでも分かる図解説明マガジン
サルワカはあらゆることを分かりやすく解説するメディアです。何か分からないことがあったときはサルワカへどうぞ!

RSS登録して読んでいたこの「サルワカ」さんが作ったWordPressテーマが「SANGO」。

あれだけわかりやすいサイトが作れるなら、同じ人が作ったテーマのクオリティも高いに違いない。
読者のことを考えてサイト制作するのと同様に、利用者の立場に立った使いやすいテーマになっているはず。

そういう確信がありました。

② とにかくデザインがいい

SANGOの公式サイトを見てみてください。

SANGO|心地良さを追求したWordPressテーマ
WordPressテーマSANGOのデモページです。

いわゆるフラットデザインで目に優しく、居心地の良いデザイン。

Googleのマテリアルデザインを大部分で採用しているとのこと。

SANGO

参考 WordPressテーマ「SANGO」24の魅力SANGO

好みもあるでしょうが、おそらく私を含む多くの読者の目に馴染むであろうこのデザインが、私をテーマ変更に踏み切らせた大きな理由の1つであることは間違いありません。

③ 機能が充実している

ある程度ブログを長く運営している私にとって、これまで利用していた機能が新テーマでも使えるかどうかは重要なポイント。

その点、SANGOのデザインカスタマイズ、ショートコードで実装できる見出しやボックス、ボタン、関連記事などのラインナップはかなり豊富。


サイトの様々な場所のカラーが変更できるのはもちろん、30種類以上の見出し・ボタン・ボックス、20種類以上の箇条書き、内部/外部リンクや吹き出しなど多くのショートコードが用意されています。ちょっと多すぎるくらい。

記事下のシェアボタン、フォローボックス、関連記事、プロフィールも抜かりなし。

私がアルバトロスで使っている機能をざっと確認したところ、問題なく移行できそうだったので安心しました。

参考 SANGOのショートコード一覧SANGO

④ レスポンスが早く丁寧

検索して見てみた限りでは、SANGOに関するツイートやコメント等へのレスポンスはかなり早く、丁寧な印象。

今は、開発者さんが目を光らせてエゴサーチしています。このタイミングで不満や問題点をツイートすれば、開発者様自らアドバイスしてくれる時限的メリットが今ならあります。
WordPressテーマをSTORK→SANGOに変更した理由 | マサオカブログ

SANGOカスタマイズガイドのこちらの記事に対するコメントにも、かなり拙い質問に対するものも含めおおむね1日以内に返信しているようです。
おそらく問い合わせを送った場合でも、よほど変な内容でもない限りは真摯に回答してもらえることでしょう。

「サルワカ」に対する丁寧で誠実な印象そのまんま。


ただし、これらの対応はあくまで中の人の意思でやっていることであり、サポートを保証しているわけではありません。個別対応や一般的な作業方法についてのサポートは行っていないと利用規約にも明記されています。

例えばユーザーが増えて手が回らなくなった場合など、状況が変わる可能性もあることは考慮に入れておきましょう。

5. サポートについて

無償・有償問わず、本テーマの導入/カスタマイズの個別対応は行っておりません。
WordPressの基本機能やHTML/CSSの書き方等、一般的な作業方法についてのサポートは行っておりません。お問い合わせいただいても返信いたしかねますのでご了承くださいませ。
本テーマ独自の機能に関しては、カスタマイズガイドにてご利用方法が記載されています。カスタマイズガイドをご覧いただいても解決しない場合は、問い合わせフォームよりご連絡くださいませ。(返信に数日要する場合がございます)
SANGOの利用規約 | SANGOカスタマイズガイド


ただ、少なくともこの記事を書いている現時点(2018/1/10)においてはかなり好印象。

私も先日改善要望を送ってみたのですが、とても丁寧な返信を送っていただけました。

私が行った主なカスタマイズ

ここからは、私がSANGO導入に際して行ったカスタマイズのうち主なものを挙げていきます。

長くWordPressサイトを運営している割に基本的な知識があまり備わっていないため、先人たちが書き残しているブログ記事に大いに助けられました…!

▼ 事前準備

まず、事前準備から。WordPressでテーマ変更や大きな修正を行うときには必ずやっておくべき基本的な内容です。

ローカルのテスト環境を作ろう

既にある程度の記事を公開しているWordPressサイトであれば、移行に際してしばらく見られないなどというわけにはいきません。
かといって、テーマをいきなり変更してしまうと予期せぬ不具合や表示崩れが起こってしまうことも。


それを回避するためには、ローカル(自分のパソコン内)にテスト環境を作ってそこで試してみるのがセオリー。

Macであれば、例えばMAMPというソフトがおすすめ。
私はいつも以下の記事を参考にして環境構築しています。

MAMPを使って自分のMacの中にWordPressが表示できる環境を作る方法 | ごりゅご.com
サーバをAWS+網元環境に移行したのと同時に、ブログ環境の整備として手持ちのMacに「MAMP」を導入して、ローカル環境でWordPressを動かせるようにしました。

他にもWordPressプラグイン「Theme Test Drive」を使う方法など、テスト環境を作る方法は色々あるようです。
私はMAMPを使う方法しかやったことがないので、それ以外は各自ググってみてください。


ローカルでしっかり作り込んでから実際のWordPressに実装→公開するのが理想ですが、反映の手間も考えると面倒だったので、今回は最低限の表示確認までしてから見切り発車で本番環境に公開、深夜から朝にかけてサイトを直でカスタマイズするというなかなかに大胆な方法を取りました。

夜通しの作業が可能な私の状況と、SANGOの完成度が元々高いことで何とかなりましたが、マネするのはオススメしません…。

子テーマを作ろう

WordPressテーマを直接いじってしまうと、テーマのアップデート時に上書きされてしまい再度修正する羽目になります。

そこでやっておきたいのが、子テーマの作成
以下の記事が図解入りでとてもわかりやすい。

子テーマを作ってWordPressの既存テーマをカスタマイズする方法
いまやブログだけではなく、会社紹介のWebサイトやポートフォリオサイト、ECサイトに至るまで、様々なタイプのWebサイトで利用されているCMS、WordPress。すでにデザイ...

要するに、ベースとなる親テーマ(今回の場合はSANGO)に対し、変えたい部分だけを子テーマに記述すれば良いという仕組み。

親テーマのアップデートがあったとしても自作の子テーマはそのままなので、カスタマイズ内容も反映したままで維持できます。




よくあるカスタマイズのほとんどは、SANGOカスタマイズガイドで網羅されています。

SANGOカスタマイズガイド
WordPressテーマ「SANGO」の使い方やカスタマイズ方法を解説します。

私の場合はこのカスタマイズガイドを中心に、一部は個人ブログで公開されている内容も取り入れつつ自分好みに改造しました。


以下からは、私が実装したカスタマイズの主な内容を挙げていきます。

Search Regexでショートコードを置換

テーマ変更時に特に注意すべきなのが、ショートコードの扱い

短いコードでさまざまな機能を実現できて便利な反面、テーマによって当然ながら実装されているショートコードも異なるため、引っ越しの際には移行先テーマでこれまで記述したショートコードをどう置き換えるかが重要なポイントとなります。


通常であれば前テーマのアルバトロスで使っていたショートコードを1つ1つ洗い出し、それに対応したSANGOのショートコードを探して、プラグインSearch Regexでどう置換するか正規表現を考えて……という手順が必要になるところですが、ググってみたところ以下のブログ記事を発見。

ストーク→SANGOにテーマ変更。正規表現でショートコードを簡単に置換する方法
WordPressのテーマを「ストーク」から話題の「SANGO」に変更しました。 ストーク独自のショートコードをたくさん使っていたので「Search Regex」というプラグインを使っ...

アルバトロスと同じショートコードを採用しているストークからSANGOへテーマ変更する際、Search Regexを使ってどう置換すればよいかをリストアップしてくれているんです。あなたが神かっ……!


私が使っていた関連記事、補足説明、2カラム表示、ボタンをこの記事の通り置換、無事うまくいきました。感謝、感謝。

関連記事(内部リンク)デザイン変更

自分のブログ内の記事を紹介する内部リンクを貼る場合、SANGOのものをそのまま使うとかなり味気ない感じ。クリックできるのかどうかもパッと見で判断しづらい色だよなあと個人的には思います。

【お役立ち度順】2017年買ってよかったものまとめ!一番便利だったMVPは…?

CSS等で整えてもいいのですが、私は以下の記事を参考にして(というかそのままパクらせてもらって)カスタマイズしました。

【SANGOカスタマイズ】コピペで内部リンクをラベル付きのボックスデザインにしよう!
リクエストにお応えしまして、前回の「【SANGO】ショートコードで使える会話風ふきだしをコピペで作ろう!」に続いて、今回もWPテーマSANGOのカスタマイズ記事です。 こ...

どうでしょう、ずいぶん見栄えが違いませんか?

【お役立ち度順】2017年買ってよかったものまとめ!一番便利だったMVPは…?

2018.05.27
続きを読む

SANGOで使うサムネイル画像の再作成

SANGOでは、トップページや人気記事ランキング等で「thumb-520」「thumb-160」と2種類のサムネイル画像を使います。逆に言えばこれだけ(のはず)。

SANGOインストール後に新規追加した画像に対しては自動的に生成されますが、既存の画像に対しては無い状態。

わざわざ再作成しなくても見た目に問題はありませんが、小さいサイズで十分な場合でもファイルサイズの大きい元画像を使うことになるため、サイトが重くなってしまいさまざまな悪影響が懸念されます。


サムネイルを作り直す方法としては、例えばRegenerate ThumbnailsというWordPressプラグインがあります。テーマに合わせて必要なサムネイル画像を再作成してくれるプラグイン。

WordPressではテーマを移行した場合にも、新しいテーマ用のサムネイル画像が自動生成されることはありません。つまり、SANGO用の旧テーマのサイズの画像がそのまま使われています。

Regenerate Thumbnailsというプラグインを使うと、1クリックでSANGOに合ったサムネイル画像を再生成してくれます。
他テーマからSANGOに移行される方へ(作成中) | SANGOカスタマイズガイド

Regenerate Thumbnailsの使い方に関しては、以下の記事をどうぞ。

Regenerate Thumbnails – アップロード済みのサムネイル画像を再生成できるW...
Regenerate Thumbnailsは、アップロード済みのサムネイル画像を一括して生成し直せるプラグインです。WordPressのサムネイル画像の画像サイズ(寸法)を変更した際に、...

カテゴリ別人気記事の表示

SANGOには、人気プラグインWordPress Popular Postsを使わなくとも人気記事ランキングを表示できる機能があります。
ただし、現時点(2018/1/10)ではカテゴリ別の人気記事には未対応。

私のようなカテゴリが多岐に渡るブログだと、例えばグルメ記事を探してたどり着いた人にはiPhoneの人気記事ではなくグルメの人気記事をレコメンドしたい。


なので、以下の記事を参考にして「読んでいる記事と同じカテゴリの人気記事」を表示するようにカスタマイズしました。

記事クリック率が劇的に上がる!SANGOの関連記事カスタマイズ
「同じカテゴリの記事」というタイトルで関連記事をサイドバーに出すと、クリック率が破壊的に上がるらしい。SANGOのデザインを崩さずに同じカテゴリのランキング表示を...

結局WordPress Popular Postsを使うことになってしまいますが、まあ仕方ない。

見出しデザイン変更

記事中で使っているh2〜h4タグの見出しを、好みのデザインに変更。
子テーマのCSS(style.css)に記述するだけです。


SANGOの作者でもあるサルワカさんの以下の記事から、気に入ったものを選んで使わせてもらいました。
CSSにコピペして変えたいタグ(h2〜h4)を指定するだけなので超簡単。ありがたい。

CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選
h1〜h6タグの美しくおしゃれなデザインサンプルをたくさん紹介します。どれもコピペで使うことができます。

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

SANGOテーマの中でも特に気に入っている機能の1つ、モバイルフッターの固定メニュー

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

カスタマイズガイドに沿って設定すれば、簡単に表示させることができます。


以前はここにモバイルアンカー広告(追尾広告)を設置したりもしていたんですが、読むのに邪魔な割に効果が薄かったので外してたんですよね。

このモバイル固定メニューならユーザビリティも向上するし見栄えもいいし、満足。

使わないCSS、プラグイン削除

WordPressテーマをSANGOに変更したので、以前のテーマ用に記述していたCSSのうち必要のないものを削除


また、一部プラグインも不要となったので停止しました。

私の場合、具体的にはAll in One SEO PackとCrayon Syntax Highlighterを停止。

All in One SEO Pack

OGP出力や基本的なSEO対策もSANGOには備わっているため、基本的には不要。

ただし、これまでディスクリプションや検索用タイトルをAll in One SEO Packの機能を使って記述していた場合は、プラグイン停止するとそれらもごっそり解除されてしまうため注意が必要。はい、私のことです。


私の場合、タイトルの書き換えはしていないのですがディスクリプションは述べ1,000記事以上わざわざ記述しており、停止するかどうか迷いどころでした。

でもせっかくテーマ変更したしなるべくプラグインは減らしたい……という気持ちが勝ったので、検索流入の多いトップ50記事程度のみディスクリプションをコピペでSANGOテーマ側に移し、残りの記事については諦めることに。


他にもAll in One SEO Packを停止することで書き換わる部分が無いかどうか、あるとしたらそれは問題ないのか、十分ご確認ください。

OGP周り、タイトル書き換え、タイトルやカテゴリページ後にサイト名を表示するかどうか、ディスクリプションあたりを重点的にチェックすると良いかと。

Syntax Highlighter

ソースコードを綺麗に表示するプラグインですが、SANGOには既にその機能が備わっているため削除。
※記事内で利用している場合は、タグの置換が必要


不要となるプラグインについては、以下の記事も参考になります。

相性の悪いプラグインとおすすめプラグイン(作成中)
このページでは、確認済みの「相性の悪いプラグイン」と「問題なく使用できるであろうおすすめのプラグイン」を一覧でまとめていきます。 目次相性の悪いプラグインAll ...
テーマをSTORKからSANGOに変えたのでカスタマイズやプラグインをまとめてみるよ
ブログのテーマをSTORKからSANGOに変えました。 STORKはとってもいいテーマだと思いますし、今まで特に不満はありませんでした。 では、なぜ不満もないSTORKからテーマ...
WordPressテーマをSANGOに変えたので、カスタマイズしたことをまとめました
こんにちは。Ken(Ken_kentabi)です。 このブログも実はこの記事で100記事達成したみたいです。や…

あとがき

SANGOはそれなりの値段するWordPressテーマですが、それ以上の価値はあると私は思います。

好みや運営スタイルに合いそうであれば、ぜひ検討してみてください!

SANGO|心地良さを追求したWordPressテーマ
WordPressテーマSANGOのデモページです。

高クオリティ&良デザインな有料日本製WordPressテーマ7選。ブログやアフィリエイトサイトに!

2018.01.30
続きを読む

今からブログ作るならこれ!日本製シンプル無料WordPressテーマ5選

2017.11.13
続きを読む