戻る

Rails6.0


お仕事売買サイトの構築 Rails6.0

  (0)
3,000円

タスク2-9   Googleフォント

このタスクについて


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




サイト

fonts.google.com


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


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


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


select this style



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


リンクをコピー



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


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



app\views\layouts\application.html.erb
 <!DOCTYPE html> 
<html> 
  <head> 
    <title>Oshigoto</title> 
    <%= csrf_meta_tags %> 
    <%= csp_meta_tag %> 
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> 
    <!-- Googleフォント --> 
    <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet"> 
  </head> 
  <body> 
    <!-- ナビゲーションバー --> 
    <%= render  "shared/navbar" %> 
    <!-- noty --> 
    <%= render 'shared/notification' %> 
    <%= yield %> 
  </body> 
</html> 



スタイルシートの記述追加はすでに行なっていますが載せておきます。
143行目からがGoogleフォントの記述です。


app\assets\stylesheets\styles.scss
 
$spaceamounts: (0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 60, 70, 80, 90, 100); 
$sides: (top, bottom, left, right); 
@each $space in $spaceamounts { 
  @each $side in $sides { 
    .m-#{str-slice($side, 0, 1)}-#{$space} { 
      margin-#{$side}: #{$space}px !important; 
    } 
    .p-#{str-slice($side, 0, 1)}-#{$space} { 
      padding-#{$side}: #{$space}px !important; 
    } 
  } 
  .m-#{$space} { 
    margin: #{$space}px !important; 
  } 
  .p-#{$space} { 
    padding: #{$space}px !important; 
  } 
  .h-#{$space} { 
    margin-top: #{$space}px !important; 
    margin-bottom: #{$space}px !important; 
  } 
  .f-#{$space} { 
    font-size: #{$space}px !important; 
  } 
} 
.is-horizontal-center { 
  justify-content: center; 
} 
.small-title { 
  font-size: 10px; 
} 
.star-review { 
  color: #ffbf00; 
  font-size: 13px; 
  font-weight: 600; 
} 
// ドロップゾーン用 
.dropzone { 
  border: 2px dashed #0087F7 !important; 
  border-radius: 5px; 
  background: white; 
} 
.dropzone .dz-message { 
  font-weight: 400; 
} 
.dropzone .dz-message .note { 
  font-size: 0.8em; 
  font-weight: 200; 
  display: block; 
  margin-top: 1.4rem; 
} 
//リクエスト 
.form-container { 
  margin-left: 100px; 
  margin-right: 100px; 
} 
//ページネーション 
.pagination-link.is-current { 
  background-color: #ee7979 !important; 
  border-color: #ee7979 !important; 
} 
//ホームページ用 
.has-bg-img { 
  background: url('/assets/home/background01.jpg') center center; 
  background-size: cover; 
} 
//アバター オンライン 
.avatar { 
  position: relative; 
  display: inline-block; 
  &::before { 
    content: ''; 
    position: absolute; 
    top: -2px; 
    right: -2px; 
    width: 10px; 
    height: 10px; 
    border-radius: 100%; 
    border: 1px solid white; 
  } 
  &.online:before { 
    background-color: #1dbf73; 
  } 
  &.offline:before { 
    background-color: gray; 
  } 
} 
//ナビバーのアバター画像位置 
.image { 
  //margin-top: 0.6rem; 
  display: flex; /* flexに */ 
  align-items: center; 
} 
//メッセージ 
.conversation-message { 
  margin-bottom: 5px !important; 
  padding: 10px !important; 
  font-size: 15px; 
} 
//カレンダー 
.fc-past { 
  background-color: lightgray; 
} 
.fc-content { 
  height: 40px; 
} 
.fc-event { 
  border: none !important; 
} 
.fc-title { 
  font-size: 14px; 
  font-weight: 500; 
  position: relative; 
  top: 8px; 
  left: 20px; 
} 
// googlフォント用 
.title { 
  font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
} 
.button { 
  font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
} 
.field { 
  font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
} 
.all { 
  font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
} 
.navbar-item { 
  font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
} 
.input { 
  font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
} 
.card-content { 
  font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
} 
.section { 
  font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
} 
.card-header-title { 
  font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
} 
.modal-card-title { 
  font-family: 'Kosugi Maru', "Helvetica Neue", "Helvetica", "Arial", sans-serif; 
} 




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

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

お仕事売買サイトの構築 Rails6.0

3,000円

フリーランスの方がお仕事を登録し、仕事を探している人が探して買うことができます。
お仕事を探している人がリクエストを出してお仕事をしてくれる人を募集する事もできます。
お仕事が売れると売上の80%が自動で指定口座に振り込まれます。
お仕事の購入はクレジットカードで決済します。
質問があればメッセージを送ることができ、リアルタイムで会話表示することができます。
検索機能、写真のアップロード、レビュー機能の実装、Facebook認証、アマゾンS3の利用方法も解説。
HEROKUへのデプロイ方法を解説。
フルコードのダウンロード可能。

タスク数: 146