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

MEMO
タイトル少し変えました

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

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

参考

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

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

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

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カスタマイズガイド

h2と関連記事、h3、h4の見出しを変更

参考

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


親テーマのentry-option.cssに実際にビジュアルエディターで使える見出しのcssが記載されているので、そこから白ステッチとチェックボックスのものをコピペしました。

関連記事の見出しもH2と同じものを指定しています。

MEMO
現在はサルワカのサイトで紹介されている、点線+色を変える(h4)、背景をストライプで塗る(h3)、ストライプ+上下線(h2、関連記事)に変更しています。
h3の青いタテ線はもともと指定されているものを活かしています。
参考

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

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

参考

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

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

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

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

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

SANGO・他サイトへのリンクカード用ブックマークレット(仮)を作りましたニシカワのメモ帳

さっちん
これ、PCで使う分にはとてもいいんですが、ご本人もおっしゃってるように、サイト名がロゴでそもそも選択できなかったり、Androidのように選択した文字をブックマークレットで使えないという問題があります。
私はMy Utility-Make Link ジェネレータtitleとsiteの両方にエントリーのタイトルとサイト名が入るように作成したものを使ってます。
これならAndroidでもPCでもいらないところを消すだけで済みます。

この方法でもエントリータイトルにサイト名が含まれていない場合は完全に詰みます(;´∀`)

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

参考

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

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

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

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

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

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

参考

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

参考

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

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

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

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

3分待ってやる。フラットデザインなアイキャッチの作り方を教えろ。つくるブログ

AndroidでもCanvaが使えるようになるといいんだけどなぁ。

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

参考

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

プロフィールはPCの追尾エリアに表示するようにしているので、スマホでは表示されません。
その代わりスマホでは記事下とフッターでプロフィール、ハンバーガーメニューでフォローボタンが表示されるようになっています。

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

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

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

参考

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

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

関連記事のサムネイルを長方形で表示

参考

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

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

お知らせ
現在はあずさんのエントリーで紹介されているショートコードを使って表示しています。
このブログに合わせて青をベースに少しアレンジしています。
参考

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

カテゴリーの見直し

グローバルメニューでカテゴリーの階層化ができなくなってしまったので、カテゴリーを減らしました。

テーマにしばられない会話風ふきだしをショートコードで使えるようにする

さっちん
あずさんのエントリーを参考に黄色と水色のふきだしをショートコードで使えるようにしました。
テーマにしばられないので、テーマが変わっても使えますよ♪
2号
2号がしゃべるとこんな感じ
3号
これは3号

私とムスコスで色と向きを変えています。

参考

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

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

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

参考

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

フッターに固定することもできますが、フッター固定メニューは次回のアプデで採用されそうなので、固定にはしませんでした。

MEMO
フッター固定メニューが採用されました!
中の人がくわしく説明してくれていますので、ありがたく使わせていただきましょう(*´∀`*)

参考

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

記事内広告を任意の場所に表示する

まっさーさんが私のニーズにぴったりなエントリーをアップしてくれました。
3番目のH2の見出しの前に記事内広告を表示したかったので、ありがたくコピペさせていただきました。

参考

コピペでOK!SANGOのAdsense記事中広告を増やす方法マサオカブログ

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

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

りらさんがアフィリエイトリンクをボタンにする方法をアップしてくれています。
STORKから移行してきたみなさんには嬉しいエントリーだと思うのでリンクをのせておきますね。

参考

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

爆速SANGO計画

PegeSpeed Insightsで95というハイスコアを叩き出したまっさーさんのエントリーです。
私もまねしていろいろ試してみましたが、他のプラグインとの相性もあって、結局元の状態に戻しましたw

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

参考

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

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

参考

WordPressの高速化〜表示速度を上げる12の技〜サルワカ

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

りらさんがSTORKとSANGOで使えるヘッダーメニューを固定する方法をアップしてくれています。
コピペで簡単にできますのでお試しください♪

参考

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

このブログではスライドメニューを表示させているので、40px追加でバッチリでした。

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

もうコレ、私のエントリーいらないのでは?w
あずさんがいままでのカスタマイズを1つのエントリーにまとめてくれています。
今後も追加予定とのことなので、楽しみです♪

参考

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

MEMO
あずさんちで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化)しよう

2017.03.13

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

All In One SEO Pack

テーマでSEO対策がされているので、プラグインに頼るのをやめました。
OGPについてはゆめぴょんさんのエントリーを参考に自分で設定しました。app_id以外テーマであらかじめ設定されているので、ゆめぴょんさんのエントリーを参考にapp_idだけ追記すればOKです。

参考

【WordPress】OGPとTwitterCardsの設置方法!プラグイン不要でコピペでOKゆめぴょんの知恵

MEMO
中の人がfunctions.phpからhead内にタグを追記する方法をアップしてくれました。
次回のアップデートでカスタマイザーからapp_idを追加できるようになるそうですが、せっかちな方はお試しください。

参考

【WordPress】functions.phpからhead内にタグを追加する方法SANGOカスタマイズガイド

Crayon Syntax Highlighter

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

Lockets

このプラグインを使うと混在コンテンツができあがってしまいます。
functions.phpに追記してもダメだったので諦めました。

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

Pz-LinkCard

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

SNS Count Cache

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

WordPress Popular Posts

SANGOではプラグインなしで同様の機能が使えるので不要になりました。

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

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

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

フォントをあいこにしたかったけど、関連記事の表示が崩れるのでやめました。
フロップデザインにするかデフォルトにするか迷って、今回はデフォルトのフォントを採用したので不要になりました。

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

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

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

SANGOにした一番のメリットはプラグインの数を減らすことができたことです。
常時動いているプラグインが15個、使う時だけ有効にしているプラグインが2個、計17個まで減らすことができました。

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

当サイトのスペック

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ブログを高速化する方法寝ログ

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

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

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+用のスタイルが最初から設定されています。

WordPress Ping Optimizer

参考

WordPress Ping OptimizerWordPress プラグイン

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

参考リンク

参考

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

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

2 Comments

ゆうこりん

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

返信する
さっちん

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

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

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

返信する

コメントを残す