SANGOのカスタマイズまとめページへお越しいただき、ありがとうございます( ˶ˆ꒳ˆ˵ )

SANGOのカスタマイズを趣味としている、くま（@Bearface18）と申します。このページでは、ぼくが今までにやってみたSANGOのカスタマイズをまとめています。

紹介しているカスタマイズは50を超えているので、他にはない圧倒的カスタマイズまとめになっています。

カスタマイズの前に・・・

ぼくのカスタマイズは基本的にCSSのみを変更するだけです。

CSSって？何？おいしいの？って人はひとまずこちらの記事に目を通してくださいね。

CSSで何ができるの？ざっくりとCSSのイメージをつかもう

ぼくは、CSSだけでできるカスタマイズを目指しています

また、カスタマイズは自己責任でやってください。

は？自己責任？意味分かんないんだけどって人はこちらの記事を読んでください。

カスタマイズは自己責任。ぼくはこんな風に思っています。

これは本当に重要だから、はじめてカスタマイズする人は読んでな

こちらのまとめサイトもおすすめ

SANGOはカスタマイズ好きの変態がたくさんいるテーマです。

そのため、カスタマイズをまとめているブログがたくさんあるので紹介しますね。

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

PORIPUの製作者まっさーさんがまとめたカスタマイズです。たまりませんね！

また、ぼくとは違ってテーマのもっと深い部分をカスタマイズしている方もいます。

CSSは表面部分をカスタマイズしているイメージです。

参考 【SANGOカスタマイズ全集】美しいWPテーマをさらに魅力的に！ | こじかログこじかログ

SANGO専用のプラグインを作成しているはるしかさんのサイトやで！

SANGOのカスタマイズ
二文字背景丸のちょうどいいやつ

こんなのや

こんなの

【ブログ更新】
ちょうどいい二文字背景丸のやつ٩( ᐖ )۶https://t.co/M7HJP30NoD @Bearface18より

— 旅立ちのくまさん (@Bearface18) May 14, 2019

カスタマイズのこだわり

二文字に丸い背景をつけるだけでもかなり印象が違います。アイコンや半角カタカナをいれても面白いカスタマイズです。

お手軽にできるカスタマイズです。しかもかなり応用範囲が広いのでおすすめ！

このカスタマイズは玄人の人に好評やったな

記事を見に行く

SANGOのカスタマイズ
メリット・デメリットボックス

メリット

デメリット

【ブログ更新】
メリット、デメリットのBOXを作ってみましたヾ(*´∀｀*)ﾉ
タイトルにアイコンがあると可愛いですね(*´罒`*)whttps://t.co/KbrT9xK6MN

— 旅立ちのくまさん (@Bearface18) May 12, 2019

カスタマイズのこだわり部分

タイトル部分にもアイコンを追加することで、ボックスがひと目でわかりやすくなっています。肯定は緑、否定は赤で表現してみました。この色はGoogleの色を参考に配色しました。

メリット、デメリットボックスはアフィサイトとかでよく使うイメージだね

メリット・デメリット以外にもアイコンを変更することでいろいろ使えそうやな

この記事を見に行く

SANGOのカスタマイズ
パンくずリストをシュッとさせる

Before

After

【ブログ更新】
SANGOのパンくずリストをカスタマイズしてみました(* 'ᵕ' )

お気に入りはアイスクリームです(*´罒`*)whttps://t.co/maS4Rob0Tc

— 旅立ちのくまさん (@Bearface18) March 21, 2019

カスタマイズのこだわり部分

パンくずリストは以外と見られる部分です。そこにブログ独自のアイコンがあると可愛いですよね。スマホのときは中央寄せにして、一番最後の▶は非表示にしています。

パンくずリストを変更するだけでも個性がでるよね

アイスクリームのアイコンを2色にするのはさすが変態やな

この記事を見に行く

SANGOのカスタマイズ
目次へGO ②

シンプルver

色付きver

【 ブログ更新 】
目次へGOボタンの固定バージョンを作ってみました( ˙꒳​˙ᐢ )

・3パターン
・細かいところ修正https://t.co/lXEGnvZNMJ

— 旅立ちのくまさん (@Bearface18) December 25, 2018

カスタマイズのこだわり部分

Twitterで目次が話題になっていたので、ひょいっと目次へ戻れるように固定表示するようにしました。メニューボタンと同じ大きさにして、統一感を出しています。文字も中央にくるようにカスタマイズしました。

このときはTwitterで目次論が繰り広げられてたね

そやな、まぁココらへんは自分の好きなようにすればいいやん

この記事を見に行く

SANGOのカスタマイズ
目次へGO ①

こんなの

なし

なし

目次へGOボタン固定バージョンのコードができたので、とりあえずFANBOXに入れておきます(*´罒`*) pic.twitter.com/Obz1SDhtd1

— 旅立ちのくまさん (@Bearface18) December 9, 2018

カスタマイズのこだわり部分

ファーストビューに表示するようにしたのが一番のポイントです。記事がパッと表示された時に、スッと目次に移動できたらいいなと思ってカスタマイズしました。

とりあえず目次へ移動ってのもよくあるよね

ノウハウ記事とかは導入文よりも目的の場所を素早く知りたい事がおおいしな

この記事を見に行く

SANGOのカスタマイズ
ナビドロワー　ボタン

Before

After

カスタマイズのこだわり部分

フラットなボタンを多く設置しました。特にホームへ戻るボタンは意外とよく使われるので、横長にしています。ボタンと見出しを区別するために、見出しの丸みを上だけにしています。

これね！このカスタマイズは意外と使ってくれてる人が多いんだ！

普段は隠れてる部分なのに、、やはりSANGOユーザーはカスタマイズ好きが多いな

この記事を見に行く

SANGOのカスタマイズ
ヘッダーお知らせ欄　雪

BEFORE

AFTER

Let’s GO

SANGOのカスタマイズ
タグ　シンプル

BEFORE

AFTER

Let’s GO

SANGOのカスタマイズ
シェアボタン　カラー

BEFORE

AFTER

Let’s GO

SANGOのカスタマイズ
表　カラー

BEFORE

AFTER

Let’s GO

SANGOのカスタマイズ
吹き出しの名前の位置

BEFORE

AFTER

Let’s GO

SANGOのカスタマイズ
目次 + 画像

BEFORE

AFTER

Let’s GO

SANGOのカスタマイズ
ヘッダーお知らせ欄 + 動く

BEFORE

AFTER

Let’s GO

SANGOのカスタマイズ
ヘッダーお知らせ欄 + ボタン

BEFORE

AFTER

Let’s GO

SANGOのカスタマイズ
メモボックス

BEFORE

AFTER

Let’s GO

SANGOのカスタマイズ
BOX29

BEFORE

AFTER

Let’s GO

SANGOのカスタマイズ
お問い合わせページ

スマホ

PC

Let’s GO

SANGOのカスタマイズ
目次＋アイコン

before

After

Let’s GO

SANGOのカスタマイズ
ボタン×変形

before

After

Let’s GO

SANGOのカスタマイズ
外部リンク×シンプル

before

After

Let’s GO

SANGOのカスタマイズ
ナビドロワーのSNSボタン

before

After

Let’s GO

SANGOのカスタマイズ
画像＋大きい背景

before

After

Let’s GO

SANGOのカスタマイズ
画像＋タイトル

before

After

Let’s GO

SANGOのカスタマイズ
画像×変形

before

After

Let’s GO

SANGOのカスタマイズ
画像＋アイコン

before

After

Let’s GO

SANGOのカスタマイズ
ボックス＋吹き出し

before

After

Let’s GO

SANGOのカスタマイズ
箇条書き×シンプル

before

After

Let’s GO

SANGOのカスタマイズ
記事一覧×リスト

before

After

Let’s GO

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

before

After

Let’s GO

SANGOのカスタマイズ

Rinkerのカスタマイズ２

before

After

After

Let’s GO

SANGOのカスタマイズ
上部の固定見出し

before

After

Let’s GO

SANGOのカスタマイズ
オリジナルボタン

こんなのや

こんなの

Let’s GO

SANGOのカスタマイズ
おすすめ記事＋更新マーク

before

after

Let’s GO

SANGOのカスタマイズ
関連記事の横長

before

after

Let’s GO

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

before

after

Let’s GO

SANGOのカスタマイズ
マイクロコピー＋ボタン

before

after

Let’s GO

SANGOのカスタマイズ
サイト内検索欄

before

after

Let’s GO

SANGOのカスタマイズ
目次×シンプル

before

after

Let’s GO

SANGOのカスタマイズ
SNSボタンを２列にする

before

after

Let’s GO

SANGOのカスタマイズ
記事カード＋余白

before

after

Let’s GO

SANGOのカスタマイズ
ボタンの上＋文字

before

after

Let’s GO

SANGOのカスタマイズ
Rinker×シンプル

before

after

Let’s GO

SANGOのカスタマイズ
関連記事タイトル＋画像

before

after

Let’s GO

SANGOのカスタマイズ
表×スタイリッシュ

before

after

Let’s GO

SANGOのカスタマイズ
ナビドロワー＋背景画像

before

after

Let’s GO

SANGOのカスタマイズ
サイドバー目次×追尾

before

after

Let’s GO

SANGOのカスタマイズ
更新マーク＋丸い背景

before

after

Let’s GO

SANGOのカスタマイズ
ボックスデザイン×付箋

before

なし

after

メモ

て

注意

へ

POINT

ぺ

TOPIC

ろ

Let’s GO

SANGOのカスタマイズ
画像のキャプション

before

after

Let’s GO

SANGOのカスタマイズ
フォローボックス×カラー

Let’s GO

SANGOのカスタマイズ
画像×ふわっと

Let’s GO

SANGOのカスタマイズ
右側に吹き出しをつける

Let’s GO

SANGOのカスタマイズ
サイドバーのアイコン

Let’s GO