SANGO公認の子テーマPORIPUがリリースされました

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

もくじ

ブログのテーマをSTORKからSANGOに変えました。
STORKはとってもいいテーマだと思いますし、今まで特に不満はありませんでした。

では、なぜ不満もないSTORKからテーマを変えたのか。
それは、私がサルワカのファンだったからです。

参考

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

サルワカは「サルでも分かる」というだけあり、内容がとてもわかりやすいですし、サイトのデザインもすっごく好みなんです。
そのサルワカの中の人が作ったテーマと聞いたら、使わない理由がないですよね。

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

お知らせ
現在はSANGOの公認子テーマのPORIPUに変更しています。
詳細はこちらのエントリーをご覧ください。
PORIPUはかゆいところに手が届く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;}
MEMO
Ver.1.3からはギザギザがなくなりましたので、上記のカスタマイズは不要です。
そのほかのアップデートの内容や注意点などもいろいろ書かれていますので、SANGOユーザーさんは要チェックですよー。

参考

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

見出しを変更

参考

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

現在はサルワカのサイトで紹介されている見出しを参考に変更しています。
h3の青いタテ線はもともと指定されているものを活かしています。

参考

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

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

参考

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

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

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

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

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

MEMO
ニシカワさんがブックマークレットをつくってくれました。
参考

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

さっちん

以前のものより改良されて使いやすくなりました。

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

参考

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

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

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

SANGOのテーマ更新情報SANGOカスタマイズガイド

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

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

参考

「GIMP」無料で高機能な画像編集・処理ソフト窓の杜ライブラリ

参考

フラットデザインに最適!WEBサイトやDTPですぐ使える商用利用可能なフラットアイコン素材がフリー(無料)ダウンロードできるサイト『FLAT ICON DESIGN』FLAT ICON DESIGN -フラットアイコンデザイン-

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

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

MEMO
サンダーガールさんがCanvaを使った方法をまとめてくれています。
GIMPでもCanvaでも方法は変わらないので、みなさんもフラットなアイキャッチを作ってみてくださいね。
参考

100記事書くためのおしゃれなアイキャッチの作り方遠回りこそが最短の道

AndroidでもCanvaが使えるようになるといいんだけどなぁ。←使えるようになりました!

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

参考

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

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

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

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

参考

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

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

関連記事の見た目を変更

参考

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

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

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

見た目を変えたい方はあずさんのカスタマイズがオススメです。
私もあずさんのエントリーを参考にちょこっと見た目を変えています。

参考

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

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

さっちん

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

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

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

参考

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

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

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

参考

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

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

参考

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

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

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

参考

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

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

参考

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

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

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

参考

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

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

参考

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

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

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

参考

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

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

参考

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

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

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

参考

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

サイドバーの幅を変える

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

参考

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

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

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

参考

ワードプレステーマSANGOのフォントを太くする方法ひすこ道

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

このエントリーのコメント欄なんですが、ピンパックの見た目だけ気に入らなかったので、見た目を揃えたくて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対応にする方法は下記エントリーにまとめています。

Simplicityとエックスサーバーで簡単にサイトを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カスタマイズガイド

参考リンク

参考

AddQuicktagによく使うタグを登録して記事作成の効率を上げようブログ初心者応援サイト:Naifix

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

参考

AkismetWordPress プラグイン

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

Broken Link Checker

参考

Broken Link CheckerWordPress プラグイン

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

Contact Form 7

参考

Contact Form 7WordPress プラグイン

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

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

参考

Contact Form 7のCSSデザインとカスタマイズ方法ブログ初心者応援サイト:Naifix

参考

「Contact Form 7」で、便利な問合せフォームを、サクッと作る!(スパム対策も)コビトブログ

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 プラグイン

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

参考リンク

参考

初心者にも扱いやすいWordpressキャシュプラグイン「WP Fastest Cache」の使い方寝ログ

参考

WP Fastest Cacheの設定方法と使い方|日本語対応で使いやすいWordPressプラグインfujimotoyousuke.com

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

WP Multibyte Patch

参考

WP Multibyte PatchEastCoder;

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

最後に

STORKからの移行組が増えてきて、カスタマイズ記事やトラブルシューティングがさらに色々あがってくると思います。
情報は多いほうがいいと思いますので、みんなで情報を共有していきましょう。
私も自分で試してみたものやいいなぁと思ったものはこちらにまとめていきますので、参考にしていただけると嬉しいです。

3 Comments

ゆうこりん

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

返信する
さっちん

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

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

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

返信する

コメントを残す