【随時更新】WordPress(ワードプレス)テーマ「SANGO」カスタマイズまとめ

この記事はWordPress有料テーマ「SANGO」にて現在、当サイトが行なっているカスタマイズ全集です!

自分ではcss扱えないので全て人様のカスタマイズ記事から拝借させていただいております。

テーマ

子テーマ

 

注意
私のカスタマイズは、基本的に扱うのは子テーマのみです。

SANGO公式カスタマイズ

テーマ色の決め方

当サイトのテーマ色はサルワカ さんが開発されたCOOL COLORSの配色パターン見本を丸パクリしています。

色彩感覚に自信のない方は是非参考にして見てくだい。

参考COOL COLORSMATERIAL COLORS

デフォルトの見出しを変える

SANGOカスタマイズガイドを参考にデフォルトの見出しデザインを変更しました。

毎回、見出しのデザインをする必要がないのでかなり効率が上がります。

参考SANGOでデフォルトの見出しを変える方法

ハンバーガーバーを消す

あっても意味がないと噂のハンバーガーメニュー(これ )消去してます。

参考WordPressテーマ SANGOについてのよくある質問(トップページ/アーカイブページについて)

ボタン幅を100%にする

デフォルトでは文字の長さとボタンの幅が同じだったので、ボタンが続くと不格好だったり、ボタンの主張がはっきりしていなかったりしたのでボタンの幅を横いっぱいになるようカスタマイズしました。

全部のボタンを横いっぱいにする方法とひとつひとつしたいものだけをする2種類の方法があります。

参考WordPressテーマ SANGOについてのよくある質問(記事ページについて)

公認子テーマPORIRUを使ったカスタマイズ

以下は全てSANGO公認の子テーマ「PORIPU」にて行なったカスタマイズです!

参考PORIPU-SANGOの収益化と時短を加速させる子テーマ

インフィード 広告を増やす

インフィード 広告はデフォルトだとひとつのみしか配置できませんがPORIPUだと簡単に2つ表示することができます。

ウィジェットにカテゴリ別の人気記事を表示する

プラグインを入れずに人気記事、カテドリ別の人気記事をウィジェットに装備することが出来ます。

読了時間の表示

ボタン一つで記事の上部の日付、更新日の横に読了目安を表示することが出来ます。

アイキャッチをバイラル風デザインに

全部ではないですがこの記事のようにアイキャッチ画像をバイラル風(画像の上に記事タイトルが載るこれ )に投稿画面で選択することが出来ます。

フッターにロゴを表示する

ページ表示速度の高速化

ページの高速化はサルワカさんの記事とマサオカブログさんを参考にしています。

参考WordPressの高速化〜表示速度を上げる12の技〜 SANGOのカスタマイズまとめ!一番最初にやる設定集ページ速度を高速化する

使用プラグイン

Instagram Feed

インスタグラムをトップページや記事内にインスタグラムそのもののような形で配置でき、デザインも可愛いので気に入ってます。

TeblePress

記事内のテーブル(表)はこのプラグインまたは、デフォルトのものを使っています。

Rinker

おやこ育てのサイトを運営するやよいさんが管理するプラグイン「Rinker」を使用してAmazonのリンクを作成しています。

投稿画面でワンクリックから商品検索するとすぐに作成でき便利です。

参考商品リンク管理プラグインRinker(リンカー)の公式サイト

その他SANGOカスタマイズ

記事一覧カードの周りに余白をつける

記事一覧カードの画像に余白をつけています。これは完全に好みですね。

ちなみにこれをする際は再度インフィード のアドセンスを作り直すと同じように画像に枠線ができるので馴染みます。

参考記事カードの画像に余白をつけておしゃれ感をだしてみる

記事上部に見出しラベルを装着

スマホ表示の際に見出しラベルが記事上部に表示されるようカスタマイズしてます。

パソコンでもしたいのですがなぜかパソコンでは出て来ないので誰か原因わかる方教えていただきたいです…

参考上に表示される目次をスマホとPCで切り替える

記事下とスマホナビドロワーのシェアボックスの背景をグラデーションに

デフォルトはグレーで少し暗かったので、記事下のシェアの部分とモバイル用固定フッターメニューのシェアの部分をグラデーションに変更しました。以下の参考記事でどちらも変更されます。

参考記事下のフォローボックスをカラフルする

アイキャッチ上の投稿・更新・読了目安時間マークに丸い背景を追加

マークがあまり目立たなかったので少し目立つようにしています。

参考更新マークに丸い背景をつける

Rinkerのデザイン

Rinkerのデザインはfor menさんのカスタマイズから拝借しています。

参考Rinkerのデザインを変えてみる

もくじのデザイン

引用:for men

これも好みの問題ですが、目次もデフォルトのものからfor menさんのカスタマイズを参考にさせていただいて変更しています。

参考「もくじ」にオリジナル感を出してみる

ちなみにキャプション(これ )ちょっとした変更もしています。

参考キャプションを変更する

2列表示の右側を吹き出しに

パソコン表示

スマホ表示

記事内で結構多用している、2列表示の時に吹き出しを表示しています。

パソコンじは横に2列、スマホじは下に吹き出しが出るサルワカ さんデザインです。

参考吹き出しボックスを自作する

画像の上に一言添える

画像の上に一言添えるカスタマイズもfor menさんからいただいています。

参考ワンクリック!ボタンの上に文字をつけよう

ウィジェット間の幅を変える

サイドバーウィジェットの間隔を少し狭くしています。

参考サイドバーウィジェットの余白を調整する方法

ウィジェットの背景を透過させる

ウィジェットに貼った広告の背景が少しだけはみでるのガキになるので透過させました。

参考アドセンスを貼ったWordPressウィジェットの背景を消す方法

ちなみに上の記事の最後で紹介されている方法でスポンサーリンクのラベルを付けています。

デザインが可愛くてお気に入りです!

モバイルフッターメニューを透過させる

スマホ表示の際に下に固定されているメニューの背景を半透明にしています。

参考SANGOのカスタマイズまとめ!一番最初にやる設定集(CSSプチカスタマイズノート)

関連記事カードカスタマイズ

なかなかタイプのデザインがなかったので自分でカスタマイズして見ました!

【SANGO】関連記事カードに「関連」「続きを読む」を追加するカスタマイズ

ページ切り替え番号を四角に

HTML
.pagination a{
border-radius: 8%;
background: #f3f3f3;
}
.pagination span{
border-radius: 8%;
}
.pagination li {
margin: 3.5px 7px;
} 

以上がこのサイトで行なっているSANGOのカスタマイズの全てになります。

SANGOカスタマイズ沼の皆さん本当にいつもお世話になっております。ありがとうございます。