【応用編2】twinvite使い方講座

こんにちは、ちゃんみくです。
さて、今回は前回貼ったコードから編集箇所を解説していきます。
前回の記事はこちら↓

①前回のコードからコピペする範囲

ここからはテキストエディタやコードエディタでバックアップしながら作業してね。

<!-- ここからコピペ -->
〜〜〜中略〜〜〜
<!-- ここまでコピペ -->

まずは、上記のようにコメントアウトしてある部分の中身をそのままコピーペーストします。

<!-- !!ここから!! -->
</head>
<body>
<div class="container">
<!-- !!ここまで消す!! --> 

そして、この部分だけ削除してください。

次からは、ご自分のイベント用に差し替えしていく場所を何回かに分けて解説していきます。

②差し替えする場所その1【webフォント編】

<!-- webフォント -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&amp;display=swap" rel="stylesheet">

こんな部分がコード中にあると思います。
まずはここを使いたいwebフォントに差し替えていきます。
これは実はやらなくてもいいんですが、twvtページの見栄えを独自のデザインにしたいなど、差別化を図りたい場合にオススメです。

■webフォントとは
PCなどにインストールせず、webページ上で使えるフォントになります。
一般的にはGoogleが提供しているGoogle Fontsからフォントを選んで使っていきます。→Google Fontsはこちら

まずは上記のGoogle Fontsにアクセスします。

スクリーンショット 2019-11-16 1.30.42

こんなページが開きます。英語のページですが直感的で使いやすいので、気にせず。大丈夫です、少しずつ解説します。

まずは、Type somethingと書いてある場所に、文字を打ち込みます。

スクリーンショット-2019-11-16-1.34.12

文字は英数字なら何でも大丈夫です。EVENTでもTIME TABLEでも。

ちなみに日本語フォントはちょっと独特なので、後述します。

フォントがいっぱい並んでると思うので、どれでも好きなフォントを見つけてみてください。
気に入ったのがあったら、そのフォントをクリック。
そうすると指定したフォントの個別ページに飛ぶので、右上のSELECT THIS FONTという部分をクリックします。

スクリーンショット 2019-11-16 1.42.57

今回私はMonotonというフォントが気に入ったので、これを使っていきます。

SELECT THIS FONTを押すと、何やら右下にFamily Selectedと書いてあるバーみたいなのが出てきます。そしてそこをまたクリック。

スクリーンショット 2019-11-16 1.47.54

すると右下にこんな画面が開きます。
そして、まずはEmbed Fontと書いてある部分のコードをコピー(グレーの部分)
そして、この項の一番上に貼ったコードの部分の書き換えをします。

<!-- webフォント -->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&amp;display=swap" rel="stylesheet">

ここを

<!-- webフォント -->
<link href="https://fonts.googleapis.com/css?family=Monoton&display=swap" rel="stylesheet">

こんな感じに。これでまずはページにwebフォントが読み込まれる状態に持っていけました。
ただ、このままではページ上の文字に反映されないので、もう1箇所書き換えていきます。

h1,h2{
  color: #000;
  font-family: 'Ubuntu', sans-serif; /* ここを書き換える */
  font-weight: 700;
}

.section-title{
  text-align: center;
  position: relative;
  color: #000;
  font-family: 'Ubuntu', sans-serif; /* ここを書き換える */
  font-weight: 700;
  font-size: 30px;
  padding: 0;
}

こんな部分を見つけてあげてください。
(font-family という単語で、検索(ctrl+F or cmd+F)してあげるとすぐ見つかると思います。)
そして、先ほどのページのSpecify in CSSという部分のコードをコピーします。わたしの場合は font-family: 'Monoton', cursive;ですね。
そして、コードを書き換えます。

h1,h2{
  color: #000;
  font-family: 'Monoton', cursive; /* ここを書き換える */
  font-weight: normal; /* ここは太文字にしたければbold 普通にしたければnormalなど入れてね */
}

.section-title{
  text-align: center;
  position: relative;
  color: #000;
  font-family: 'Monoton', cursive; /* ここを書き換える */
  font-weight: normal; /* ここは太文字にしたければbold 普通にしたければnormalなど入れてね */
  font-size: 30px;
  padding: 0;
}

はい、こうなります。
これで、twvtページのフォントが変わります。参考画像↓

スクリーンショット 2019-11-16 2.22.45

すごい。
これ最初に見つけたときはテンション上がりましたw
twvtの製作者さまには感謝感謝です。

②書き換えする場所【webフォント番外編】

先程日本語フォントは独特と書きましたが、日本語は文字数が漢字・ひらがな・カタカナととにかく多い関係で、実はまだあまりwebフォントがありません。
でも、数は少ないですがあるにはあるのでそれをご紹介します。

まずは、こちらのページにアクセス。→Google Fonts + 日本語

そうすると現在使える日本語webフォントが出てきます。
表示されてない箇所(漢字・ひらがな・カタカタ)がある場合は、そのフォントはその部分の文字には対応してませんです。

やることはさっきっと基本一緒なので、編集する場所を解説します。

<!-- webフォント -->
<link href="https://fonts.googleapis.com/earlyaccess/nicomoji.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Monoton&display=swap" rel="stylesheet">​

さっきのコードに、使いたいフォントのコードをコピペしてみました。
今回はニコモジを使います。かわいいですね。

ページ全部をこのフォントにしたいときはさっきと同じ要領でfont-familyを書き換えればいいんですが…
ありますよね、イベントタイトルは日本語なんだけどページのセクションタイトルは英語にしたいとか。
その場合は下記のように書き換えます。

h1{
  color: #000;
  font-family: "Nico Moji";
}
h2{
  color: #000;
  font-family: 'Monoton', cursive;
  font-weight: normal;
}

.section-title{
  text-align: center;
  position: relative;
  color: #000;
  font-family: 'Monoton', cursive;
  font-weight: normal;
  font-size: 30px;
  padding: 0;
}

そうすると、下記のように変わります。(日本語タイトルに一時的にしています)

スクリーンショット 2019-11-16 2.26.55

わっほい!!!!!
変わりましたね。かわいい。

ちなみに全部このフォントにしたい時は番外編でやったコード書き換えはせず、手順1の方のやり方で編集してね。

と、webフォントに関してはこんな感じです。

長くなってしまったので、他の編集箇所に関しては応用編3以降で書こうと思います。

以上、ちゃんみくでした〜

この記事が気に入ったらサポートをしてみませんか?