独自レイアウトでモリサワフォントを使用するためのWebフォントのCSS設定方法

Jimdoの有料版から日本語フォントのトップメーカーである株式会社モリサワのフォントを使用することができますが、独自レイアウト、旧レイアウト(2014年8月以前にJimdoに登録された方が使用できる)、使用できるのは、見出し部分のみです。

せっかくモリサワのフォントを使用できるのに、もったいないですよね。

今回はCSSを使用して、本文などにもフォントを使用できる設定方法をご紹介します。

今回はCSSという専門知識を必要としますがコピーペーストで使用できる部分がほとんどですので「CSSなんてまったくわからない」という方もぜひお試しください。

※今回ご紹介する内容はJimdoの有料版をご契約中の方を対象としています

使用できるモリサワフォントの種類

JimdoPro:15書体

JimdoBusiness:176書体

WebフォントをCSSで設定

CSSが得意の方は下記のコードを参考にカスタマイズしていただけますと幸いです。

セレクタ { font-family: "フォント名※英字","typesquare" }

typesquareという指定は、株式会社モリサワが提供するインターネットを介してフォントを読み込むのに必要なものです。

CSSが苦手、初めての方は下記のコードを使用して、すこし手を加えるだけで、見出し以外の全般のフォントを変更できます。

「フォント名※英字」の部分を後述のフォント名に書き換えてご利用ください。

p,li,td, figcaption { font-family: "フォント名※英字","typesquare" !important }

「p」や「li」などは、フォントを変更するテキストの種類を指定しています。

  • p … 「文章」「写真付き文章」項目などで挿入したテキスト全般
  • li …「番号なしリスト」設定などリスト形式のテキスト
  • td …「表」項目で挿入したテキスト
  • figcaption …「写真」項目などで指定したキャプションのテキスト

※不必要な指定は削除してください

CSSをホームページに適用する方法

独自レイアウトをご利用中の方は「レイアウト」メニューの「独自レイアウト」から「CSS」を選択してください。入力欄のお好きな部分にCSSを追記して適用できます。

旧レイアウトをご利用の方は「設定」メニューの「ヘッダー部分を編集」を選択してください。入力欄のお好きな箇所に下記のように追加して適用できます。

<style>
p,li,td, figcaption { font-family: "フォント名※英字","typesquare" !important }
</style>

フォント名

Jimdo Proで使用できるフォント

フォント名 CSSで指定するフォント名
じゅん 201 Jun 201
ゴシックMB101 L Gothic MB101 Light
ナウ-MM NOW-MM
ナウ-GM NOW-GM
フォーク R Folk Regular
リュウミン R-KL Ryumin Regular KL
新丸ゴ R Shin Maru Go Regular
見出ゴMB31 Midashi Go MB31
見出ミンMA31 Midashi Min MA31
正楷書CB1 Sei Kaisho CB1
丸フォーク R Maru Folk Regular
太ゴB101 Futo Go B101
太ミンA101 Futo Min A101
教科書ICA R Kyoukasho ICA Regular
新ゴ R Shin Go Regular

Jimdo Businessで使用できるフォント

フォント名(日本語) フォント名(英字)
リュウミン L-KL Ryumin Light KL
リュウミン R-KL Ryumin Regular KL
リュウミン B-KL Ryumin Bold KL
黎ミン L Reimin Light
黎ミン R Reimin Regular
黎ミン B Reimin Bold
太ミンA101 Futo Min A101
見出ミンMA1 Midashi Min MA1
見出ミンMA31 Midashi Min MA31
秀英明朝 L Shuei Mincho L
秀英明朝 M Shuei Mincho M
秀英明朝 B Shuei Mincho B
秀英初号明朝 Shuei ShogoMincho
秀英初号明朝 撰 Shuei ShogoMincho Sen
秀英横太明朝 M Shuei Yokobuto Min M
秀英横太明朝 B Shuei Yokobuto Min B
凸版文久明朝 R Toppan Bunkyu Mincho R
光朝 Kocho
font-family: A1明朝 A1 Mincho
リュウミン L-KL JIS2004 Ryumin Light KL JIS2004
リュウミン R-KL JIS2004 Ryumin Regular KL JIS2004
リュウミン B-KL JIS2004 Ryumin Bold KL JIS2004
黎ミン L JIS2004 Reimin Light JIS2004
黎ミン R JIS2004 Reimin Regular JIS2004
黎ミン B JIS2004 Reimin Bold JIS2004
新ゴ L Shin Go Light
新ゴ R Shin Go Regular
新ゴ B Shin Go Bold
ゴシックMB101 L Gothic MB101 Light
ゴシックMB101 R Gothic MB101 Regular
ゴシックMB101 B Gothic MB101 Bold
中ゴシックBBB Gothic Medium BBB
太ゴB101 Futo Go B101
見出ゴMB1 Midashi Go MB1
見出ゴMB31 Midashi Go MB31
秀英角ゴシック金 L Shuei KakuGo Kin L
秀英角ゴシック金 B Shuei KakuGo Kin B
秀英角ゴシック銀 L Shuei KakuGo Gin L
秀英角ゴシック銀 B Shuei KakuGo Gin B
じゅん 101 Jun 101
じゅん 201 Jun 201
じゅん 34 Jun 34
新丸ゴ L Shin Maru Go Light
新丸ゴ R Shin Maru Go Regular
新丸ゴ B Shin Maru Go Bold
ソフトゴシック L Soft Gothic Light
ソフトゴシック R Soft Gothic Regular
ソフトゴシック B Soft Gothic Bold
秀英丸ゴシック L Shuei MaruGo L
秀英丸ゴシック B Shuei MaruGo B
フォーク R Folk Regular
フォーク M Folk Medium
フォーク B Folk Bold
丸フォーク R Maru Folk Regular
丸フォーク M Maru Folk Medium
丸フォーク B Maru Folk Bold
カクミン R Kakumin Regular
カクミン M Kakumin Medium
カクミン B Kakumin Bold
解ミン 宙 R Kaimin Sora Regular
解ミン 宙 M Kaimin Sora Medium
解ミン 宙 B Kaimin Sora Bold
解ミン 月 R Kaimin Tsuki Regular
解ミン 月 M Kaimin Tsuki Medium
解ミン 月 B Kaimin Tsuki Bold
モアリア R Moaria Regular
モアリア B Moaria Bold
シネマレター Cinema Letter
トーキング Talking
タカモダン Takamodern
竹 L Take Light
竹 M Take Medium
竹 B Take Bold
トンネル 細線 Tunnel Tightline
トンネル 太線 Tunnel Wideline
明石 Akashi
徐明 Jomin
那欽 Nachin
くもやじ Kumoyaji
ハルクラフト Harucraft
プリティー桃 Pretty Momo
はるひ学園 Haruhi Gakuen
すずむし Suzumushi
新ゴ シャドウ Shin Go Shadow
新ゴ エンボス Shin Go Emboss
新ゴ ライン Shin Go Line
新丸ゴ シャドウ Shin Maru Go Shadow
新丸ゴ エンボス Shin Maru Go Emboss
新丸ゴ ライン Shin Maru Go Line
正楷書CB1 Sei Kaisho CB1
新正楷書CBSK1 Shinsei Kaisho CBSK1
欧体楷書 Outai Kaisho
楷書MCBK1 Kaisho MCBK1
教科書ICA L Kyoukasho ICA Lig
教科書ICA R Kyoukasho ICA Regular
教科書ICA M Kyoukasho ICA Medium
角新行書 L Kakushin Gyousho Light
角新行書 M Kakushin Gyousho Medium
隷書E1 Reisho E1
隷書101 Reisho 101
陸隷 Likurei
勘亭流 Kanteiryu
ひげ文字 Higemoji

UD黎ミン L

UD Reimin Light
UD黎ミン R UD Reimin Regular
UD黎ミン B UD Reimin Bold
UD新ゴ L UD Shin Go Light
UD新ゴ R UD Shin Go Regular
 UD新ゴ B UD Shin Go Bold
UD新丸ゴ L UD Shin Maru Go Light
UD新丸ゴ R UD Shin Maru Go Regular
UD新丸ゴ B UD Shin Maru Go Bold
UD新ゴ コンデンス90 L UD Shin Go Conde90 L
UD新ゴ コンデンス90 R UD Shin Go Conde90 R
UD新ゴ コンデンス80 L UD Shin Go Conde80 L
UD新ゴ コンデンス80 R UD Shin Go Conde80 R
UD新ゴ コンデンス70 L UD Shin Go Conde70 L
UD新ゴ コンデンス70 R UD Shin Go Conde70 R
UD新ゴ コンデンス60 L UD Shin Go Conde60 L
UD新ゴ コンデンス60 R UD Shin Go Conde60 R
UD新ゴ コンデンス50 L UD Shin Go Conde50 L
UD新ゴ コンデンス50 R UD Shin Go Conde50 R
学参 常改リュウミン L-KL GJ Ryumin Light KL
学参 常改リュウミン R-KL GJ Ryumin Regular KL
学参 常改リュウミン B-KL GJ Ryumin Bold KL
学参 常改新ゴ L GJ Shin Go Light
学参 常改新ゴ R GJ Shin Go Regular
学参 常改新ゴ B GJ Shin Go Bold
学参 常改中ゴシックBBB GJ Gothic Medium BBB
学参 常改太ゴB101 GJ Futo Go B101
学参 常改じゅん 34 GJ Jun 34
学参 常改じゅん 501 GJ Jun 501
学参 常改新丸ゴ L GJ Shin Maru Go Light
学参 常改新丸ゴ R GJ Shin Maru Go Regular
学参 常改新丸ゴ B GJ Shin Maru Go Bold
学参 常改教科書ICA L GJ Kyoukasho ICA Light
学参 常改教科書ICA R GJ Kyoukasho ICA Regular
ヒラギノ明朝 W3 JIS2004 Hiragino Mincho W3 JIS2004
ヒラギノ明朝 W6 JIS2004 Hiragino Mincho W6 JIS2004
ヒラギノ角ゴ W3 JIS2004 Hiragino Kaku Gothic W3 JIS2004
ヒラギノ角ゴ W6 JIS2004 Hiragino Kaku Gothic W6 JIS2004
ヒラギノ丸ゴ W4 JIS2004 Hiragino Maru Gothic W4 JIS2004
ナウ-MM NOW-MM
ナウ-MB NOW-MB
ナウ-GM NOW-GM
ナウ-GB  NOW-GB
font-family: G2サンセリフ-B GSanSerif-B
font-family: G2サンセリフ-U GSanSerif-U
ぶらっしゅ Brush-U
ぽっくる Pokkru-B
篠-M Shino-M
篠-B Shino-B
羽衣-M Hagoromo-M
羽衣-B Hagoromo-B
font-family: TB古印体 Kointai-M
日活正楷書体 NikkatsuSeiKai-L
花胡蝶-L HanaKocho-Lt
花胡蝶-M HanaKocho-Md
花胡蝶-B HanaKocho-Bd
花蓮華-L HanaRenge-Lt
花蓮華-M HanaRenge-Md
花牡丹-DB HanaBotan-DB
font-family: TBUDゴシック SL TBUDGothic SL
font-family: TBUDゴシック R TBUDGothic R
font-family: TBUDゴシック B TBUDGothic B
font-family: TBUD丸ゴシック SL TBUDRGothic SL
font-family: TBUD丸ゴシック R TBUDRGothic R
font-family: TBUD丸ゴシック B TBUDRGothic B
font-family: TBUD明朝 M TBUDMincho M
font-family: TBUD明朝 H TBUDMincho H
font-family: UDタイポス58 UDTypos58
font-family: UDタイポス510 UDTypos510