トップページを作ろう!:設定一覧

トップページを作ろう!

Header8

0 : この章の目的

 「トップページを作ろう!」の設定一覧の確認をする


1 : 設定一覧

トップページを作ろう!」では、トップページの設定を行った。

ここで変更した内容をまとめる。
トップページのページ設定をするために、

 ターミナル
 Windowsをご利用でしたら、「コマンドプロンプト」をご利用下さい。

1 ralis g controller welcome

この入力で作成された
  • ページ設定のためのフォルダ「app > views > welcome
  • データ操作をするファイル「app > controllers > welcome_controller.rb


3. どのページを使うかの設定ファイル「config > route.rb

の3つを設定してページを作る。
 7つのページの設定(route.rb)は、

 route.rb

1 2 3 4 5 5 6 7 8 9 ... 58 59 Rails.application.routes.draw do resources :posts , :only => [:show, :index, :new, :create, :edit, :update, :destroy] resources :welcome, :only => [:index] root "welcome#index" # The priority is based upon order of creation: first created -> highest priority. # See how all your routes lay out with "rake routes". # You can have the root of your site routed with "root" # root 'welcome#index' # 省略 # end end

 データ操作の設定(controllerファイル)は、

 welcome_controller.rb

1 2 3 4 class WelcomeController < ApplicationController def index end end

 ページの設定(viewsフォルダ)は、

 index.html.erb

1 2 3 4 5 <div class="header-image"> <h1 class="text-center header-content"><strong>ようこそ</strong></h1> </div> <br> <a href="/posts" class="btn btn-primary">投稿一覧を見る</a>

ページの装飾は、

 style.scss

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 .my-form{ width:500px; } .main-page{ margin-top:50px; } .header-image{ background-image: url(/assets/header12.jpg); height:400px; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; } .header-content{ font-size:75px; padding-top:150px; }

になる