【Cocoon】manablogのフォントなどを再現する方法

manablogの真似をしたい

このような要望に答えてきます。

この記事を書いている私も「manablogすごい見やすいな〜」と思い、いろいろ分析してみました。今回はフォントの種類やサイズなどについてまとめたのでぜひご覧ください。設定方法も紹介してきます〜。

本記事で紹介する事

manablogのフォントの種類は？

manablogのフォントは「Noto Sans JP」です。あらかじめCocoonに入っているフォントなので、簡単に設定することができます。

「Cocoon設定 > 全体 > サイトフォント」から「Noto Sans JP」を選ぶことで設定できます。

フォントサイズは17pxですね。

「Cocoon設定 > 全体 > 文字サイズ」から「17px」を選ぶことで設定できます。

はっきりは分からなかったのですが、400だと思います。

「Cocoon設定 > 全体 > 文字の太さ」から「400」を選ぶことで設定できます。

フォントの色は「#333333」です。

「Cocoon設定 > 全体 > 文字色」の「色を選択」から「#333333」を設定してください。

＊この方法で色が変わらない時があります…。原因が不明で直し方も分からないのですが、応急処置として記事のエディタの文字色を「#333333」に変更してもらえれば、その記事だけこの色に設定することができます。わかり次第追記しますね。

以上、manablogを再現する方法でした！

manablogのテーマを購入するのが一番ですが、テーマにお金をかけたくない人は真似していきましょう笑完全に再現することはできませんが、フォントくらいなら真似できます。

フォント色の指定方法とmanablogの余白が分からないので、わかり次第追記します。

それではブログ頑張っていきましょう〜。