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

WordPress

manablogの真似をしたい

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

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

本記事で紹介する事

  • manablogのフォントの種類は?
  • manablogのフォントのサイズは?
  • manablogのフォントの太さは?
  • manablogのフォントの色は?

manablogのフォントの種類は?

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

設定方法

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

 

manablogのフォントのサイズは?

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

設定方法

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

 

manablogのフォントの太さは?

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

設定方法

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

 

manablogのフォントの色は?

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

設定方法

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

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

 

まとめ

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

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

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

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

タイトルとURLをコピーしました