【SANGOカスタマイズ総まとめ】サイトをもっと魅力的に！

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

本記事を参考にすれば、コピペするだけで他よりも一段おしゃれなサイトに仕上げることができます。

SANGOのカスタマイズまとめ

内部リンクに「続きを読む」を入れる

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

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

【SANGO】内部リンクに「続きを読む」を入れるカスタマイズ

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

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

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

【SANGO】外部リンクを可愛くカスタマイズする方法を解説

目次のデザインをスタイリッシュにする

記事内の目次のカスタマイズになります。
【SANGO】目次のデザインをよりお洒落にするカスタマイズ方法 各見出し前にアイコンを付け直感的に分かりやすくし、全体の幅を狭くしてスッキリさせました。

吹き出しの色と枠線を変更する

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

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

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

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

カテゴリメニューのカスタマイズ

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

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

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

【SANGO】カテゴリー一覧をオシャレにカスタマイズする方法

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

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

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

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

引用のデザインのカスタマイズ

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

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

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

記事下のシェアボタンを浮き上がらせる

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

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

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

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

【SANGO】シェアボタンを浮き上がらせるカスタマイズ方法

記事下の関連記事のタイトルを可愛くする

こちら記事(コンテンツ)下に表示される関連記事の見出しのカスタマイズになります。

吹き出し型と前にアイコンを入れるものの2バージョン作ってみました。

アイコンverの方はテーマ「JIN」のものに寄せてみたものです。
【SANGO】記事下の関連記事のタイトルをカスタマイズする方法

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

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

.footer-meta {
  display: none;
}

SANGOを高速化するために行ったこと8選

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

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

【スコア90点越え】SANGOを高速化するためのカスタマイズ9選

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

ショートコードで作れるレーダーチャート

もちろん各項目やスコアの指定もパラメーターを変えることで行うことができ、プラグインなどを使わずコピペでできるものなので初心者の方にもおすすめです。
WordPressでおしゃれなレーダーチャートを作成する方法【プラグイン・ライブラリ不要】

ショートコードで呼び出せるモーダルウィンドウ

ショートコードで囲むだけでお手軽に使用できるモーダルウィンドウです。ボタンまたはモーダル外の押下で表示・非表示を切り替えられます。

記事内に書く(表示する)ほどではないけど、読者にとって有益になりそうな補足をしたい場合などにおすすめです。

CSSのみで実装する自作モーダルウィンドウ【WordPress・レスポンシブ対応】

もしもの「かんたんリンク」のカスタマイズ

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

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

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

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

埋め込みツイートのいいね数と日付を非表示にする

before

after

埋め込みツイートの下部のいいね数や日付などを非表示にするカスタマイズです。

その他幅なども調整したのでスマホから見てもいい感じになります。可愛い。

【WordPress】埋め込みツイートをコンパクトにするカスタマイズ方法

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

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

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

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

まとめ

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