戻る

Rails5.0


民泊サイトの構築 Rails5.0

  (0)
2,000円

タスク2-8   Googleフォント

このタスクについて


タスクの内容を一部抜粋します。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてこのアプリケーションのフルコードをダウンロードすることが可能になります。




サイト

fonts.google.com


上記のサイトで選んだフォントをサイトに適用することができます。


今回は「Kosugi」というフォントを適用してみます。
https://fonts.google.com/specimen/Kosugi?subset=japanese


「select this style」をクリックします。


select this style



「Embed」をクリックし、表示されたリンクをコピーします。


リンクをコピー



コピーしたリンクを以下のファイルに貼り付けます。


記述追加 app\views\layouts\application.html.erb(9行目)
<link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet">



app\views\layouts\application.html.erb
 
<!DOCTYPE html> 
<html> 
  <head> 
    <title>Minpaku</title> 
    <%= csrf_meta_tags %> 
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <!-- googleフォント --> 
    <link href="https://fonts.googleapis.com/css2?family=Kosugi&display=swap" rel="stylesheet"> 
  </head> 
  <body> 
    <!-- _navbar.html.erb をレンダーする --> 
    <%= render 'shared/navbar' %> 
    <%= render 'shared/message' %> 
    <!-- ページをコンテナに格納 --> 
    <div class="container"> 
      <%= yield %> 
    </div> 
  </body> 
</html> 



スタイルシート記述変更
app\assets\stylesheets\application.scss(25行目)
 
 //基本の設定 
 body { 
    color: #565a5c; 
    background-color: #F8F8F8; 
    font-family: "Kosugi", sans-serif; 
  } 






この続きはプロジェクトを購入していただくことで見ることができます。
プロジェクトを購入していただくとこのタスクの内容の全てを読みやすい表示で見ることができます。
プログラムコードが色分けされて見やすくなります。
プログラムコードに行番号が付きます。
本文が色分けされて見やすくなります。
そしてプロジェクトを購入するとこのアプリケーションのフルコードをダウンロードすることができます。

まだレビューはありません。

民泊サイトの構築 Rails5.0

2,000円

民泊サイトを構築します。
ホストは部屋を登録し、ゲストは宿泊予約できます。
ゲストはクレジットカードで支払いをし、ホストには料金の80%が自動で口座に振り込まれます。
Googleマップによる表示、AJAX検索、日付カレンダーによる予約、フルカレンダーによる部屋管理ができます。
リアルタイムメッセージにより連絡がとれます。
予約確認メールの送信も可能。
写真のアップロード機能、アマゾンS3の利用方法も解説。
レビュー機能の実装、電話番号認証の実装方法解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 136