Return to site

Webフォントを使おう!

strikinglyでWebフォントを指定する方法をご紹介します。

· フォント,PRO,Strikingly活用ブログ

前回のブログに引き続き、今回もフォントの指定についてご紹介します。

前回お話したとおり、現状では日本語フォントの指定が難しいです。

そこで利用するのが、Googleフォントやモリサワから提供されているWebフォントです。

Webフォントをご利用頂くことで様々なフォントを指定することが可能ですが、今回ご紹介する方法はStrikinglyのPROをご利用頂いている必要がありますので、ご注意ください。

Googleフォントの指定

Webフォントの中でも今回は無料で利用できるGoogleフォントの指定方法をご紹介します。

前回のブログでも記載しましたが、英字フォントであればStrikignlyのPRO版では簡単に選択することが可能ですが、現時点では日本語フォントを選ぶことができない状況です。

そこで、フォント選択からではない方法でフォントを指定します。

まずは上記のGoogle Fontsの日本語フォントが紹介されているページにアクセスしてください。

まずは使いたいフォントを選びましょう。そして該当フォントが紹介されている箇所まで移動し、上の画面のように赤枠と青枠部分がありますので、それをコピーします。

赤枠部分には、フォントの読み込みが記述されています。

青枠部分には、CSSによるフォントの指定方法が記述されています。

CSSというのは、Cascading Style Sheetsの略で、Webサイトのデザインを指定しているファイルで、通常Webサイトは、Webサイトの構成を記述したHTMLファイルと、デザイン(スタイル)を記述したCSSファイルを基本としています。(※CSSは別ファイルにせずに、HTMLファイル内に記述することもできます。)その他にWebサイト上の動きの制御などを記述するJavaScriptや画像ファイルなども必要です。

Strikinglyの編集画面を開き、設定ボタンを押します。

設定ウィンドウが開いたら、左メニューから「カスタムコード」を選択してください。

カスタムコードは、Strikinglyで作成したページのヘッダーもしくはフッターにオリジナルのソースコードを追記することができる機能です。

今回は、ヘッダーにコードを追加します。

上の画面のように、まずは赤枠に記述されていたフォントの読み込みのソースコードを記述します。

今回は変化がわかりやすいため、ニクキュウというフォントを指定してみます。

 

<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />

 

そして今度は青枠の部分ですが、そのままペーストしても利用できません。

まずはCSSをヘッダーに記述する場合は、どこからどこまでがCSSの記述をわかるようにしなければなりませんので、下記のような記述を書いてください。

 

<style type="text/css">

<!--

※ここにCSSを記述します。

-->

</style>

 

そして、「※ここにCSSを記述します。」と書かれた箇所に、青枠の部分を書くのですが、前回のブログでもご紹介しましたが、Strikinglyの場合は、タイトルフォント、見出しフォント、本文フォントの3種類で構成されています。

3種類のうち、どの部分に適応するか選択しましょう。

まずは青枠のCSSの記述を見てみましょう。

.wf-nikukyu { font-family: "Nikukyu"; }

カッコに囲われたfont-family: "Nikukyu";の部分がフォントの指定が記載された箇所です。

そして冒頭.wf-nikukyuは、どの部分にこのCSSを適応するかの指定となっています。

では、タイトルフォント部分を指定するにはどのように記述したら良いでしょうか?

.s-variation-default .s-title:lang(ja), .s-variation-rustic .s-title:lang(ja), .s-variation-ice .s-title:lang(ja)

タイトルフォントを指定するには、上記の記述を書いてください。

フォント指定まで含めて書くと、下記のようになります。

.s-variation-default .s-title:lang(ja), .s-variation-rustic .s-title:lang(ja), .s-variation-ice .s-title:lang(ja){
font-family: "Nikukyu";
}

では、上記の指定をCSSの記述エリアに入れましょう。

入力が終わったら、「保存」ボタンを押してから設定ウィンドウを閉じましょう。

最終的に「公開」ボタンを押さないと、公開されているWebサイトには反映されません。

公開前に反映されているか確認するには、「プレビュー」から確認します。

無事、フォントが変わりました。

今度は見出しフォントと本文フォントを変更したいと思います。

私が指定したニクキュウフォントは、漢字対応していないため、他のフォントを指定してみます。

では、見出しフォントにはさわらびゴシック、本文フォントにはRounded M+ 1cを指定したいと思います。

指定してみると、上記のようになりました。

全体のソースコードは下記の通りです。

まずは最初の3行がフォントの読み込みになります。各3つのフォントを読み込んでいます。


<link href="https://fonts.googleapis.com/earlyaccess/nikukyu.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/sawarabigothic.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/earlyaccess/roundedmplus1c.css" rel="stylesheet" />
<style type="text/css">
<!--
.s-variation-default .s-title:lang(ja), .s-variation-rustic .s-title:lang(ja), .s-variation-ice .s-title:lang(ja){
font-family: "Nikukyu";
}
.s-variation-default .s-subtitle:lang(ja), .s-variation-rustic .s-subtitle:lang(ja), .s-variation-ice .s-subtitle:lang(ja),.s-variation-default .s-item-title:lang(ja), .s-variation-rustic .s-item-title:lang(ja), .s-variation-ice .s-item-title:lang(ja) {
font-family: "Sawarabi Gothic";
}
.s-variation-default:lang(ja), .s-variation-rustic:lang(ja), .s-variation-ice:lang(ja){
font-family: "Rounded Mplus 1c";
}
-->
</style>

見出しフォント部分の指定は、

.s-variation-default .s-subtitle:lang(ja), .s-variation-rustic .s-subtitle:lang(ja), .s-variation-ice .s-subtitle:lang(ja),.s-variation-default .s-item-title:lang(ja), .s-variation-rustic .s-item-title:lang(ja), .s-variation-ice .s-item-title:lang(ja)

本文部分の指定は、

.s-variation-default:lang(ja), .s-variation-rustic:lang(ja), .s-variation-ice:lang(ja)

元々Strikingly側で指定されたフォントを上書きして指定しています。

Googleフォント以外にもWebフォントであれば指定可能だと思いますので、色々と試して見て頂ければと思います。

※掲載の内容は、記事公開時点のものです。紹介されているサービス内容は変更される場合がありますので、ご利用の際は事前にサービス提供元等にご確認ください。

All Posts
×

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OKSubscriptions powered by Strikingly