今スターサーバーに申し込むと利用料金が2ヶ月無料 !7月31日まで!

テーマをSTORKからSANGOに変えたのでカスタマイズやプラグインをまとめてみたよ

BLOG

ブログのテーマをSTORKからSANGOに変えました。

STORKはとってもいいテーマだと思いますし、今まで特に不満はありませんでした。

では、なぜ不満もないSTORKからテーマを変えたのか。

それは、私がサルワカのファンだったからです。

参考リンク
参考 サルでも分かる図解説明マガジンサルワカ

サルワカは「サルでも分かる」というだけあり、内容がとてもわかりやすいですし、サイトのデザインもすっごく好みなんです。

そのサルワカの中の人が作ったテーマと聞いたら、使わない理由がないですよね。

私と同じように「サルワカファンだから」という理由でテーマを変えた人は多いと思います。

お知らせ
現在はSANGOの公認子テーマのPORIPUに変更しています。
詳細はこちらのエントリーをご覧ください。
BLOGPORIPUはかゆいところに手が届くSANGO公認の子テーマです

もくじ

SANGOとは?

SANGOはユーザーフレンドリーを追求したWordPressテーマです。Googleのマテリアルデザインを大部分で採用。内部SEOも最適化されています。
引用 SANGO | 心地良さを追求したWordPressテーマ

SANGOという名前は海にいる珊瑚が由来です。

珊瑚に海の生物がたくさん集まってくるように、SANGOもたくさんの人を集められるように、という作者さんの思いが込められています。

参考リンク
参考 WordPressテーマ「SANGO」の名前の由来SANGO

SANGOはSTORKと同じく税込10800円する有料テーマです。

STORKは1ライセンスで1つのブログにしか使えませんが、SANGOは1ライセンスで複数のブログに使えるのでとってもお得です。

私はこのブログでサーバー代が稼げればいいなぁぐらいに思っていて、現在ありがたいことにサーバー代以上の収入があります。

タイミングよくSANGOがリリースされた時にブログ経由で臨時収入があったので、思い切って購入しちゃいました。

今後ユーザーが増えてきたら段階的に値上げをしていく予定とのことなので、購入を迷っている方は早めにゲットすることをオススメします。

SANGOのオススメポイント

中の人のサポートが素晴らしい!

Twitterでの引用リツイートやリプライへの対応はもちろん、SANGOについてつぶやくと、すぐに中の人が見つけてくれて精力的に対応してくださっています。

私がリプライで報告したものについても、先日のバージョンアップの時に滑り込みで対応していただきました。

STORKからの移行組が多いのでトラブルが起きたときの解決方法がすぐわかる

トラブルについては後ほど詳しく説明しますが、STORKユーザーは最初にあるトラブルに遭遇します。

その時のユーザー同士の情報共有が素晴らしいんです。

私は自分でコードを書いたりすることはできないけれど、トラブルの解決方法や、テーマのカスタマイズ方法などをまとめて、ブログで共有することならできます。

なので、私がいいなぁと思ったものについては、惜しげもなくこのブログで共有していきたいと思います。

SANGOに変えてからやったカスタマイズ

STORK独自のショートコードからSANGO独自のショートコードへの置換

STORKからSANGOに変えると、真っ先に自分のエントリーでエラーを吐いているのに気が付くとおもいます。

例:kanren postid=“◯◯”kanren id=“◯◯”に置き換え
引用 他テーマからSANGOに移行される方へ(作成中) | SANGOカスタマイズガイド

エラーは関連記事のショートコードが原因ですので、デザインよりも何よりも真っ先に手を付けて下さい。

公式サイトでも例として関連記事のショートコードの置換の方法を挙げています。

STORKでショートコードを多用していた方は、ボックスや吹き出しなどのショートコードの置換に手間取ると思います。

そんな時にあらわれた救世主がりらさんでした。

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

りらさんのおかげでサクッとボックスと吹き出しの置換ができました。

Pz-LinkCard(はてなブログのようなブログカードを簡単に作成できるプラグイン)のショートコードについては、プラグインを停止した後に(有効にしたままだと表示が崩れます)ひとつずつ地道に他サイトへのリンクを貼るショートコードに書き換えました。

関連記事や固定ページの見出しのギザギザを消す

スマホで見た時は見出しの下のギザギザの画像が真ん中にあるのでいいのですが、PCで見ると左にギザギザが寄ってしまうのが気になって消してしまいました。

css
/*ギザギザを消す*/
.nothumb .page-title:after,
#main .h-undeline:after {
background-image: none;}

さっちん

Ver.1.3からはギザギザがなくなりましたので、上記のカスタマイズは不要です。
そのほかのアップデートの内容や注意点などもいろいろ書かれていますので、SANGOユーザーさんは要チェックですよー。

参考リンク
参考 SANGO ver1.3のアップデート内容についてSANGOカスタマイズガイド

見出しを変更

参考リンク
参考 SANGOでデフォルトの見出しを変える方法SANGOカスタマイズガイド

現在はサルワカのサイトで紹介されている見出しを参考に変更しています。

h3の青いタテ線はもともと指定されているものを活かしています。

参考リンク
参考 CSSのコピペだけ!おしゃれな見出しのデザイン例まとめ68選サルワカ

他サイトへのリンクの見た目を変更

参考リンク
参考 SANGOの外部参考リンクデザインをCSSで変える。コピペOKなコード13例あずさんち

あずさんが13個のデザインのコード+自分で変更する方法をわかりやすく説明してくれています。

STORKに変えた時からサイトのテーマカラーは青系と黄色系と決めていて、SANGOもデフォルトのカラーのままで使っています。
なので、今回はかわいらしいこなれ系の黄色をちょっとアレンジしてみました。

テーマのアクセントカラーが黄色系なので、他サイトへのリンクがいいアクセントになっていると思います。

※上記エントリーがなくなってしまったため現在はデフォルトのまま使っています。

さっちん

ニシカワさんが他サイトへのリンクを簡単に作成できるブックマークレットを用意してくれました。
以前のものより改良されて使いやすくなりました。

参考リンク
参考 【SANGO】他サイトへのリンクのブックマークレットブログ・デ・イコラ

記事一覧ページにインフィード広告を設置

参考リンク
参考 SANGOにAdsenseインフィード広告を設置するマサオカブログ

紹介先のエントリーの通りに行えば、スマホでもPCでもいい感じに馴染んで表示されます。

ダッシュボード>設定>表示設定>1ページに表示する最大投稿数を奇数にしておかないと、エントリーが1個あまってバランスが悪くなってしまうので、表示件数を変えるのも忘れないで下さいね。

重要
SANGOを1.2にバージョンアップしていて、インフィード広告を設置している方はpost-grid.phpの修正が必要です。
中の人がくわしく説明してくれていますので、忘れずに修正しましょう。

参考リンク
参考 SANGOのテーマ更新情報SANGOカスタマイズガイド

アイキャッチをフラットに

SANGOにはフラットなアイキャッチが似合うと思ったので、GIMPと素材配布サイトをフル活用して、全エントリーのアイキャッチの画像を入れ替えました。

アイキャッチ画像を作るにあたり、あずさんのつぶやきが参考になりました。

全部600*315で作り直したので、多分キレイに表示されると思います。

MEMO
サンダーガールさんがCanvaを使った方法をまとめてくれています。
GIMPでもCanvaでも方法は変わらないので、みなさんもフラットなアイキャッチを作ってみてくださいね。
AndroidでもCanvaが使えるようになるといいんだけどなぁ。←使えるようになりました!
参考 100記事書くためのおしゃれなアイキャッチの作り方遠回りこそが最短の道

サイドバーや記事下にプロフィール・フォローボタン・CTAを設置

参考リンク
参考 サイドバーや記事下にプロフィール(この記事を書いた人)を設置するSANGOカスタマイズガイド

MEMO
ゆうこりんさんがプロフィール画像をおおきくして、枠線を消す方法をアップしてくれています。
私のように元の画像が四角くて背景もついちゃっている場合はまるくくり抜くほうがかわいいと思いますが、ゆうこりんさんのように全身のアイコンの場合は枠線がない方がかわいいと思いますので、まねしてみてくださいね♪

参考 プロフィール画像サイズを変更、枠線を消す方法【SANGO】ゆころぐ

記事下にはCTAも設置しました。

参考リンク
参考 カスタマイザーでデザインや細かな設定をしようSANGOカスタマイズガイド

先日のバージョンアップでCTAでもHTMLが使えるようになったので、STORKで使っていたものを流用しました。

関連記事の見た目を変更

参考リンク
参考 関連記事ショートコードのサムネイル画像を長方形で表示する方法関連記事ショートコードのサムネイル画像を長方形で表示する方法

せっかく頑張って作ったアイキャッチ画像を、サムネイルでもトリミングしないで表示して欲しいという要望が多かったようです。
私もさっそく長方形で表示されるように変更しました。

※現在はデフォルトに戻しています。

見た目を変えたい方はあずさんのカスタマイズがオススメです。

私もあずさんのエントリーを参考にちょこっと見た目を変えています。

参考リンク
参考 【SANGO】コピペで内部リンクをラベル付きのボックスデザインにしよう!あずさんち

会話風ふきだしの見た目を変更

さっちん

現在はデフォルトに戻していますが、あずさんのエントリーを参考に見た目を変更すると、テーマにしばられないのでテーマが変わってもそのまま使えますよ♪

参考リンク
参考 ショートコードで使える会話風ふきだしをコピペで作ろう!【SANGO風デザイン】あずさんち

てっとり早く色だけ変えたい場合はまっさーさんのエントリーが参考になります。

参考リンク
参考 コピペ一発!SANGOの吹き出しの色を変えるカスタマイズマサオカブログ

モバイル表示のスライドメニューをミドルメニューに変更する

モバイル表示はミドルメニューのほうが見やすいので変更しました。

参考リンク
参考 コピペでSANGOのモバイルメニューをミドルメニューにする&フッターに固定するカスタマイズあずさんち

フッターに固定することもできますが、フッター固定メニューは現在デフォルトで採用されているので、固定にはしませんでした。

参考リンク
参考 モバイル用フッター固定メニューの設定方法SANGOカスタマイズガイド

SANGOに週間人気記事を表示する

プラグインが増えてしまいますが、累計ではなく週間の人気記事を表示させたかったので変更しました。

参考リンク
参考 SANGOに週間人気記事のランキングをスマートに表示する方法マサオカブログ

あわせてカテゴリー別の人気記事も表示できるようにしました。

参考リンク 参考 記事クリック率が劇的に上がる!SANGOの関連記事カスタマイズマサオカブログ

トップページに人気記事を設置

トップページをサルワカ風にするカスタマイズです。

参考リンク
参考 【サルワカ風】トップページに人気記事を設置する方法SANGOカスタマイズガイド

人気記事を手動で入れ替えるのが面倒な私みたいな方は、はるしかさんのカスタマイズもあわせて導入するとラクチンです。

参考リンク
参考 SANGOで記事一覧ページに人気記事を動的に表示する方法雑食こじかの知識箱

エントリーの読了時間をキレイに表示する

まっさーさんのエントリーを参考に

参考リンク
参考 記事の読了時間をきれいに調整するSANGOカスタマイズマサオカブログ

はるしかさんの方法でプラグインを使わずに表示しています。

参考リンク
参考 ブログ記事の読了目安を表示しよう!プラグイン不要のカスタマイズ雑食こじかの知識箱

エントリーのデザインをバイラル風にする

まっさーさんのエントリーを参考にお試しで導入してみました。

参考リンク
参考 SANGOの記事デザインをバイラル風にするカスタマイズマサオカブログ

サイドバーの幅を変える

全体的に真ん中にギュッと寄ってる気がしたので、あずさんのエントリーを参考に幅を広げました。

参考リンク
参考 SANGOのサイドバーの横幅をコピペで変えるカスタマイズ方法あずさんち

PCで見た時の文字を太くする

スマホだと気にならないのですが、PCで見ると文字が細くて見にくいので、下記エントリーを参考に少し太くしました。

参考リンク
参考 ①全体の文字を太字にしたひつじろぐ。

コメント欄のコメントとピンパックの見た目を揃える

このエントリーのコメント欄なんですが、ピンパックの見た目だけ気に入らなかったので、見た目を揃えたくてTwitterで【ゆる募】ツイートをしたところ、救世主まっさーさんが解決してくれました。

私と同じ様に悩んでた皆さん、このままコピペでOKです。

まっさーさん、いつもありがとうございます!

記事タイトルの文字数を自動で表示する

あずさんのエントリーを参考に投稿画面にタイトルの文字数が表示されるようにしました。

参考リンク
参考 コピペでOK!記事タイトルの文字数カウンターを設置する方法あずさんち

文字数は32文字までがいいそうなのですが、このエントリー42文字もありました。

長すぎですね…。

その他オススメのカスタマイズ

アフィリエイトリンクをボタンにする

りらさんがアフィリエイトリンクをボタンにする方法をアップしてくれています。

STORKから移行してきたみなさんには嬉しいエントリーだと思うのでリンクをのせておきますね。

参考リンク
参考 WordPressテーマ「SANGO」でアフィリエイトリンクをボタンにする方法節約リッチ生活

公式サイトでも紹介されています。

参考リンク
参考 【SANGO】アフィリエイトリンクを改変せずにボタンを使う方法SANGOカスタマイズガイド

爆速SANGO計画

PegeSpeed Insightsで95というハイスコアを叩き出したまっさーさんのエントリーです。

私もまねしていろいろ試してみましたが、他のプラグインとの相性もあって、結局元の状態に戻しましたw

うまくハマれば爆速SANGOも夢じゃないので、ハイスコアをめざしている方は参考にしてみてくださいね。

参考リンク
参考 【爆速サンゴ計画】SANGOを高速化するカスタマイズマサオカブログ

中の人が高速化についてアップしてくれているので、合わせてご覧ください。

参考リンク
参考 WordPressの高速化〜表示速度を上げる12の技〜サルワカ

スマホのヘッダーメニューを固定する

りらさんがSTORKとSANGOで使えるヘッダーメニューを固定する方法をアップしてくれています。

コピペで簡単にできますのでお試しください♪

参考リンク
参考 【SANGO/ストークカスタマイズ】スマホのヘッダーメニューを固定する方法節約リッチ生活

スライドメニューを表示させている方は、40px追加でバッチリです。

公式サイトのカスタマイズガイド

困ったときはまず公式サイトを確認するのがおすすめです。

参考リンク
参考 SANGOカスタマイズガイドSANGOカスタマイズガイド

あずさんのカスタマイズまとめ

もうコレ、私のエントリーいらないのでは?w

あずさんがいままでのカスタマイズを1つのエントリーにまとめてくれています。

今後も追加予定とのことなので、楽しみです♪

参考リンク
参考 WPテーマをSANGOに変えてからやったカスタマイズまとめあずさんち

MEMO
あずさんちでSANGOのモバイルメニューをミドルメニューにする&フッターに固定する方法がアップされました。
参考 コピペでSANGOのモバイルメニューをミドルメニューにする&フッターに固定するカスタマイズあずさんち

まっさーさんのカスタマイズまとめ

こちらはあずさんと違った切り口でカスタマイズされているのでどちらも参考にされるといいと思います。

参考リンク
参考 SANGOのカスタマイズまとめ!一番最初にやる設定集マサオカブログ

STORKから引き続き行っているカスタマイズ

コンテンツ内にある非SSLのURLを表示前にSSL化する

参考リンク 参考 Wordpressサイトの内部リンクSSL対応(HTTPS化)をコードコピペでちょっと楽にする方法寝ログ

上記エントリーで紹介されているコードで、コンテンツ表示前に下記の処理をを行っています。

  • 内部リンクURLのSSL化
  • Amazonアソシエイト画像のSSL化
  • バリューコマース画像(インプレッション画像)のSSL化
  • もしもアフィリエイト画像(インプレッション画像)のSSL化
  • A8.net画像(インプレッション画像)のSSL化
  • アクセストレード画像(インプレッション画像)のSSL化
  • 古いはてなブログカードの iframe URLのSSL化

とりあえず、これだけはデータベースの置換作業を行わなくてもSSL化表示されるようにしてみました。
引用 WordPressサイトの内部リンクSSL対応(HTTPS化)をコードコピペでちょっと楽にする方法

さらに

  • アプリーチのSSL化
  • 楽天アフィリエイトのSSL化
  • 価格.comのSSL化
  • カエレバのSSL化

を追記しています。

エックスサーバーでSSL対応にする方法は下記エントリーにまとめています。

関連する記事
BLOGSimplicityとエックスサーバーで簡単にサイトをSSL対応(HTTPS化)しよう

SANGOにしてからやめたプラグインとカスタマイズ

All In One SEO Pack

テーマでSEO対策がされているので、プラグインに頼るのをやめました。

app_id以外はテーマであらかじめ設定されているので、必要な場合はカスタマイザーからapp_idを追加してくださいね。

Crayon Syntax Highlighter

SANGOにはソースコードを表示するショートコードがあるので不要になりました。

Lockets

このプラグインを使うと混在コンテンツができあがってしまいます。

functions.phpに追記してもダメだったので諦めました。

このことについてはTwitterでつぶやいていて、プラグイン作者も把握済み(いいねがついていて、私自身もフォローされています)なので、改善されることがあればまた使いたいと思います。

Pz-LinkCard

他サイトへのリンクはSANGOのショートコードを使うことにしたので不要になりました。

SNS Count Cache

あまりシェア数は気にしていないので削除しちゃいました。

ウィジェットを表示(Display Widgets)

更新時にいろいろ不具合があったので削除しました。

日本語ウェブフォントプラグイン

フォントをあいこにしたかったけど、関連記事の表示が崩れるのでやめました。

フロップデザインにするかデフォルトにするか迷って、今回はデフォルトのフォントを採用したので不要になりました。

カエレバ、TOCのカスタマイズ

どちらもテーマでcssが設定されているので、カスタマイズ不要です。

表示の崩れもバージョンアップの際に対応してくれているので、現在はデフォルトでキレイに表示されているはずです(それまでは一部自分で修正が必要でした)。

SANGOにしてからプラグインが減りました

SANGOにした一番のメリットはプラグインの数を減らすことができたことです。

常時動いているプラグインが19個、使う時だけ有効にしているプラグインが2個、計21個まで減らすことができました。

参考までに現在使っているプラグインを紹介します。

当サイトのスペック

AddQuicktag

参考 AddQuicktagWordPress プラグイン

HTML エディターやビジュアルリッチエディターで使用できるクイックタグを簡単に追加・管理できます。

ショートコードや見出しタグなどを登録して使っています。

SANGOで使えるショートコードです。

参考リンク
参考 SANGOのショートコード一覧SANGOカスタマイズガイド

Akismet Anti-Spam (アンチスパム)

参考 AkismetWordPress プラグイン

ブログをスパムから保護してくれるので、インストールしたら一番最初に有効化しています。

Broken Link Checker

参考 Broken Link CheckerWordPress プラグイン

ブログ内のリンク切れをダッシュボードでお知らせしてくれます。

Contact Form 7

参考 Contact Form 7WordPress プラグイン

簡単にお問い合わせフォームが作成できます。

カスタマイズ方法は下記エントリーが参考になります。

Edit Author Slug

参考 Edit Author SlugWordPress プラグイン

ストークの記事下に表示されているプロフィールには投稿者のアーカイブページへのリンクが貼られているのですが、このままだとIDが漏れてしまう可能性があるため、それを防ぐためのプラグインです。

設定は下記エントリーが参考になります。

参考リンク 参考 「Edit Author Slug」で、知らない間に漏れている!?IDを保護しよう!コビトブログ

EWWW Image Optimizer

参考 EWWW Image OptimizerWordPress プラグイン

インストールしておけばブログにアップした画像をロスレス圧縮してくれます。

参考リンク
参考 画像を最適化(圧縮)してWordpressブログを高速化する方法寝ログ

FPtimer

投稿を行うと自動的に指定間隔をあけて予約投稿に変更してくれるプラグイン。
はるしかさんのエントリーで紹介されているものです。

参考リンク 参考 Wordpressで投稿をする時、自動的に予約投稿に切り替える② 雑食こじかの知識箱

Jetpack by WordPress.com

参考 Jetpack by WordPress.comWordPress プラグイン

たくさんの機能が1つに詰まったプラグイン。

当サイトで有効にしている機能は

  • サイト統計情報
  • コメント
  • Markdown

以上の3つです。

サイト統計情報は、WordPress.comと連携してダッシュボードに統計情報を表示してくれるので便利です。

コメントは、WordPressでのログイン、メールアドレスの入力の他に、Twitter、Facebook、Google+のアカウントでログインしてコメントを残すことができるので、従来のものよりコメントに対するハードルが低くなるかもと思い、有効にしています。

Optimize Database after Deleting Revisions

参考 Optimize Database after Deleting RevisionsWordPress プラグイン

データベースを最適化してくれたり、不要なリビジョンなどを削除してくれます。
使うときのみ有効にしています。

PHP Code Widget

参考 PHP Code WidgetWordPress.org

テキストウィジェットと同様に、PHP コードも扱えます。

WordPress のテキストウィジェットコードから大きく派生しています。

PS Auto Sitemap

参考 PS Auto SitemapWordPress プラグイン

来訪者向けのサイトマップを表示してくれます。

デザインや表示方法もいろいろ選べます。

Search Regex

参考 Search RegexWordPress プラグイン

WordPress に強力な標準検索機能と置き換え機能を追加するプラグイン。

今回のテーマ移行で大活躍してくれました。

使う時だけ有効にしています。

Redirection

参考 RedirectionWordPress プラグイン

はてなブログからこちらに移転したときに、URLの引き継ぎがうまくいかなかったエントリーだけ、このプラグインを使って正しいURLにリダイレクトしています。

Table of Contents Plus

参考 Table of Contents PlusWordPress プラグイン

エントリーに目次を自動的に表示してくれます。

SANGOではTOC+用のスタイルが最初から設定されています。

Widget Logic

参考 Widget LogicWordPress.org

WordPressの条件分岐タグでウィジェットをコントロールするプラグイン。

条件分岐の説明はこちらが参考になりました。

参考リンク
参考 便利なWordPressの条件分岐16パターン:カスタマイズで活躍するものを厳選!サルワカ | サルでも分かる図解説明マガジン

WordPress Ping Optimizer

参考 WordPress Ping OptimizerWordPress プラグイン

一度投稿した記事を「更新」したときに通知しないようにするためのプラグイン。

参考リンク
参考 「WordPress Ping Optimizer」で、すぐに検索されるブログに!コビトブログ

WordPress Popular Posts

参考 WordPress Popular PostsWordPress.org

人気な投稿をサイト上に表示するカスタマイズ豊富なウィジェットです。

WP Fastest Cache

参考 WP Fastest CacheWordPress プラグイン

簡単に設定できるキャッシュプラグイン。
有効にできるものはほとんど有効にして使っています。

さっちん

STORKの時の名残でプレロードのチェックは外しています。

WP Multibyte Patch

参考 WP Multibyte PatchEastCoder;

WordPressを日本語環境で正しく動作させるためのプラグイン。

最後に

STORKからの移行組が増えてきて、カスタマイズ記事やトラブルシューティングがさらに色々あがってくると思います。

情報は多いほうがいいと思いますので、みんなで情報を共有していきましょう。

私も自分で試してみたものやいいなぁと思ったものはこちらにまとめていきますので、参考にしていただけると嬉しいです。

2 Comments

ゆうこりん

紹介していただき、ありがとうございます(*´꒳`*)
フォント、プラグイン無しで変更できますよ〜こっそりリンク置いていきますね。
SANGO、いいテーマですよね!!

返信する
さっちん

コメントいただきありがとうございます♪

フロップデザインフォントはWebフォントとして使う場合、プラグインかフォントを購入してねっていうのがあるんです。
フォントを購入するよりはプラグインの方が安いので、プラグイン一択なんです(;´∀`)

SANGOはホントいいテーマだと思います♪

返信する

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です