teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

3

画像追加

2019/03/26 06:45

投稿

Kousukeh10969
Kousukeh10969

スコア20

title CHANGED
File without changes
body CHANGED
@@ -1,4 +1,5 @@
1
1
  ![イメージ説明](b09b4b2b025a3c03f9adbc2e38607822.png)
2
+ ![イメージ説明](0112bf10fe02e6b9c92da1f8e34f8696.png)
2
3
  本来、右上にアイコンが出るようにコーディングしたいと思い、application.html.erb上に以下のようなコードを書いたのですが、反映されないのはどうしてでしょうか。よろしくお願いいたします。
3
4
 
4
5
 

2

コード修正

2019/03/26 06:45

投稿

Kousukeh10969
Kousukeh10969

スコア20

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,4 @@
1
- [イメージ説明](5fb81d6dc83eceab02038581e1449bbb.png)
1
+ ![イメージ説明](b09b4b2b025a3c03f9adbc2e38607822.png)
2
-
3
2
  本来、右上にアイコンが出るようにコーディングしたいと思い、application.html.erb上に以下のようなコードを書いたのですが、反映されないのはどうしてでしょうか。よろしくお願いいたします。
4
3
 
5
4
 

1

コード修正

2019/03/26 06:43

投稿

Kousukeh10969
Kousukeh10969

スコア20

title CHANGED
File without changes
body CHANGED
@@ -1,21 +1,30 @@
1
- ![イメージ説明](5fb81d6dc83eceab02038581e1449bbb.png)
1
+ [イメージ説明](5fb81d6dc83eceab02038581e1449bbb.png)
2
2
 
3
3
  本来、右上にアイコンが出るようにコーディングしたいと思い、application.html.erb上に以下のようなコードを書いたのですが、反映されないのはどうしてでしょうか。よろしくお願いいたします。
4
4
 
5
5
 
6
6
  ```html
7
+
8
+ <!-- へッダやフッタなど共通して使用される部分を定義するページ -->
9
+ <!-- 全体で共有するhtml.erbで、rails newで自動生成されるファイル -->
7
10
  <!DOCTYPE html>
8
11
  <html>
9
12
  <head>
10
13
  <title>CARAVAN</title>
11
14
  <meta charset="utf-8">
12
- <%= csrf_meta_tags %>
15
+ <meta name="csrf-param" content="authenticity_token" />
13
- <%= csp_meta_tag %>
16
+ <meta name="csrf-token" content="nnqPjAyRh6bBx8MNT5hSbhHTbu6LIRxN/fNCFseLmF3cmYvYd4ZawLj5YWC134RayKLskaQXQg1HQwtCzD4YWA==" />
17
+
14
18
 
19
+ <link rel="stylesheet" media="all" href="/assets/blogs.self-e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855.css?body=1" data-turbolinks-track="reload" />
20
+ <link rel="stylesheet" media="all" href="/assets/application.self-8bc312fbd5212a07ce133d96554189deb341565bdf204628806bb3226874a153.css?body=1" data-turbolinks-track="reload" />
21
+ <script src="/assets/rails-ujs.self-d109d8c5c0194c8ad60b8838b2661c5596b5c955987f7cd4045eb2fb90ca5343.js?body=1" data-turbolinks-track="reload"></script>
22
+ <script src="/assets/activestorage.self-1ed4604ac2170045f1ffca4edb81a75246661555e4f9cf682bb8a21825e32e1c.js?body=1" data-turbolinks-track="reload"></script>
23
+ <script src="/assets/turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1" data-turbolinks-track="reload"></script>
15
- <% stylesheet_link_tag
24
+ <script src="/assets/blogs.self-877aef30ae1b040ab8a3aba4e3e309a11d7f2612f44dde450b5c157aa5f95c05.js?body=1" data-turbolinks-track="reload"></script>
25
+ <script src="/assets/action_cable.self-69fddfcddf4fdef9828648f9330d6ce108b93b82b0b8d3affffc59a114853451.js?body=1" data-turbolinks-track="reload"></script>
16
- 'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' %>
26
+ <script src="/assets/cable.self-8484513823f404ed0c0f039f75243bfdede7af7919dda65f2e66391252443ce9.js?body=1" data-turbolinks-track="reload"></script>
17
- <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
27
+ <script src="/assets/application.self-66347cf0a4cb1f26f76868b4697a9eee457c8c3a6da80c6fdd76ff77e911715e.js?body=1" data-turbolinks-track="reload"></script>
18
- <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
19
28
 
20
29
 
21
30
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
@@ -23,7 +32,110 @@
23
32
  </head>
24
33
 
25
34
  <body>
26
- <%= yield %>
35
+ <header>
36
+ <h1 class="headline">
37
+ <a href="/blogs">CARAVAN</a>
38
+ </h1>
39
+ <div class="social">
40
+ <i class="fa fa-facebook-square"></i>
41
+ <i class="fa fa-twitter-square"></i>
42
+ <i class="fa fa-instagram"></i>
43
+ </div>
44
+ </header>
45
+
46
+ <nav>
47
+ <ul class="nav-list">
48
+ <li class="nav-list-item">
49
+ <a href="#">Home</a>
50
+ </li>
51
+ <li class="nav-list-item">About</li>
52
+ <li class="nav-list-item">Topic</li>
53
+ </ul>
54
+ </nav>
55
+
56
+ <div class="main-visual">
57
+ <div class="main-visual-content">
58
+ <p class="main-visual-text">
59
+ The world is a book<br>
60
+ and those who do not travel<br>
61
+ read only one page.
62
+ </p>
63
+ <p class="main-visual-name">
64
+ St. Augustine
65
+ </p>
66
+ </div>
67
+ </div>
68
+
69
+ <main class="clearfix">
70
+ <section class="single-blog">
71
+ <h2 class="blog-headline">Blog</h2>
72
+ <section class="blog-box">
73
+ <h3 class="blog-box-headline">
74
+ 2
75
+ </h3>
76
+ <div class="blog-box-content">
77
+ <p class="category">
78
+ 宇宙
79
+ </p>
80
+ <p class="blog-date">
81
+ 2019-01-10 09:08:18 UTC
82
+ </p>
83
+ </div>
84
+ <img class="single-image" src="/assets/img/forest-faf14705758c6cb45a63de8450df177db9182556513bd6048cc742cf18cffff4.jpg" />
85
+ <p class="single-text">
86
+ wow
87
+ </p>
88
+ <a class="edit-figure" href="/blogs/6/edit">編集</a>
89
+ <a class="destroy-figure" rel="nofollow" data-method="delete" href="/blogs/6">削除</a>
90
+
91
+ <div class="author-case clearfix">
92
+ <div class="author-image"></div>
93
+ <div class="author-box">
94
+ <p class="author-name">By JOHN SMITH / Photographer</p>
95
+ <p class="author-text">His black and white landscapes, often captured at times<br>of the day and night when the light is fleeting, or in poor<br>weather conditions, such as rain, fog, or snow, are<br>reminiscent of the calm in a storm all with an ethereal<br>quality. </p>
96
+ </div>
97
+ </div>
98
+ </section>
99
+ </section>
100
+
101
+ <div class="sidebar">
102
+ <section class="popular">
103
+ <h2 class="sidebar-headline">Popular</h2>
104
+ <div class="sidebar-contents">
105
+ <p class="popular-text">To solve old problems,<br>study new species</p>
106
+ <p class="popular-text">Why Earth may someday<br>look like Mars</p>
107
+ <p class="popular-text">What will humans look<br>like in 100 years?</p>
108
+ <p class="popular-text">How to grow a forest<br>in your backyard</p>
109
+ <p class="popular-text">How humans could evolve<br>to survive in space</p>
110
+ </div>
111
+ </section>
112
+ <section class="instagram">
113
+ <h2 class="instagram-headline">Instagram</h2>
114
+ <div class="sidebar-contents clearfix">
115
+ <div class="instagram-box"></div>
116
+ <div class="instagram-box"></div>
117
+ <div class="instagram-box"></div>
118
+ <div class="instagram-box"></div>
119
+ <div class="instagram-box"></div>
120
+ <div class="instagram-box"></div>
121
+ </section>
122
+ <section class="categories">
123
+ <h2 class="categories-headline">Categories</h2>
124
+ <div class="sidebar-contents">
125
+ <p class="categories-text">Technology(15)</p>
126
+ <p class="categories-text">Business(23)</p>
127
+ <p class="categories-text">Entertainment(12)</p>
128
+ <p class="categories-text">Nature(32)</p>
129
+ <p class="categories-text">Education(9)</p>
130
+ <p class="categories-text">Adventure(23)</p>
131
+ <p class="categories-text">Communication(14)</p>
132
+ </div>
133
+ </section>
134
+ </div>
135
+ </main>
136
+ <footer>
137
+ <p class="footer-text">© All rights recerved by Infratop.Inc.</p>
138
+ </footer>
27
139
  <!-- ↑各ビューの内容として別途作成されたhtmlファイルが読み込まれます -->
28
140
  </body>
29
141
  </html>