\このブログが役に立ったら/
SWELLをJINみたいに可愛くしてみた
![SWELLをJINみたいに可愛くしてみた](https://misaki-web.com/wp-content/uploads/2021/07/swell-to-jin-img.png)
最近はSWELLユーザーが増えてきましたが、まだまだJINユーザーが圧倒的に多いと感じます。
個人的にはSWELL推しだけど、JINの可愛さも捨てがたいしどっちも好きなので、SWELLをJINみたいに可愛くして良いとこ取りして遊んでみました。
グローバルメニューのホバーとか、プロフィールウィジェットのSNSリンクの上に「\Follow Me/」が付いてないとか、まだまだ改善したい点はあるのですが一旦公開。
※JINのデモサイト1のデザインを参考にしています。
カスタマイズ後
![SWELLをJINみたいに可愛くしてみたafter画像](https://misaki-web.com/wp-content/uploads/2021/02/screencapture-misaki-web-swell-demo-2021-07-17-16_49_34-2-530x1024.png)
カスタマイズ前
![SWELLをJINみたいに可愛くしてみたbefore画像](https://misaki-web.com/wp-content/uploads/2021/02/screencapture-misaki-web-swell-demo-2021-07-17-14_13_08-2-569x1024.png)
SWELLをJINぽくカスタマイズするポイント
フォント・文字間隔・余白です。この3つをいじるだけでも、かなりJINの可愛さに近づけるかなと思います。(私調べ)
- フォント→M PLUS Rounded 1c
- 文字間隔→1px
- 余白→多め
あとは角にほんの少し丸みをつけて柔らかい感じにしました。
ヘッダー
SWELLデフォルト
![](https://misaki-web.com/wp-content/uploads/2021/02/ef694591030c0b3311d73d958f67acc2.jpg)
カスタマイズ後
![](https://misaki-web.com/wp-content/uploads/2021/02/d3430d16fef5082e9f86b9abd9cfffce.jpg)
ヘッダーバーのSNSアイコンを少し大きく・余白多めにしました。
/* SNSアイコンの大きさ */
.u-fz-14 {
font-size: 18px;
}
グローバルメニューのホバーを変えたらもっと近くなりますね。とりあえず、カーソルを乗せた時に色が変わるようにしておきました。
![](https://misaki-web.com/wp-content/uploads/2021/01/c077ea829cba6945d1b643b89ced7e31-300x158.png)
プロフィールウィジェット
SWELLデフォルト
![](https://misaki-web.com/wp-content/uploads/2021/02/67eba913b57a5ed4801e8f0a2eab45c4.jpg)
カスタマイズ後
![](https://misaki-web.com/wp-content/uploads/2021/02/572671a5ae291f8745a1fecd4403393b.jpg)
上下左右の余白を多めにしたのと、文字間隔が広くなったので余裕があるように見えるようになったと思います。ほんの少しの差だけど、結構印象が変わりますよね。webデザインって奥が深い。デザイナーさんすごい。
JINのプロフィールボックスはSNSアイコンの背景色が印象的ですね。アクセントカラーが反映されるので、SNSと併用してブログを育てていくタイプの人には嬉しいポイント。上に「\Follow Me/」が付いてないので、いつか付けようかな…(多分…)
記事一覧部分
SWELLデフォルト
![](https://misaki-web.com/wp-content/uploads/2021/02/4421216920b569a97a7509e19a785fe1.jpg)
カスタマイズ後
![](https://misaki-web.com/wp-content/uploads/2021/02/664fb1e19aee09187fb164c139183ce7.jpg)
記事一つ一つに影をつけて角を取って、カテゴリーバッジを角から浮かせて丸くしました。
/* カテゴリーバッジの余白 */
.c-postThumb__cat {
margin: 8px;
border-radius: 15px;
padding: 1px 10px;
}
JINだとカテゴリーごとにバッジの色を変更できて便利ですよね。SWELLもカテゴリーIDごとにCSSを当てれば変更できます。
SWELLの標準機能で「角を丸くする」機能があるのですが、アイキャッチ・カテゴリーバッジの角の丸みを違う数値に設定したかったので、標準機能は使わずにCSSで指定しています。
あとは投稿日のフォントサイズ調節や右寄せなどなどの微調整。
ちょっとした感想
フォントを外部から読み込むと表示速度が遅くなりますし、せっかく早いSWELLの良さを消してしまう可能性ありなので、あまりおすすめしないカスタマイズですが、やっぱりJIN可愛い!ので、SEOをあまり気にしない趣味サイトには良いかもしれません。
余白や文字間隔の調節くらいであれば、速度に影響はないかなと思います。
すっぴんもいいけど、メイクしても可愛いのがSWELLではないでしょうか!(怒られそう)
お気軽にどうぞ!