railsチュートリアル魔改造編 第15章 トップページ魔改造
第15章 トップページ魔改造編
トップページを魔改造していきます。
ソースコードにも、コメントを細かくつけていきます。
まずはいつものようにトピックブランチを作成します。
git checkout -b rails-makaizou-15
15.1 ヘッダー魔改造
ヘッダーにはロゴ、リンク、そして帯があります。
これらの全ての要素を変えていきます。
15.1.1 ロゴ魔改造
app/views/layouts/_header.html.erb
文字列を「魔改造」に変更します。
<%= link_to "魔改造", root_path, id: "logo" %>
app/assets/stylesheets/custom.scss
線はborder、線の内側の余白はpadding、線の外側の余白はmarginです。
margin-right: 20px;
padding-top: 10px;
にそれぞれ変更します。
文字の大きさfont-sizeは1.6emに変更します。
pxとemの違いは、pxが環境によって変化しない絶対単位なのに対して、
emはMacやWindowsなどの使用している環境によって大きさが変化する相対単位です。
bodyなどでfont-sizeの指定をしていない場合、1em=16pxが基準です。
文字色colorを#444444に変更します。
text-transformは大文字・小文字・全角文字への変換を指定します。
none テキストを変換しない（初期値）
capitalize 単語の先頭文字を大文字にする
uppercase 全ての文字を大文字にする
lowercase 全ての文字を小文字にする
full-width 全ての文字を全角形式にする。対応する全角形式が無い場合にはそのまま表示
初期値はnoneです。
今回は意味ないですがせっかくなのでlowercaseに変換しましょう。
文字の間隔letter-spacingは5pxに変更します。
文字の太さfont-weightの指定は以下のようになっています。
数値で指定
100、200、300、400、500、600、700、800、900でフォントの太さを指定します。太さが9種類用意されているフォントはあまりないため、数値を上下させても太さが変化しないことがあります。標準の太さは400で、数値が小さくなるほど細く、大きくなるほど太くなります。
キーワードで指定
normal …… 標準の太さです。（数値で400を指定した場合と同じ）
bold …… 一般的な太字の太さです。（数値で700を指定した場合と同じ）
lighter …… 相対的に一段階細くします。
bolder …… 相対的に一段階太くします。
今回はnormalを指定します。
マウスを乗せた時の動作を変更します。
文字色colorを#AAAAAAに変更します。
文字の種類font-familyを游ゴシックにします。
15.1.2 帯魔改造
app/views/layouts/_header.html.erb
帯はBootstrapの機能で以下のようになっています。
navbar ナビゲーションバーにします
navbar-fixed-top ナビゲーションバーをトップに固定表示します
navbar-inverse ナビゲーションバーの色を反転させたかのように変更します
navbar-inverseを削除して、navbar-defaultにします。
魔改造とか言いつつほぼ変わらないですが、変えれたので良しです。
ていうか帯のことナビゲーションバーって言うらしいです。
15.1.3 リンク魔改造
app/views/layouts/_header.html.erb
スタイルはBootstrapによって決定されているため、文字を変更します。
Home→ホーム
Help→ヘルプ
Log in→ログイン
これも魔改造とか言いつつほぼ変わらないですが、変えれたので良しです。
15.2 フッター魔改造
ツイッターアイコンを使えるようにするために、
app/views/layouts/_rails_default.html.erb
に
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
を追加します。
15.2.1 左下のやつ魔改造
app/views/layouts/_footer.html.erb
The Ruby on Rails Tutorial by Michael Hartl→ブログへ誘導するように変更します。
15.2.2 リンク魔改造
app/views/layouts/_footer.html.erb
About→魔改造とは
Contact→お問い合わせ
News→Twitter
にそれぞれ変更します。
15.3 ボディ魔改造
背景画像を表示し、その上に
railsチュートリアル魔改造と表示したいと思います。
15.3.1 タイトル魔改造
app/views/static_pages/home.html.erb
Welcom to the Sample App→railsチュートリアル魔改造に変更
サブタイトルも変更
15.3.2 背景魔改造
app/views/static_pages/home.html.erb
背景画像追加。
15.3.3 新規登録ボタン魔改造
app/views/static_pages/home.html.erb
Bootstrapの機能を使ってbtn btn-lg btn-dangerに変更
15.4 最後に
最終的な修正後ファイルは以下の通りです。
リスト15.01: カスタムCSS
app/assets/stylesheets/custom.scss
----------------------------
@import "bootstrap-sprockets";
@import "bootstrap";
/* mixins, variables, etc. */
$gray-medium-light: #eaeaea;
@mixin box_sizing {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* universal */
/* 共通設定 */
/* 背景 */
body {
/* 背景色 */
background-color:#FFEEEE;
/* 上からの空白 */
padding-top: 100px;
}
section {
overflow: auto;
}
textarea {
resize: vertical;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
/* 行の高さ */
line-height: 1;
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.2em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: $gray-light;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
/* home中央文字 */
.center {
/* 相対位置 */
position: relative;
/* 文字の種類 */
font-family: "游明朝";
/* テキスト変換 */
text-transform: uppercase;
/* 文字の色 */
color: #EEEEEE;
/* 中央揃え */
text-align: center;
/* タイトル */
h1
{
/* 文字の幅 */
letter-spacing: 5px;
/* 透明度 */
opacity: 0.8;
/* 絶対位置 */
position: absolute;
/* 位置 */
top: 20%;
left: 50%;
/* X方向、Y方向にどれだけずらすか */
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
/* 改行させない */
white-space: nowrap;
}
/* サブタイトル */
h2{
/* 文字の色 */
color: #AAAAAA;
/* 文字の幅 */
letter-spacing: 5px;
/* 透明度 */
opacity: 0.9;
/* 絶対位置 */
position: absolute;
/* 上からの位置 */
top: 70%;
/* 左からの位置 */
left: 50%;
/* X方向、Y方向にどれだけずらすか */
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
img{
/* 背景のサイズ */
width: 100%;
}
/* サインアップボタン */
.signup{
/* 絶対位置 */
position: absolute;
/* 上からの位置 */
top: 90%;
/* 左からの位置 */
left: 50%;
/* X方向、Y方向にどれだけずらすか */
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
}
/* 画面が小さいとき */
@media(max-width:1000px){
/* home中央文字 */
.center {
/* タイトル */
h1 {
/* 文字サイズ */
font-size: 1.5em;
}
/* サブタイトル */
h2 {
/* 文字サイズ */
font-size: 0.6em;
}
/* 新規登録ボタン */
.signup{
/* 文字サイズ */
font-size: 1em;
/* 内側空白 */
padding:3px;
}
}
}
/* header */
header{
/* 文字の種類 */
font-family: "游ゴシック";
/* ロゴの文字列に対するCSSです */
#logo {
/* 寄せ方 */
float: left;
/* 線の外側の右側の余白 */
margin-right: 20px;
/*線の内側の上側の余白 */
padding-top: 10px;
/* フォントの大きさ */
font-size: 1.6em;
/* 文字色 */
color: #444444;
/* テキスト変換 */
text-transform: lowercase;
/* 文字の幅 */
letter-spacing: 5px;
/* 文字の太さ */
font-weight: normal;
/* マウスカーソルを乗せたときのスタイル */
&:hover {
color: #AAAAAA;
text-decoration: none;
}
}
}
/* footer */
footer {
/* 文字の種類 */
font-family: "游ゴシック";
/* 線の外の上からの空白 */
margin-top: 45px;
/* 線の中の上からの空白 */
padding-top: 5px;
/* 線 */
border-top: 1px solid #AAAAAA;
/* 文字色 */
color: $gray-light;
/* リンク */
a {
/* 文字色 */
color: $gray;
/* マウスを乗せたら */
&:hover {
/* 文字色 */
color: $gray-darker;
}
}
/* 左下 */
small {
/* 左寄せ */
float: left;
}
/* 右下 */
ul {
/* 右寄せ */
float: right;
/* 黒点なし */
list-style: none;
li {
/* 左寄せ */
float: left;
/* 間隔 */
margin-left: 30px;
}
}
}
.debug_dump {
clear: both;
float: left;
width: 100%;
margin-top: 45px;
@include box_sizing;
}
/* sidebar */
aside {
section.user_info {
margin-top: 20px;
}
section {
padding: 10px 0;
margin-top: 20px;
&:first-child {
border: 0;
padding-top: 0;
}
span {
display: block;
margin-bottom: 3px;
line-height: 1;
}
h1 {
font-size: 1.4em;
text-align: left;
letter-spacing: -1px;
margin-bottom: 3px;
margin-top: 0px;
}
}
}
.gravatar {
float: left;
margin-right: 10px;
}
.gravatar_edit {
margin-top: 15px;
}
.stats {
overflow: auto;
margin-top: 0;
padding: 0;
a {
float: left;
padding: 0 10px;
border-left: 1px solid $gray-lighter;
color: gray;
&:first-child {
padding-left: 0;
border: 0;
}
&:hover {
text-decoration: none;
color: blue;
}
}
strong {
display: block;
}
}
.user_avatars {
overflow: auto;
margin-top: 10px;
.gravatar {
margin: 1px 1px;
}
a {
padding: 0;
}
}
.users.follow {
padding: 0;
}
/* forms */
input, textarea, select, .uneditable-input {
border: 1px solid #bbb;
width: 100%;
margin-bottom: 15px;
@include box_sizing;
}
input {
height: auto !important;
}
#error_explanation {
color: red;
ul {
color: red;
margin: 0 0 30px 0;
}
}
.field_with_errors {
@extend .has-error;
.form-control {
color: $state-danger-text;
}
}
.checkbox {
margin-top: -10px;
margin-bottom: 10px;
span {
margin-left: 20px;
font-weight: normal;
}
}
#session_remember_me {
width: auto;
margin-left: 0;
}
/* Users index */
.users {
list-style: none;
margin: 0;
li {
overflow: auto;
padding: 10px 0;
border-bottom: 1px solid $gray-lighter;
}
}
/* microposts */
.microposts {
list-style: none;
padding: 0;
li {
padding: 10px 0;
border-top: 1px solid #e8e8e8;
}
.user {
margin-top: 5em;
padding-top: 0;
}
.content {
display: block;
margin-left: 60px;
img {
display: block;
padding: 5px 0;
}
}
.timestamp {
color: $gray-light;
display: block;
margin-left: 60px;
}
.gravatar {
float: left;
margin-right: 10px;
margin-top: 5px;
}
}
aside {
textarea {
height: 100px;
margin-bottom: 5px;
}
}
span.picture {
margin-top: 10px;
input {
border: 0;
}
}リスト15.02: フッターパーシャル
app/views/layouts/_footer.html.erb
----------------------------
<footer class="footer">
<%# 左下説明文 %>
<small>
<a href="https://note.com/el93019205">ジュンキラーELのブログはこちら</a>
</small>
<%# 右下リンク%>
<nav>
<ul>
<li><%= link_to "魔改造とは", about_path %></li>
<li><%= link_to "お問い合わせ", contact_path %></li>
<li><span class="fa fa-twitter"></span><a href="https://twitter.com/EL93019205_2">Twitter</a></li>
</ul>
</nav>
</footer>
リスト15.03: ヘッダーパーシャル
app/views/layouts/_header.html.erb
----------------------------
<%# 以下はBootstrapのクラスです
navbar
navbar-fixed-top
navbar-inverse
container
nav
navbar-nav
navbar-right
%>
<header class="navbar navbar-fixed-top navbar-default">
<div class="container">
<%# ロゴ %>
<%= link_to "魔改造", root_path, id: "logo" %>
<nav>
<ul class="nav navbar-nav navbar-right">
<%# 右上に表示するリンク %>
<li><%= link_to "ホーム", root_path %></li>
<li><%= link_to "ヘルプ", help_path %></li>
<%# ログインしているとき %>
<% if logged_in? %>
<li><%= link_to "Users", users_path %></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account <b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li><%= link_to "Profile", current_user %></li>
<li><%= link_to "Settings", edit_user_path(current_user) %></li>
<li class="divider"></li>
<li>
<%= link_to "Log out", logout_path, method: :delete %>
</li>
</ul>
</li>
<%# ログインしていないとき %>
<% else %>
<li><%= link_to "ログイン", login_path %></li>
<% end %>
</ul>
</nav>
</div>
</header>リスト15.04: headパーシャル
app/views/layouts/_rails_default.html.erb
----------------------------
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all',
'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application',
'data-turbolinks-track': 'reload' %>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
リスト15.05: アプリケーションビュー
app/views/layouts/application.html.erb
----------------------------
<!DOCTYPE html>
<html>
<%# 各種読み込み %>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= render 'layouts/rails_default' %>
<%= render 'layouts/shim' %>
</head>
<%# ページ内構成 %>
<body>
<%# ヘッダー %>
<%= render 'layouts/header' %>
<%# コンテナ %>
<div class="container">
<%# 警告表示 %>
<% flash.each do |message_type, message| %>
<div class="alert alert-<%= message_type %>"><%= message %></div>
<% end %>
<%# 各種ページ %>
<%= yield %>
<%# フッダー %>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>
</body>
</html>リスト15.06: ホームビュー
app/views/static_pages/home.html.erb
----------------------------
<%# ログイン中？ %>
<% if logged_in? %>
<div class="row">
<aside class="col-md-4">
<section class="user_info">
<%= render 'shared/user_info' %>
</section>
<section class="stats">
<%= render 'shared/stats' %>
</section>
<section class="micropost_form">
<%= render 'shared/micropost_form' %>
</section>
</aside>
<div class="col-md-8">
<h3>Micropost Feed</h3>
<%= render 'shared/feed' %>
</div>
</div>
<%# ログインしていない？ %>
<% else %>
<%# タイトル %>
<div class="center">
<%= image_tag("title.jpg", alt: "title") %>
<h1>railsチュートリアル<br>魔改造</h1>
<%# サブタイトル %>
<h2>
全ページ……魔改造してやる！<br>このサイトから……一ページ残らず！
</h2>
<%# 新規登録ボタンを赤色(danger)にする %>
<%= link_to "新規登録", signup_path, class: "btn btn-lg btn-danger signup " %>
</div>
<% end %>あとassetsのimagesに画像1枚追加した
BitbucketとHerokuにpushしましょう。
※ここでconfig/environments/production.rbのアプリ名を変えないといけない
rails test
git add -A
git commit -m "Add 15"
git checkout master
git merge rails-makaizou-15
git push origin master
source <(curl -sL https://cdn.learnenough.com/heroku_install)
heroku login --interactive
heroku create
git remote set-url heroku *******.git
heroku rename jun-killer-makaizou
heroku maintenance:on
heroku config:set S3_ACCESS_KEY="
heroku config:set S3_SECRET_KEY="
heroku config:set S3_BUCKET="
heroku config:set S3_REGION="ap-northeast-1"
heroku addons:create sendgrid:starter
git push heroku master
heroku pg:reset DATABASE
jun-killer-makaizou
heroku run rails db:migrate
heroku run rails db:seed
heroku restart
heroku maintenance:off
15.4.1 本章のまとめ
とりあえずトップページの色んな部分を変えてみた
次は新規登録画面を変えてみる
また、ホーム画面から新規登録画面にルーティングするまでの部分の処理にコメントをつけていく
https://jun-killer-makaizou.herokuapp.com/
本番環境でトップページに画像が表示されない問題・・・
CSSでbackground-imageを指定するとダメっぽい。
きちんとimage_tagで載せる必要があった
以下の情報を元に背景画像に文字を載せた。
https://saruwakakun.com/html-css/reference/image-text#section1
学んだこと
h1とかだと勝手に改行されるので、
white-space: nowrap;
などのようにして勝手に改行されないようにする
/* X方向、Y方向にどれだけずらすか */
-ms-transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
上記3つは、全て同じ意味
左に50%、上に50%ずらすという意味
ではなぜ、3種類あるか。ベンダープレフィックスだから。
ベンダープレフィックス（接頭辞）とは、ブラウザベンダーが独自の拡張機能を実装したり、草案段階の仕様を先行実装する場合に、 それが拡張機能であることを明示するために付ける識別子のことです。 将来的に仕様が変更されるリスクに備えて、独自拡張や先行実装のプロパティ名や値の先頭に付けることが推奨されている。
ブラウザ上からでも一応スマホ用のサイズにして確認可能
修正前
修正後
この記事が気に入ったらサポートをしてみませんか？