くるみ
- SANGOだとデザイン被りがちだから差別化したい
- なんかいい感じのカスタマイズない?
という方に向けて当サイトで行ってきた「魅力的な(?)SANGOのカスタマイズ」をまとめました。
我ながらそれぞれ結構いい感じにカスタマイズできた気がしますので、是非参考にしていただければ幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
SANGOのカスタマイズまとめ
内部リンクに「続きを読む」を入れる
内部リンク(関連記事)のカスタマイズになります。
「あわせて読みたい」や「続きを読む」という文言を加える&影を加えることによって、読者の目を引きやすくしてみました。
【SANGO】内部リンクに「続きを読む」を入れるカスタマイズ外部リンクのデザインのカスタマイズ
外部リンクのカスタマイズになります。
アイコンを若葉にして可愛くし、かつ元のドロップシャドウが濃かったので薄くしてやんわりさせてみました。可愛くない?
ブログ主
【SANGO】外部リンクを可愛くカスタマイズする方法を解説目次のデザインをスタイリッシュにする
記事内の目次のカスタマイズになります。
各見出し前にアイコンを付け直感的に分かりやすくし、全体の幅を狭くしてスッキリさせました。
【SANGO】記事に溶け込む！目次のカスタマイズ方法を解説吹き出しの色と枠線を変更する
吹き出しのカスタマイズになります。
アイコン画像をぼんやり色付きの陰で囲み、吹き出し自体の枠を付けることでくっきりした可愛い感じに仕上げました。
もちろん色の調整も自由自在です。
【SANGO】吹き出しの色をカスタマイズしておしゃれにする方法カテゴリメニューのカスタマイズ
サイドバーのカテゴリーメニューのカスタマイズになります。
カテゴリーそれぞれにアイコンを付けて可愛くするだけでなく、投稿数を右寄せにし桁によって幅を変えることで数の大小を直感的に見えるようにしました。
ホバー時の動きもこのように変わります。
【SANGO】カテゴリー一覧をオシャレにカスタマイズする方法レビューボックスのカスタマイズ
ショートコードで挿入できるレビューボックスのカスタマイズになります。
タイトルを非表示にし幅を狭くし色も変え、さらに星の方も数字を消すだけでなく影をつけることでポップな感じにしました。
【SANGO】レビューボックスを立体的に可愛くするカスタマイズ引用のデザインのカスタマイズ
引用の囲みのカスタマイズになります。
鉤括弧でくくっているようなデザインにし、空白を適度に取ることで落ち着いた印象に仕上げました。
【SANGO】引用の囲みをおしゃれにカスタマイズする方法記事下のシェアボタンを浮き上がらせる
記事下のシェアボタンのカスタマイズになります。
ボタン自体を丸くし、スクロールに合わせて浮き上がってくるようにしてみました。
実際のスクロール時はこんな感じに動きます。
クリック率増加に繋がる…かは分かりませんが、結構目を引く感じにカスタマイズできたと思います。
【SANGO】シェアボタンを浮き上がらせるカスタマイズ方法記事下の関連記事のタイトルを可愛くする
こちら記事(コンテンツ)下に表示される関連記事の見出しのカスタマイズになります。
吹き出し型と前にアイコンを入れるものの2バージョン作ってみました。
アイコンverの方はテーマ「JIN」のものに寄せてみたものです。
【SANGO】記事下の関連記事のタイトルをカスタマイズする方法
記事下のカテゴリ表示を消す
記事下のシェアボタンの下にあるカテゴリー表示を消したい時は、以下の指定で消すことができます。
.footer-meta {
display: none;
}SANGOを高速化するために行ったこと8選
こちら見た目のカスタマイズではなく、SANGOを用いている我がサイトで行った「高速化のためのカスタマイズ」をまとめたものになります。
ちなみにその結果、サイトの速度スコアは40点代から80点代までに上がりました。どれも簡単に行えるお手軽なものなので参考にしてみてください。
【SANGO】サイトを高速化するために行ったカスタマイズ8選他のテーマでも使えるカスタマイズ
もしもの「かんたんリンク」のカスタマイズ
もしもアフィリエイトの「かんたんリンク」のカスタマイズになります。
こちらの「かんたんリンク」はデフォルトだとスマホで見ると縦長になってしまうので、横長(2列)になるように仕上げました。
くるみ
もちろんPCから見た際のデザインもいい感じになりますよ。
もしもの「かんたんリンク」をスマホでも横長(2列)にするカスタマイズ方法埋め込みツイートのいいね数と日付を非表示にする
埋め込みツイートの下部のいいね数や日付などを非表示にするカスタマイズです。
その他幅なども調整したのでスマホから見てもいい感じになります。可愛い。
【WordPress】埋め込みツイートをコンパクトにするカスタマイズ方法プラグイン無しで蛍光マーカーを動かす
このように文字にマーカーが引かれます
マーカーを細くすることも出来ます
もちろん色を変えることも出来ます
こんな感じでスクロールした際にマーカーが引かれるようなアニメーションを挿入できます。
しかし正直これだけだとスクロールに合わせてマーカーが引かれるかイマイチ分かりにくいと思うので、その辺りは用意したデモページを参考にしてみてください。
【プラグイン不要】WordPressで蛍光マーカーを動かす方法まとめ
以上、「魅力的な(?)SANGOのカスタマイズ集」でした。他のテーマのカスタマイズ記事も書いているのでもしよければ覗いてみてください。本記事がカスタマイズの際の参考になれば幸いです！では⸝⸝- ̫ -⸝⸝
プログラミング、楽しく学んでみない？
TechAcademy（テックアカデミー）
- 受講生に1人ずつ現役のプロのパーソナルメンターがつくので未経験でも安心
- オリジナルサービスやオリジナルアプリなどの開発までサポート
評価 おすすめポイント 自宅にいながらオンライン完結で勉強できる 最短4週間で未経験からプロを育てるオンライン完結のスクール。受講生に1人ずつ現役のプロのパーソナルメンターがつき、チャットで質問すればすぐに回答が返ってくるのでサポート体制も万全です。
ポテパンキャンプ
- 受講生の約90%が未経験者
- 専任のキャリアカウンセラーによる転職サポート
- 実践的な課題と現役エンジニア講師のレビューで高いスキルが身につく
評価 おすすめポイント 完全オンラインで働きながらでも受講できる これまでに1万名以上の転職支援実績をもつ株式会社ポテパンが運営するスクール。仕事をしながらでもオンラインで効率的な学習ができます。人気の「自社開発企業」に受講者ほぼ全員が就職していることや、圧倒的に安い受講料金も魅力です。
CodeCamp（コードキャンプ）
- レッスン満足度94.6%、現役エンジニアから実践的なスキルを学べる
- 就職/転職やキャリアについての相談も無料でできる
評価 おすすめポイント 実績No.1のオンライン・プログラミングスクール（受講者20,000名以上） オンラインで365日/7時〜24時まで、時間と場所を選ばずに自分のペースで学習でき、PCとネット環境があればすぐに学習が始められます。更に無料体験レッスンを受講すると受講料が1万円引に。
