テーマを変更したため表示が崩れております

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

WordPress
この記事は約21分で読めます。

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

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

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

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

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

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

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

現在はSANGOの公認子テーマのPORIPUに変更しています。詳細はこちらのエントリーをご覧ください。
  1. SANGOとは?
  2. SANGOのオススメポイント
    1. 中の人のサポートが素晴らしい!
    2. STORKからの移行組が多いのでトラブルが起きたときの解決方法がすぐわかる
  3. SANGOに変えてからやったカスタマイズ
    1. STORK独自のショートコードからSANGO独自のショートコードへの置換
    2. 関連記事や固定ページの見出しのギザギザを消す
    3. 見出しを変更
    4. 他サイトへのリンクの見た目を変更
    5. 記事一覧ページにインフィード広告を設置
    6. アイキャッチをフラットに
    7. サイドバーや記事下にプロフィール・フォローボタン・CTAを設置
    8. 関連記事の見た目を変更
    9. 会話風ふきだしの見た目を変更
    10. モバイル表示のスライドメニューをミドルメニューに変更する
    11. SANGOに週間人気記事を表示する
    12. トップページに人気記事を設置
    13. エントリーの読了時間をキレイに表示する
    14. エントリーのデザインをバイラル風にする
    15. サイドバーの幅を変える
    16. PCで見た時の文字を太くする
    17. コメント欄のコメントとピンパックの見た目を揃える
    18. 記事タイトルの文字数を自動で表示する
    19. その他オススメのカスタマイズ
      1. アフィリエイトリンクをボタンにする
      2. 爆速SANGO計画
      3. スマホのヘッダーメニューを固定する
      4. 公式サイトのカスタマイズガイド
      5. あずさんのカスタマイズまとめ
      6. まっさーさんのカスタマイズまとめ
  4. STORKから引き続き行っているカスタマイズ
    1. コンテンツ内にある非SSLのURLを表示前にSSL化する
  5. SANGOにしてからやめたプラグインとカスタマイズ
    1. All In One SEO Pack
    2. Crayon Syntax Highlighter
    3. Lockets
    4. Pz-LinkCard
    5. SNS Count Cache
    6. ウィジェットを表示(Display Widgets)
    7. 日本語ウェブフォントプラグイン
    8. カエレバ、TOCのカスタマイズ
  6. SANGOにしてからプラグインが減りました
    1. AddQuicktag
    2. Akismet Anti-Spam (アンチスパム)
    3. Broken Link Checker
    4. Contact Form 7
    5. Edit Author Slug
    6. EWWW Image Optimizer
    7. FPtimer
    8. Jetpack by WordPress.com
    9. Optimize Database after Deleting Revisions
    10. PHP Code Widget
    11. PS Auto Sitemap
    12. Search Regex
    13. Redirection
    14. Table of Contents Plus
    15. Widget Logic
    16. WordPress Ping Optimizer
    17. WordPress Popular Posts
    18. WP Fastest Cache
    19. WP Multibyte Patch
  7. 最後に
スポンサーリンク

SANGOとは?

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

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

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

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

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

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

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

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

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

見出しを変更

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

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

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

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

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

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

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

さっちん
さっちん

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連記事の見た目を変更

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

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

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

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

現在、該当のエントリーは削除されています。

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

さっちん
さっちん

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

現在、該当のエントリーは削除されています。

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

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

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

現在、該当のエントリーは削除されています。

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

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

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

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

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

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

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

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

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

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

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

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

サイドバーの幅を変える

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

現在、該当のエントリーは削除されています。

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

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

現在、該当のエントリーは削除されています。

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

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

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

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

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

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

現在、該当のエントリーは削除されています。

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

長すぎですね…。

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

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

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

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

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

爆速SANGO計画

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

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

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

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

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

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

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

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

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

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

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

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

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

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

現在、該当のエントリーは削除されています。

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

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

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

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

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

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

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

さらに

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

を追記しています。

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

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

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

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

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

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

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

Broken Link Checker

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

Contact Form 7

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

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

Edit Author Slug

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

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

EWWW Image Optimizer

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

FPtimer

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

Jetpack by WordPress.com

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

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

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

以上の3つです。

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

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

Optimize Database after Deleting Revisions

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

PHP Code Widget

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

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

PS Auto Sitemap

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

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

Search Regex

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

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

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

Redirection

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

Table of Contents Plus

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

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

Widget Logic

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

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

WordPress Ping Optimizer

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

WordPress Popular Posts

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

WP Fastest Cache

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

さっちん
さっちん

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

WP Multibyte Patch

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

最後に

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

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

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

この記事を書いた人

コールセンターオペレーター兼3兄弟の母/ゲームはやるより観るのが好き/ジブンテチョラー。

さっちんをフォローする
スポンサーリンク
WordPress
スポンサーリンク
Love!?2nd

コメント

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

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

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

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

タイトルとURLをコピーしました