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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[kjk_temp id=”7237″]

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

こんなのや

二文字背景丸①

こんなの

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

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

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

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

記事を見に行く

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

メリット

メリットボックス

デメリット

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

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

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

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

この記事を見に行く

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

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

Before

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

After

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

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

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

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

この記事を見に行く

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

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

シンプルver

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

色付きver

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

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

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

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

この記事を見に行く

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

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

こんなの

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

なし

なし

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

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

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

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

この記事を見に行く

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

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

Before

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

After

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

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

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

普段は隠れてる部分なのに、、やはり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