ようこそ、SANGOのカスタマイズまとめページへ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こんなのや

二文字背景丸①

こんなの

二文字背景丸②
カスタマイズのこだわり

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

MENくん

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

くま３号

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

記事を見に行く

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

メリット

メリットボックス

デメリット

デメリットボックス
カスタマイズのこだわり部分

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

MENくん

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

くま３号

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

この記事を見に行く

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

この画像には alt 属性が指定されておらず、ファイル名は sango-pankuzurisuto.png です

Before

この画像には alt 属性が指定されておらず、ファイル名は mobile-before.png です

After

この画像には alt 属性が指定されておらず、ファイル名は mobile-after.png です
カスタマイズのこだわり部分

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

MENくん

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

くま３号

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

この記事を見に行く

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

この画像には alt 属性が指定されておらず、ファイル名は mokujihego-fixed.png です

シンプルver

この画像には alt 属性が指定されておらず、ファイル名は mkj-1.jpg です

色付きver

この画像には alt 属性が指定されておらず、ファイル名は mkj-3.jpg です
カスタマイズのこだわり部分

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

MENくん

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

くま３号

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

この記事を見に行く

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

この画像には alt 属性が指定されておらず、ファイル名は 6de9e9c002e7a1a6010bdd21da9cab53.png です

こんなの

この画像には alt 属性が指定されておらず、ファイル名は mokujihego.png です

なし

なし

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

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

MENくん

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

くま３号

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

この記事を見に行く

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

ナビドロワー内部をカスタマイズ

Before

この画像には alt 属性が指定されておらず、ファイル名は snsnoyatu1.png です

After

この画像には alt 属性が指定されておらず、ファイル名は snsnoyatu2.png です
カスタマイズのこだわり部分

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

MENくん

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

くま３号

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

この記事を見に行く

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

BEFORE
変更前
AFTER
変更後

Let’s GO

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

カテゴリーとタグのデザインを変更する
BEFORE
カスタマイズ前（スマホ）
AFTER
カスタマイズ後（スマホ）

Let’s GO

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

SANGOの者絵ボタンに色をつけてみる
BEFORE
シェアボックスのカスタマイズ前
AFTER
シェアボックスのカスタマイズ後

Let’s GO

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

スタイリッシュな表
BEFORE
AFTER

Let’s GO

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

下に出る吹き出しをカスタマイズ
BEFORE
AFTER

Let’s GO

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

目次にさり気なく画像をプラスしてみた
BEFORE
before
AFTER
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
PC表示

Let’s GO

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

SANGOの目次のデザインを可愛くしてみた
before
After

Let’s GO

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

テキストエディタでボタンをいじってみた
before
After

Let’s GO

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

参考リンクのデザインをカスタマイズ
before
編集前
After
編集後

Let’s GO

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

ナビゲーションドロワーの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のカスタマイズ
記事一覧×リスト

TOPページの記事一覧カードをカスタマイズ
before
カスタマイズービフォー
After
カスタマイズーアフター

Let’s GO

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

モバイル用フッター固定メニューのカスタマイズ
before
カスタマイズ前
After
カスタマイズ後


Let’s GO

SANGOのカスタマイズ

Rinkerのカスタマイズ２

リンカーカスタマイズその２
before
rinker-カスタマイズ前スマホ
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
サイト内検索ー後-1

Let’s GO

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

目次をシンプルにカスタマイズする
before
目次カスタム前-2
after
目次カスタム後-2

Let’s GO

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

SNSボタンをカスタマイズしてみた
before
SNSボタンのカスタマイズ前
after
SNSボタンのカスタマイズ後

Let’s GO

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

before
変更前
after
記事カード変更後

Let’s GO

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

ボタンの上に文字をプラスする
before
after

Let’s GO

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

リンカーのデザインをカスタマイズ
before
rinker-カスタマイズ前
after
rinker-カスタマイズ後

Let’s GO

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

関連記事のタイトルに画像を挿入するカスタマイズ
before
カスタム前PC
after
カスタム後PC

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のカスタマイズ
フォローボックス×カラー

フォローボックスの色を変える

before

フォローボックス前

after

フォローボックス後

Let’s GO

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

画像をふわっと表示させる

before

after

Let’s GO

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

自分で吹き出しを作ってみる

before

after

Let’s GO

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

アイコンの変更と位置調整

before

after

Let’s GO