...

【他と差をつける】SANGOの魅力的なカスタマイズまとめ

コピペでできるSANGOのカスタマイズまとめ

どうもおはようポテト(@ohayoupoteto22)です。

SANGOのカスタマイズ集、どっかに転がってないかな

ということで今回は

SANGOを使ってるサイトを可愛くしたい

SANGOだとデザイン被りがちだから差別化したい

という方に向けて当サイトで行ってきた「魅力的な(?)SANGOのカスタマイズ」をまとめました。

我ながら、それぞれ結構いい感じにカスタマイズできた気がします。

参考になれば幸いです⸝⸝- ̫ -⸝⸝

ブログ主

早速いってみよう!

SANGOの魅力的なカスタマイズまとめ

内部リンク

内部リンク(関連記事)のカスタマイズになります。

「あわせて読みたい」や「続きを読む」という文言を加える&影を加えることによって、読者の目を引きやすくしてみました。

SANGOの内部リンクのカスタマイズ方法【SANGO】内部リンクをおしゃれにカスタマイズする方法

外部リンク

SANGOの外部リンクのカスタマイズ

外部リンクのカスタマイズになります。

アイコンを若葉にして可愛くし、かつ元のドロップシャドウが濃かったので薄くしてやんわりさせてみました。可愛くない?

ブログ主

個人的にこれ一番気に入ってる
SANGOの外部リンクをカスタマイズする方法【SANGO】外部リンクを可愛くカスタマイズしてみた

目次

記事内の目次のカスタマイズになります。

各見出し前にアイコンを付け直感的に分かりやすくし、全体の幅を狭くしてスッキリさせました。

SANGOの目次のカスタマイズ方法【SANGO】目次をスッキリ見やすくするカスタマイズ方法

吹き出し

SANGOの吹き出しのカスタマイズ

吹き出しのカスタマイズになります。

アイコン画像をぼんやり色付きの陰で囲み、吹き出し自体の枠を付けることでくっきりした可愛い感じに仕上げました。

もちろん色の調整も自由自在です。

SANGOの吹き出しのカスタマイズ方法【SANGO】吹き出しの色をカスタマイズしておしゃれにする方法

カテゴリメニュー

サイドバーのカテゴリーメニューのカスタマイズになります。

カテゴリーそれぞれにアイコンを付けて可愛くするだけでなく、投稿数を右寄せにし桁によって幅を変えることで数の大小を直感的に見えるようにしました。

ホバー時の動きもこのように変わります。

SANGOのカテゴリーメニューのカスタマイズ方法【SANGO】カテゴリーメニューを可愛くカスタマイズする方法

レビューボックス

SANGOのレビューボックスのカスタマイズ

ショートコードで挿入できるレビューボックスのカスタマイズになります。

タイトルを非表示にし幅を狭くし色も変え、さらに星の方も数字を消すだけでなく影をつけることでポップな感じにしました。

SANGOのレビューボックスのカスタマイズ方法【SANGO】レビューボックスを立体的に可愛くするカスタマイズ

引用

SANGOの引用ボックスのカスタマイズ

引用の囲みのカスタマイズになります。

鉤括弧でくくっているようなデザインにし、空白を適度に取ることで落ち着いた印象に仕上げました。

SANGOの引用のカスタマイズ方法【SANGO】引用の囲みをおしゃれにカスタマイズする方法

記事下のシェアボタン

記事下のシェアボタンのカスタマイズになります。

ボタン自体を丸くし、スクロールに合わせて浮き上がってくるようにしてみました。

 

実際のスクロール時はこんな感じに動きます。

クリック率増加に繋がる…かは分かりませんが、結構目を引く感じにカスタマイズできたと思います。

SANGOの記事下のシェアボタンのカスタマイズ【SANGO】記事下のシェアボタンをスクロールした時に浮き上がらせるカスタマイズ

記事下のカテゴリ表示を消す

記事下のシェアボタンの下にあるカテゴリー表示を消したい時は、以下の指定で消すことができます。

.footer-meta {
  display: none;
}

SANGO高速化のためのカスタマイズ

SANGOを高速化するために行ったカスタマイズ

こちら見た目のカスタマイズではなく、SANGOを用いている我がサイトで行った「高速化のためのカスタマイズ」をまとめたものになります。

ちなみにその結果、サイトの速度スコアは40点代から80点代までに上がりました。どれも簡単に行えるお手軽なものなので参考にしてみてください。

SANGOを高速化するために行ったカスタマイズ【SANGO】サイトを高速化するために行ったカスタマイズ6選

他のテーマでも使えるカスタマイズ

もしもの「かんたんリンク」

もしもアフィリエイトの「かんたんリンク」のカスタマイズになります。

こちらの「かんたんリンク」はデフォルトだとスマホで見ると縦長になってしまうので、横長(2列)になるように仕上げました。

記事内にさりげなく設置できるね

ソロモン

もちろんPCから見た際のデザインもいい感じになりますよ。

もしもアフィリエイトの「かんたんリンク」のカスタマイズ方法もしもの「かんたんリンク」をスマホでも横長(2列)にするカスタマイズ方法

プラグイン無しで蛍光マーカーを動かす

このように文字にマーカーが引かれます

 

マーカーを細くすることも出来ます

 

もちろん色を変えることも出来ます

 

こんな感じでスクロールした際にマーカーが引かれるようなアニメーションを挿入できます。

しかし正直これだけだとスクロールに合わせてマーカーが引かれるかイマイチ分かりにくいと思うので、その辺りは用意したデモページを参考にしてみてください。

CSSを使って蛍光マーカーを動かす方法【プラグイン不要】WordPressで蛍光マーカーを動かす方法

まとめ

以上、「魅力的な(?)SANGOのカスタマイズ集」でした。

他のテーマのカスタマイズ記事も書いているのでもしよければ覗いてみてください。

本記事がカスタマイズの際の参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA