WordPressのテーマをSimplicityからSANGOに変えた話

ブログを続けるモチベーションアップのためにテーマを変更しました。

今まではSimplicityという無料のテーマを使用しておりました。無料にもかかわらず、カスタマイズ性の高さ、機能性の高さで多くのブログで使用されているテーマです。私も始める際に各所での評判を見て使用することに決めました。

しかし、かねてから有料テーマも使ってみたいという思いがあり、2018年に変わるのを期に思い切って変えることにしました。

そこで白羽の矢を立てたのが「SANGO」です。Google推奨のマテリアルデザインでとてもおしゃれなテーマです。デザインセンスが乏しい私にはデフォルトでもおしゃれなテーマで楽をしようと考えです。

今回はWordpress初心者が、テーマをSimplicityからSANGOに変更して行った設定、参考にしたブログをご紹介しようと思います。

WordPressテーマ「SANGO」とは

SANGOはWebメディアの「サルワカ」から生まれた有料Wordpressテーマです。10800円で購入できます。

「サルワカ」を見ていただくとわかると思いますが、とてもおしゃれですよね。統一されたマテリアルデザイン、色使い、きれいなアイキャッチ画像等、どれをとってみてもセンスにあふれております。

今回私が購入したテーマ「SANGO」は、カスタマイザーを設定するだけでそんなおしゃれなブログが作れてしまうというものです。最近は多くのサイトで見かけるようになってきましたよね。「SANGO」を使用されているブロガーの方々もみなおしゃれなデザインになっております。

そんなおしゃれデザインブログになりたい!という思いから、今回SANGOにテーマ変更しました。

しかし、ガワだけ変えてもおしゃれにならないという現実を知る結果となりましたが・・・。

テーマをSANGOに変えよう

SANGOはこちらから購入することができます。

参考

SANGO | 心地良さを追求したWordpressテーマSANGO

右上のダウンロードから購入画面に進むことができます。現在は10800円とのことですが、いずれは値上げも検討しているとのことですので、気になる方は今のうちに購入しましょう。

今回はカスタマイズもするので子テーマを含めてWordpressにテーマ追加しました。

参考

WordPressで子テーマを活用して安全にカスタマイズを行う方法サルワカ

SANGOをカスタマイズする

カスタマイズなんてたいそうなこと言っていますが、先人の方々のブログ記事をそのままなぞるだけというカスタマイズです。

Simplicityですらそのままで使っていた私としてはどこから設定していけばいいのやらわかりません。そんなわけで、ネットで情報を探してみると、そんな私にぴったりの記事を発見したのです。というか、これを見ればすべて完了してしまうと思います。

参考

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

順番に設定していけばほぼすべての設定が終わるという素晴らしい記事です。

SANGO自体はテーマのカスタマイザー(外観→カスタマイズから設定できる項目)で順番に項目を設定していけば、素敵なブログが完成するという優れものなテーマでもあるのですが、マサオカブログさんではさらにおしゃれにするための技がいっぱい詰まっております。

私も順番に設定していくことによってほとんどの設定が終わってしまいました。

以下は私が自分の色をだそうと思って行った設定を備忘のために書いていこうと思います。(とは言え、すべて先人の知恵を拝借しただけなので自分の色も何もないですが)

ロゴ画像

サイトを印象づける表紙みたいなもの。サイト名が猫とフェレットの名前からとった「たまくま倶楽部」という名前なので街の中を闊歩する猫とフェレットをあしらった画像にしてみました。ちょっと主張が強すぎる気もする。ちなみにこれはIllustratorで作りました。イラストは以下のサイトより借用。

参考

シルエットデザインSILHOUETTE DESIGN

色の設定

これ大事。むしろSANGOではこれが個性を決めるすべてといっても過言ではない。私は緑好きなので緑メインでやってみた。ちょっと派手かな。

モバイル用フッターメニューの設定

モバイル端末で閲覧したときに、画面下部に固定して表示されるメニューです。これを設定方法にならって設定するだけで簡単に作れちゃいます。

週間人気記事の表示

Simplicity時はWordPress Popular Postsにて「今週の人気記事」を表示させていました。引き続きこれを使いたいと思っていたところ、またまたマサオカブログさんにてSANGOに合った表示に変更する方法が記事になっていました。ありがたや。

参考

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

ちなみに、追尾サイドバーにカテゴリ毎の人気記事を表示させる方法も紹介されています。

参考

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

見出しのカスタマイズ

WordPress初心者がまず手を出したいカスタマイズが見出しのカスタマイズ。私はh2~h4まで使用しているのでこのデザインをカスタマイズしました。と言っても、子テーマのCSSにコピペしただけですが!以下からコピペするだけです。簡単すぎ。

参考

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

アドセンスの広告設定

ウィジェットにて広告を設定することができます。ウィジェット配置できる箇所であれば広告表示が可能です。とは言え、先人に従えということで再びマサオカブログさんの記事を参考にしながら記事配置させていただきました。助かります。

記事の修正が必要になった

設定は上記で終わったのですが、Simplicityから変更したことにより一部記事の修正が必要になりました。修正したのは以下の3点。

アイキャッチ用に設定していた記事内画像の削除

Simplicityでは記事内の一番最初の画像をアイキャッチ画像にする機能がありました。そのため、アイキャッチにしたい画像を記事の最初に挿入していました。

ところが、SANGOではアイキャッチ画像を記事の最初に表示させる機能があります。(カスタマイザーより表示させなくすることも可能です)
そのため、この状態だとアイキャッチ画像が記事の最初に連続で表示されるという現象が起きていました。

そんなわけで、記事最初に挿入していた画像をすべて削除するという作業を行いました。

Pz-LinkCardのショートコードを変換

私は外部や内部にリンクを貼る際にプラグインPz-LinkCardを使用していました。しかし、SANGOには備え付けのショートコードで同様の機能を実現できます。そのため、Pz-LinkCardのショートコードをSANGOのショートコードに置き換えるという作業を行いました。

アイキャッチ画像変更

これは修正が必要になったわけではなくて、せっかくなら他の人みたいなマテリアルデザインなアイキャッチ画像を作りたい!という思いから変更してみました。以下のサイトよりアイコンを拝借し、Canvaでアイキャッチ画像を作成しました。これも先人の知恵にのっからせてもらっています。しかし、センスが・・・。

参考

FLAT ICON DESIGNフラットアイコンデザイン

参考

おしゃれなアイキャッチ画像の作り方&デザインのコツ8つサルワカ

今後行いたいカスタマイズ

SANGOを購入したのは年末。しかし、これらの設定作業にかなりの時間を要してしまいました。今ですらまだ変更したい箇所があったりします。

以下は私が今後行いたいカスタマイズです。

吹き出しをカスタマイズ

SANGOには吹き出しを追加できるショートコードがあります。これを使って我が家の猫たちを登場させようと計画中です。そのためにも、吹き出しの色で猫3匹とフェレットを使い分けたいのです。

参考

【SANGO】ショートコードで使える会話風ふきだしをコピペで作ろう!あずの独り言

外部リンクボックスのデザインを変える

SANGOにはショートコードで外部リンクボックスを作成できます。そのボックスをカスタマイズするのです。

参考

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

色をもう少しまとまりよく変えたい

一応色の設定をしていますが、もう少しまとまり感をもたせたい。しかし、どういう組み合わせがいいのかイマイチよくわからない。というわけで、もう少し色々試してみたいと思います。そのうち色が変わっているかもしれませんね。

参考

マテリアルデザインカラー 色の組み合わせ見本集サルワカ

SANGOをフル活用した記事の書き方

カスタマイズとは直接関係ないですが、SANGOには多くのショートコードでいろんな装飾ができます。せっかくなのでそれをフル活用した記事の書き方を覚えていきたいですね。補足説明や注意やいろんな見出し、ボックスを活用したいですよね。デザインが破綻しない程度に。

MEMO
そして、私は知ることになる。いろんなボックスや見出しをやたらめったら使うと統一性がなくなり、バラバラな見た目になってしまうということを。

まとめ

正直、この手の記事はネットで検索すればもっと良質な記事がたくさんでてくると思います。もちろん素敵なカスタマイズ方法がまだまだ転がっています。ただ、SANGOはやりすぎるとどんどん沼にはまっていくという・・・そんな人がたくさんいるそうです。

今回私は上記のような流れで設定しました。SANGOは私のようなデザインセンスがない人でも一通り設定すればそれなりになることがわかりました。しかし、それと共に改めてSANGOで素敵なブログを作っている人はやはりデザインセンスがある人なんだなということがわかりました。デザインセンス、大事。

今後ももうちょっと個性をだしてたまくま倶楽部らしいブログを作れたらなと思います。がんばるぞい。

コメントを残す

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