質問編集履歴

5

より具体的な質問に修正。

2020/11/05 08:57

投稿

kema
kema

スコア6

test CHANGED
File without changes
test CHANGED
@@ -14,304 +14,40 @@
14
14
 
15
15
 
16
16
 
17
-
17
+ Bootstrap4はbootstrapのgemを追加する方法で導入しました。
18
+
19
+ ログアウトすると表示が崩れるだけで機能は正常に動きます。
20
+
21
+ [Railsアプリで Bootstrap 4 を利用する](https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf)の記事を参考にしました。
22
+
23
+
24
+
25
+ ブログの記事を入力する部分にActionTextを使用しています。
18
26
 
19
27
  ### 発生している問題
20
28
 
21
29
 
22
30
 
23
- レイアウトはずっ崩れていたわけではなくて開発進めていて、ログアウトしたときに表示が崩れてした
31
+ ユーザーがログアウトするグリッドシステム使用している部分の表示が崩れて
24
-
25
- 基本的にログイン状態で作業をしていたので、明確なタイミングが分かりません。(すいません、、、、)
32
+
26
-
27
- Bootstrap4はbootstrapのgemを追加する方法で導入しました。
33
+
28
-
29
- ログアウトすると表示が崩れるだけで機能は正常に動きます。
34
+
30
-
31
- [Railsアプリで Bootstrap 4 を利用する](https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf)の記事を参考にしました。
35
+
32
-
33
-
34
-
35
- ブログの記事を入力する部分にActionTextを使用しています。
36
+
37
+
36
38
 
37
39
  ### 該当のソースコード
38
40
 
39
41
 
40
42
 
41
- /assets/stylesheets/application.scss
42
-
43
- ```
44
-
45
- /*
46
-
47
- ### 省略 ###
48
-
49
- *
50
-
51
- *= require_tree .
52
-
53
- *= require_self
54
-
55
- */
56
-
57
- @import "bootstrap";
58
-
59
-
60
-
61
-
62
-
63
- .h3{
64
-
65
- font-family: Hiragino Maru Gothic ProN W4;
66
-
67
- font-size: 31px;
68
-
69
- font-weight: bolder;
70
-
71
- color: black;
72
-
73
- letter-spacing: 4px;
74
-
75
- text-shadow:0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
76
-
77
- }
78
-
79
-
80
-
81
-
82
-
83
- .navbar {
84
-
85
- background:transparent;
86
-
87
- }
88
-
89
- ```
90
-
91
- /assets/stylesheets/posts/posts.scss(背景とユーザーのプロフィール画像を指定しています)
92
-
93
- ```
94
-
95
- .bg-sample{
96
-
97
- height: 700px;
98
-
99
- width: 100%;
100
-
101
- background-image: image-url('mizu1.webp');
102
-
103
- background-size: cover;
104
-
105
- background-repeat: no-repeat;
106
-
107
- background-position: center center;
108
-
109
- align-items: flex-start;
110
-
111
- justify-content: center;
112
-
113
- padding: 5vh 15vw;
114
-
115
- color: #fff;
116
-
117
- text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
118
-
119
- margin-top:-70px;
120
-
121
- }
122
-
123
-
124
-
125
-
126
-
127
- .btn {
128
-
129
- color: black;
130
-
131
- }
132
-
133
-
134
-
135
- .like-link {
136
-
137
- text-decoration: none;
138
-
139
- }
140
-
141
-
142
-
143
- .like-link:hover {
144
-
145
- background-color: #fff!important;
146
-
147
- }
148
-
149
-
150
-
151
- .like-btn {
152
-
153
- font-size: 15px;
154
-
155
- color: #808080;
156
-
157
- }
158
-
159
-
160
-
161
- .unlike-btn {
162
-
163
- font-size: 15px;
164
-
165
- color: #e54747;
166
-
167
- }
168
-
169
-
170
-
171
- .avatar {
172
-
173
- width: 50px;
174
-
175
- height: 50px;
176
-
177
- border-radius: 50%;
178
-
179
-
180
-
181
- }
182
-
183
- ```
184
-
185
- app/assets/javascripts/application.js
186
-
187
- ```
188
-
189
- // This file is automatically compiled by Webpack, along with any other files
190
-
191
- // present in this directory. You're encouraged to place your actual application logic in
192
-
193
- // a relevant structure within app/javascript and only use these pack files to reference
194
-
195
- // that code so it'll be compiled.
196
-
197
-
198
-
199
- // = require jquery3
200
-
201
- // = require popper
202
-
203
- // = require bootstrap-sprockets
204
-
205
- require("trix")
206
-
207
- require("@rails/actiontext")
208
-
209
- require("@rails/ujs").start()
210
-
211
- // require("turbolinks").start()
212
-
213
- require("@rails/activestorage").start()
214
-
215
- require("channels")
216
-
217
- require('./preview')
218
-
219
-
220
-
221
- // Uncomment to copy all static images under ../images to the output folder and reference
222
-
223
- // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
224
-
225
- // or the `imagePath` JavaScript helper below.
226
-
227
- //
228
-
229
- // const images = require.context('../images', true)
230
-
231
- // const imagePath = (name) => images(name, true)
232
-
233
-
234
-
235
- ```
236
-
237
-
238
-
239
- トップページのドロップダウンが反応しなかった為に以下のコードは追記しました
240
-
241
- app/views/layouts/application.html.erb
242
-
243
- ```
244
-
245
- <!DOCTYPE html>
246
-
247
- <html>
248
-
249
- <head>
250
-
251
- <title>Tiisana</title>
252
-
253
- <%= csrf_meta_tags %>
254
-
255
- <%= csp_meta_tag %>
256
-
257
- <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
258
-
259
- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css">
260
-
261
- <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
262
-
263
- <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
264
-
265
- </head>
266
-
267
-
268
-
269
- <body>
270
-
271
- ### 省略 ###
272
-
273
- <%= breadcrumbs separator: " &rsaquo; " %>
43
+
44
+
45
+ view/posts/index.html/erb
46
+
47
+ ```
274
48
 
275
49
  <%= render partial: 'layouts/flash' %>
276
50
 
277
- <%= yield %>
278
-
279
- <nav class="navbar bg-light navbar-light navbar-expand-md mt-5 fixed-bottom">
280
-
281
- <a class="navbar-brand text-center" href="/">© 2020 Tiisana</a>
282
-
283
- </nav>
284
-
285
-
286
-
287
- ###以下を追加###
288
-
289
-
290
-
291
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
292
-
293
- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
294
-
295
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
296
-
297
-
298
-
299
- </body>
300
-
301
-
302
-
303
- </html>
304
-
305
- ```
306
-
307
- ###ログアウトに表示するページ
308
-
309
- view/posts/index.html/erb
310
-
311
- ```
312
-
313
- <%= render partial: 'layouts/flash' %>
314
-
315
51
  <div class="bg-sample">
316
52
 
317
53
  <h3 class="text-lg-center mt-5">地球と人のつながりをもっと身近なものに。</h3>
@@ -332,7 +68,7 @@
332
68
 
333
69
  <div class="row">
334
70
 
335
- <div class="col-md-8">
71
+ <div class="col-lg-8">
336
72
 
337
73
  <% @posts.each do |post| %>
338
74
 
@@ -396,7 +132,7 @@
396
132
 
397
133
  </div>
398
134
 
399
- <div class="col-md-4">
135
+ <div class="col-lg-4">
400
136
 
401
137
  <div class="card">
402
138
 
@@ -438,63 +174,259 @@
438
174
 
439
175
  ```
440
176
 
441
- ###ルートパス
442
-
443
- ```
444
-
445
- Rails.application.routes.draw do
446
-
447
- devise_for :users, only: [:show]
448
-
449
- devise_for :users, controllers: {
450
-
451
- registrations: 'users/registrations'
452
-
453
- }
454
-
455
- root to: "posts#index"
456
-
457
- resources :posts do
458
-
459
- resources :comments, only: [:create, :destroy]
460
-
461
- collection do
462
-
463
- get 'search'
464
-
465
- end
466
-
467
- end
468
-
469
-
470
-
471
- resources :users do
472
-
473
- member do
474
-
475
- get :following, :followers
476
-
477
- end
478
-
479
- end
480
-
481
-
482
-
483
- resources :relationships, only: [:create, :destroy]
484
-
485
-
486
-
487
- post '/like/:post_id' => 'likes#like', as: 'like'
488
-
489
- delete '/like/:post_id' => 'likes#unlike', as: 'unlike'
490
-
491
-
492
-
493
- get 'tags/:tag', to: 'posts#index', as: :tag
494
-
495
-
496
-
497
- end
177
+ view/posts/show.html/erb
178
+
179
+ ```
180
+
181
+ <hr>
182
+
183
+ <% breadcrumb :post %>
184
+
185
+ <div class="container">
186
+
187
+ <div class="row">
188
+
189
+ <div class="col-md-7 offset-3">
190
+
191
+ <%= image_tag @post.image.variant(resize:'700x500').processed %>
192
+
193
+ <br>
194
+
195
+ <br>
196
+
197
+ <h2 class="font-weight-bold mb-1">
198
+
199
+ <%= @post.title %>
200
+
201
+ </h2>
202
+
203
+ <%= render partial: 'posts/posts', locals: { post: @post }, class:"m-2"%>
204
+
205
+ <a href="/users/<%= @post.user.id %>", class="d-flex", style="text-decoration: none">
206
+
207
+ <% if @post.user.image.attached? %>
208
+
209
+ <%= image_tag @post.user.image, class:"avatar m-1"%>
210
+
211
+ <% else %>
212
+
213
+ <%= image_tag ("defo.jpg"), class:"avatar m-1"%>
214
+
215
+ <% end %>
216
+
217
+ <div class="flex-column ">
218
+
219
+ <p class="h4 text-bold text-muted "><%= @post.user.nickname %></p>
220
+
221
+ <span class="text-muted small">投稿日時:<%= @post.created_at.to_s(:datetime_jp) %></span>
222
+
223
+ </div>
224
+
225
+ </a>
226
+
227
+ <div class="card">
228
+
229
+ <%= @post.content %>
230
+
231
+ </div>
232
+
233
+ </div>
234
+
235
+ </div>
236
+
237
+ </div>
238
+
239
+ <div class="container col-md-7 offset-3">
240
+
241
+ <hr>
242
+
243
+ <div class="text-center text-muted mb-4">
244
+
245
+ <h4>タグ</h4> <%= @comments_count %>
246
+
247
+ </div>
248
+
249
+ <div class="">
250
+
251
+ <%= render 'posts/tag_list', tag_list: @post.tag_list %>
252
+
253
+ </div>
254
+
255
+ <hr>
256
+
257
+ <div class=" text-center text-muted mb-4">
258
+
259
+ <h4>コメント</h4> <%= @comments_count %>
260
+
261
+ </div>
262
+
263
+ <div class=" mx-auto">
264
+
265
+ <% if @comments %>
266
+
267
+ <% @comments.each do |comment| %>
268
+
269
+ <% if user_signed_in? %>
270
+
271
+ <div class="row">
272
+
273
+ <p>
274
+
275
+ <div class="col-10">
276
+
277
+ <strong><%= link_to comment.user.nickname, "/users/#{comment.user_id}" %>:</strong>
278
+
279
+ <%= comment.text %>
280
+
281
+ <% if current_user.id == comment.user_id %>
282
+
283
+ </div>
284
+
285
+ <div class="col-2">
286
+
287
+ <%= link_to "削除", post_comment_path(@post, comment), method: :delete , class: "btn btn-outline-secondary btn-sm "%>
288
+
289
+ </div>
290
+
291
+ <% end %>
292
+
293
+ </p>
294
+
295
+ </div>
296
+
297
+ <% else %>
298
+
299
+ <p>
300
+
301
+ <strong> <%= comment.user.nickname %>:</strong>
302
+
303
+ <%= comment.text %>
304
+
305
+ </p>
306
+
307
+ <% end %>
308
+
309
+ <% end %>
310
+
311
+
312
+
313
+ <% if current_user %>
314
+
315
+ <div class="container ">
316
+
317
+ <hr>
318
+
319
+ <%= form_with(model: [@post, @comment], local: true) do |form| %>
320
+
321
+ <div class="form-group mt-3">
322
+
323
+ <%= form.text_area :text, placeholder: "コメント", rows: "2", class: "form-control" %>
324
+
325
+ <div class="text-right">
326
+
327
+ <%= form.submit "SEND", class: "btn btn-outline-secondary "%> <% end %>
328
+
329
+ </div>
330
+
331
+ </div>
332
+
333
+ <% else %>
334
+
335
+ <strong><p class="text-center">※※※ コメントするにはログインしてください ※※※</p></strong>
336
+
337
+ <% end %>
338
+
339
+ <% end %>
340
+
341
+ </div>
342
+
343
+ </div>
344
+
345
+ </div>
346
+
347
+ <div class="container" style="margin-bottom:200px;">
348
+
349
+ ```
350
+
351
+ view/users/show.html/erb
352
+
353
+ ```
354
+
355
+ <div class="container" style="margin-top:20px;">
356
+
357
+ <%= render 'userhed' %>
358
+
359
+ <hr>
360
+
361
+ <div class="album py-5 bg-light">
362
+
363
+ <% breadcrumb :user %>
364
+
365
+ <div class="container">
366
+
367
+ <div class="row">
368
+
369
+ <% @posts.each do |post| %>
370
+
371
+ <div class="col-md-4">
372
+
373
+ <div class="card text-center h-100">
374
+
375
+ <td><%= image_tag post.image.variant(resize:'300x200'), class: "card-img-top" %></td>
376
+
377
+ <h4 class="card-text"><%= post.title %></h4>
378
+
379
+ <div class="card-body ">
380
+
381
+ <%= strip_tags(post.content.to_s).gsub(/[\n]/,"").strip.truncate(20)%>
382
+
383
+ <%= render partial: 'posts/posts', locals: { post: post } %>
384
+
385
+ <div class="d-flex justify-content-between align-items-center">
386
+
387
+ <div class="btn-group mt-3 mx-auto">
388
+
389
+ <% if user_signed_in? && current_user.id == post.user_id%>
390
+
391
+ <%= link_to '編集', edit_post_path(post.id), method: :get, class: "btn btn-sm btn-outline-primary" %>
392
+
393
+ <%= link_to '削除', post, method: :delete, data: { confirm: 'Are you sure?' } , class: "btn btn-sm btn-outline-primary"%>
394
+
395
+ <% else %>
396
+
397
+ <%= link_to '詳細', post, class: "btn btn-sm btn-outline-primary" %>
398
+
399
+ <%= link_to 'トップページ', posts_path, class: "btn btn-sm btn-outline-primary" %>
400
+
401
+ <% end %>
402
+
403
+ </div>
404
+
405
+ </div>
406
+
407
+ <hr>
408
+
409
+ <small class="text-muted mt-4"><%= post.created_at.to_s(:datetime_jp) %></small>
410
+
411
+ </div>
412
+
413
+ </div>
414
+
415
+ </div>
416
+
417
+ <% end %>
418
+
419
+ </div>
420
+
421
+ </div>
422
+
423
+ </div>
424
+
425
+ <%= paginate @posts %>
426
+
427
+ <div class="container" style="margin-bottom:200px;">
428
+
429
+
498
430
 
499
431
  ```
500
432
 
@@ -502,20 +434,10 @@
502
434
 
503
435
 
504
436
 
505
- /assets/stylesheets/application.scssの中の*= require_tree .の記述はどのサイトを見ても削除するようになっているのですが、削除してしまうとActionTextの表示がリッチテキストのレイアウトが崩れてしまうため消していないです。
506
-
507
- この事も一つの要因ではあると思うのですが、ログインしている状態だと全てのページは正常に表示されています。
508
-
509
-
510
-
511
437
  一度Bootstrap 4のgemをアンインストールしてみてCDNで表示しようとやってみたのですが、アンインストールする前よりもレイアウトが崩れてしまいました。そしてログアウトしようとするとエラーが出るなど他の機能にも支障が出たために元に戻しました。
512
438
 
513
439
 
514
440
 
515
- それ以外にも@import "bootstrap";の位置を変えてみたりしても駄目でした。
516
-
517
-
518
-
519
441
 
520
442
 
521
443
  BootstrapのCDNのみの設定でも同じように表示の崩れは治りませんでした。
@@ -530,12 +452,6 @@
530
452
 
531
453
 
532
454
 
533
- rails6からwebpackerが標準装備になっているということはWebpackerを使用しないとやはり不具合の原因になってしまうのでしょうか?
534
-
535
-
536
-
537
-
538
-
539
455
  できることならば現状のやり方のままで修正を加えてログインしていない状態でもうまく表示したいです。
540
456
 
541
457
 

4

より具体的な質問に修正。

2020/11/05 08:57

投稿

kema
kema

スコア6

test CHANGED
File without changes
test CHANGED
@@ -234,6 +234,8 @@
234
234
 
235
235
  ```
236
236
 
237
+
238
+
237
239
  トップページのドロップダウンが反応しなかった為に以下のコードは追記しました
238
240
 
239
241
  app/views/layouts/application.html.erb
@@ -302,7 +304,7 @@
302
304
 
303
305
  ```
304
306
 
305
- ###ログアウトによりビューが崩れていeach文の部分のコ
307
+ ###ログアウトに表示す
306
308
 
307
309
  view/posts/index.html/erb
308
310
 
@@ -436,87 +438,63 @@
436
438
 
437
439
  ```
438
440
 
439
- view/users/show.html.erb
440
-
441
- ```
442
-
443
- <div class="container" style="margin-top:20px;">
444
-
445
- <%= render 'userhed' %>
446
-
447
- <hr>
448
-
449
- <div class="album py-5 bg-light">
450
-
451
- <% breadcrumb :user %>
452
-
453
- <div class="container">
454
-
455
- <div class="row">
456
-
457
- <% @posts.each do |post| %>
458
-
459
- <div class="col-md-4">
460
-
461
- <div class="card text-center h-100">
462
-
463
- <td><%= image_tag post.image.variant(resize:'300x200'), class: "card-img-top" %></td>
464
-
465
- <h4 class="card-text"><%= post.title %></h4>
466
-
467
- <div class="card-body ">
468
-
469
- <%= strip_tags(post.content.to_s).gsub(/[\n]/,"").strip.truncate(20)%>
470
-
471
- <%= render partial: 'posts/posts', locals: { post: post } %>
472
-
473
- <div class="d-flex justify-content-between align-items-center">
474
-
475
- <div class="btn-group mt-3 mx-auto">
476
-
477
- <% if user_signed_in? && current_user.id == post.user_id%>
478
-
479
- <%= link_to '編集', edit_post_path(post.id), method: :get, class: "btn btn-sm btn-outline-primary" %>
480
-
481
- <%= link_to '削除', post, method: :delete, data: { confirm: 'Are you sure?' } , class: "btn btn-sm btn-outline-primary"%>
482
-
483
- <% else %>
484
-
485
- <%= link_to '詳細', post, class: "btn btn-sm btn-outline-primary" %>
486
-
487
- <%= link_to 'トップページ', posts_path, class: "btn btn-sm btn-outline-primary" %>
488
-
489
- <% end %>
490
-
491
- </div>
492
-
493
- </div>
494
-
495
- <hr>
496
-
497
- <small class="text-muted mt-4"><%= post.created_at.to_s(:datetime_jp) %></small>
498
-
499
- </div>
500
-
501
- </div>
502
-
503
- </div>
504
-
505
- <% end %>
506
-
507
- </div>
508
-
509
- </div>
510
-
511
- </div>
512
-
513
- <%= paginate @posts %>
514
-
515
- <div class="container" style="margin-bottom:200px;">
516
-
517
-
518
-
519
-
441
+ ###ルートパス
442
+
443
+ ```
444
+
445
+ Rails.application.routes.draw do
446
+
447
+ devise_for :users, only: [:show]
448
+
449
+ devise_for :users, controllers: {
450
+
451
+ registrations: 'users/registrations'
452
+
453
+ }
454
+
455
+ root to: "posts#index"
456
+
457
+ resources :posts do
458
+
459
+ resources :comments, only: [:create, :destroy]
460
+
461
+ collection do
462
+
463
+ get 'search'
464
+
465
+ end
466
+
467
+ end
468
+
469
+
470
+
471
+ resources :users do
472
+
473
+ member do
474
+
475
+ get :following, :followers
476
+
477
+ end
478
+
479
+ end
480
+
481
+
482
+
483
+ resources :relationships, only: [:create, :destroy]
484
+
485
+
486
+
487
+ post '/like/:post_id' => 'likes#like', as: 'like'
488
+
489
+ delete '/like/:post_id' => 'likes#unlike', as: 'unlike'
490
+
491
+
492
+
493
+ get 'tags/:tag', to: 'posts#index', as: :tag
494
+
495
+
496
+
497
+ end
520
498
 
521
499
  ```
522
500
 

3

より具体的な質問に修正。

2020/11/05 00:02

投稿

kema
kema

スコア6

test CHANGED
File without changes
test CHANGED
@@ -44,28 +44,10 @@
44
44
 
45
45
  /*
46
46
 
47
- * This is a manifest file that'll be compiled into application.css, which will include all the files
48
-
49
- * listed below.
47
+ ### 省略 ###
50
48
 
51
49
  *
52
50
 
53
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
54
-
55
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
56
-
57
- *
58
-
59
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
60
-
61
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
62
-
63
- * files in this directory. Styles in this file should be added after the last require_* statement.
64
-
65
- * It is generally better to create a new file per style scope.
66
-
67
- *
68
-
69
51
  *= require_tree .
70
52
 
71
53
  *= require_self
@@ -284,123 +266,259 @@
284
266
 
285
267
  <body>
286
268
 
287
- <nav class="navbar navbar-light navbar-expand-md ">
288
-
289
- <a class="navbar-brand text-primary",class="h1" href="/">
290
-
291
- <div class="h3">Tiisana</div>
292
-
293
- </a>
294
-
295
- <div class="collapse navbar-collapse">
296
-
297
- <ul class="navbar-nav ml-auto">
298
-
299
- <div class="navbar-item d-flex justify-content-end align-items-center">
300
-
301
- <%= form_with(url: search_posts_path, local: true, method: :get, class: "search-form") do |form| %>
302
-
303
- <div class="input-group">
304
-
305
- <%= form.text_field :keyword, class: "search-form navop form-control" %>
306
-
307
- <%= button_tag sanitize('<i class="fa fa-search"></i>'), :type => "submit",:class =>"btn btn-light mr-1" %>
269
+ ### 省略 ###
270
+
271
+ <%= breadcrumbs separator: " &rsaquo; " %>
272
+
273
+ <%= render partial: 'layouts/flash' %>
274
+
275
+ <%= yield %>
276
+
277
+ <nav class="navbar bg-light navbar-light navbar-expand-md mt-5 fixed-bottom">
278
+
279
+ <a class="navbar-brand text-center" href="/">© 2020 Tiisana</a>
280
+
281
+ </nav>
282
+
283
+
284
+
285
+ ###以下を追加###
286
+
287
+
288
+
289
+ <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
290
+
291
+ <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
292
+
293
+ <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
294
+
295
+
296
+
297
+ </body>
298
+
299
+
300
+
301
+ </html>
302
+
303
+ ```
304
+
305
+ ###ログアウトによりビューが崩れているeach文の部分のコード
306
+
307
+ view/posts/index.html/erb
308
+
309
+ ```
310
+
311
+ <%= render partial: 'layouts/flash' %>
312
+
313
+ <div class="bg-sample">
314
+
315
+ <h3 class="text-lg-center mt-5">地球と人のつながりをもっと身近なものに。</h3>
316
+
317
+ <p class="text-lg-center text-muted">みんなの投稿で普段の生活をもっと未来につなげよう</p>
308
318
 
309
319
  </div>
310
320
 
321
+ <br>
322
+
323
+ <br>
324
+
325
+ <hr>
326
+
327
+ <% breadcrumb :root %>
328
+
329
+ <div class="container">
330
+
331
+ <div class="row">
332
+
333
+ <div class="col-md-8">
334
+
335
+ <% @posts.each do |post| %>
336
+
337
+ <div class="card mb-4">
338
+
339
+ <%= image_tag post.image.variant(resize:'300x400').processed, class: "card-img-top "%>
340
+
341
+ <div class="card-body">
342
+
343
+ <h2 class="card-title"><%= post.title %></h2>
344
+
345
+ <p class="card-text"><%= strip_tags(post.content.to_s).gsub(/[\n]/,"").strip.truncate(20)%></p>
346
+
347
+ <div class="m-2">
348
+
349
+ <%= render partial: 'posts/posts', locals: { post: post }%>
350
+
351
+ </div>
352
+
353
+ <div class="col">
354
+
355
+ <a href="/users/<%= post.user.id %>", class="d-flex justify-content-start align-items-center", style="text-decoration: none">
356
+
357
+ <% if post.user.image.attached? %>
358
+
359
+ <%= image_tag post.user.image, class:"avatar m-1"%>
360
+
361
+ <% else %>
362
+
363
+ <%= image_tag ("defo.jpg"), class:"avatar m-1"%>
364
+
365
+ <% end %>
366
+
367
+ <div class="flex-column">
368
+
369
+ <p class="h4 text-bold text-muted "><%= post.user.nickname %></p>
370
+
371
+ <span class="text-muted small">投稿日時:<%= post.created_at.to_s(:datetime_jp) %></span>
372
+
373
+ </div>
374
+
375
+ </a>
376
+
377
+ </div>
378
+
311
379
  </div>
312
380
 
313
- <% end %>
314
-
315
-
316
-
317
- <% if user_signed_in? %>
381
+ <div class="card-footer text-muted">
318
-
382
+
319
- <li class="nav-item mr-2 ">
383
+ <div class="field">
320
-
384
+
321
- <%= link_to "新規投稿", new_post_path, class: "nav-alink btn btn-light " %>
385
+ <%= link_to '詳細ページ', post, class: "btn btn-outline-secondary form-control " %>
322
-
386
+
323
- </li>
387
+ </div>
324
-
325
- <li class="nav-item dropdown">
388
+
326
-
327
- <div class="btn-group">
328
-
329
- <button class="nav-alink btn btn-light dropdown-toggle" data-toggle="dropdown" href="/" aria-haspopup="true" aria-expanded="false"><%= current_user.nickname %>
330
-
331
- </button>
389
+ </div>
332
-
333
- <div class="dropdown-menu dropdown-menu-right">
334
-
335
- <%= link_to "マイページ", "/users/#{current_user.id}", class: "dropdown-item", type:"button"%>
336
-
337
- <%= link_to "プロフィール編集", edit_user_registration_path, class: "dropdown-item", type:"button"%>
338
-
339
- <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class:"dropdown-item", type:"button"%>
340
390
 
341
391
  </div>
342
392
 
393
+ <% end %>
394
+
395
+ </div>
396
+
397
+ <div class="col-md-4">
398
+
399
+ <div class="card">
400
+
401
+ <div class="card-body">
402
+
403
+ <h5 class="card-title">タグ一覧</h5>
404
+
405
+ <h6 class="card-subtitle mb-2 text-muted">クリックで関連した記事が見れます</h6>
406
+
407
+ <% @tags.each do |tag| %>
408
+
409
+ <span class="badge badge-pill badge-info m-1 p-2">
410
+
411
+ <%= link_to tag.name, posts_path(tag_name: tag.name), class: "text-white"%>
412
+
413
+ </span>
414
+
415
+ <% end %>
416
+
417
+ <a href="#" class="card-link">Card link</a>
418
+
419
+ <a href="#" class="card-link">Another link</a>
420
+
421
+ </div>
422
+
343
423
  </div>
344
424
 
345
- <ul>
346
-
347
- </li>
425
+ </div>
426
+
348
-
427
+ </div>
428
+
429
+ </div>
430
+
431
+ <%= paginate @posts %>
432
+
433
+ <div class="container" style="margin-bottom:100px;"></div>
434
+
435
+
436
+
437
+ ```
438
+
439
+ view/users/show.html.erb
440
+
441
+ ```
442
+
443
+ <div class="container" style="margin-top:20px;">
444
+
445
+ <%= render 'userhed' %>
446
+
447
+ <hr>
448
+
449
+ <div class="album py-5 bg-light">
450
+
451
+ <% breadcrumb :user %>
452
+
453
+ <div class="container">
454
+
455
+ <div class="row">
456
+
457
+ <% @posts.each do |post| %>
458
+
459
+ <div class="col-md-4">
460
+
461
+ <div class="card text-center h-100">
462
+
463
+ <td><%= image_tag post.image.variant(resize:'300x200'), class: "card-img-top" %></td>
464
+
465
+ <h4 class="card-text"><%= post.title %></h4>
466
+
467
+ <div class="card-body ">
468
+
469
+ <%= strip_tags(post.content.to_s).gsub(/[\n]/,"").strip.truncate(20)%>
470
+
471
+ <%= render partial: 'posts/posts', locals: { post: post } %>
472
+
473
+ <div class="d-flex justify-content-between align-items-center">
474
+
475
+ <div class="btn-group mt-3 mx-auto">
476
+
477
+ <% if user_signed_in? && current_user.id == post.user_id%>
478
+
479
+ <%= link_to '編集', edit_post_path(post.id), method: :get, class: "btn btn-sm btn-outline-primary" %>
480
+
481
+ <%= link_to '削除', post, method: :delete, data: { confirm: 'Are you sure?' } , class: "btn btn-sm btn-outline-primary"%>
482
+
349
- <% else %>
483
+ <% else %>
350
-
484
+
351
- <li class="nav-item mr-2">
485
+ <%= link_to '詳細', post, class: "btn btn-sm btn-outline-primary" %>
352
-
486
+
353
- <%= link_to "ログイン", new_user_session_path, class: "nav-alink btn btn-light" %>
487
+ <%= link_to 'トップページ', posts_path, class: "btn btn-sm btn-outline-primary" %>
354
-
488
+
355
- <%= link_to "新規登録", new_user_registration_path, class: "nav-alink btn btn-light"%>
489
+ <% end %>
356
-
490
+
357
- </li>
491
+ </div>
358
-
492
+
359
- </ul>
493
+ </div>
494
+
495
+ <hr>
496
+
497
+ <small class="text-muted mt-4"><%= post.created_at.to_s(:datetime_jp) %></small>
498
+
499
+ </div>
500
+
501
+ </div>
502
+
503
+ </div>
360
504
 
361
505
  <% end %>
362
506
 
363
507
  </div>
364
508
 
365
- </nav>
366
-
367
- <%= breadcrumbs separator: " &rsaquo; " %>
368
-
369
- <%= render partial: 'layouts/flash' %>
370
-
371
- <%= yield %>
372
-
373
- <nav class="navbar bg-light navbar-light navbar-expand-md mt-5 fixed-bottom">
374
-
375
- <a class="navbar-brand text-center" href="/">© 2020 Tiisana</a>
376
-
377
- </nav>
378
-
379
-
380
-
381
- ###以下を追加###
382
-
383
-
384
-
385
- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
386
-
387
- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
388
-
389
- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
390
-
391
-
392
-
393
- </body>
394
-
395
-
396
-
397
- </html>
398
-
399
- ```
400
-
401
-
402
-
403
-
509
+ </div>
510
+
511
+ </div>
512
+
513
+ <%= paginate @posts %>
514
+
515
+ <div class="container" style="margin-bottom:200px;">
516
+
517
+
518
+
519
+
520
+
521
+ ```
404
522
 
405
523
  ### 試したこと
406
524
 

2

より具体的な質問に修正。

2020/11/04 09:51

投稿

kema
kema

スコア6

test CHANGED
File without changes
test CHANGED
@@ -428,6 +428,12 @@
428
428
 
429
429
 
430
430
 
431
+ どうやら表示が崩れている部分はeach文の部分のようですが、ログインの有無によって表示が変わる原因はわかりません。
432
+
433
+
434
+
435
+
436
+
431
437
  rails6からwebpackerが標準装備になっているということはWebpackerを使用しないとやはり不具合の原因になってしまうのでしょうか?
432
438
 
433
439
 
@@ -438,7 +444,7 @@
438
444
 
439
445
 
440
446
 
441
- 初心者ゆえ説明や理解が足りない部分もあると思いますが解決法を教えてもらえると助かす。
447
+ 初心者ゆえ説明や理解が足りない部分もあると思いますが解決法を教えてもらえるとがたいです。
442
448
 
443
449
 
444
450
 

1

文章がわかりにくかったので修正しました。

2020/11/04 09:25

投稿

kema
kema

スコア6

test CHANGED
File without changes
test CHANGED
@@ -76,6 +76,8 @@
76
76
 
77
77
 
78
78
 
79
+
80
+
79
81
  .h3{
80
82
 
81
83
  font-family: Hiragino Maru Gothic ProN W4;
@@ -104,7 +106,99 @@
104
106
 
105
107
  ```
106
108
 
107
-
109
+ /assets/stylesheets/posts/posts.scss(背景とユーザーのプロフィール画像を指定しています)
110
+
111
+ ```
112
+
113
+ .bg-sample{
114
+
115
+ height: 700px;
116
+
117
+ width: 100%;
118
+
119
+ background-image: image-url('mizu1.webp');
120
+
121
+ background-size: cover;
122
+
123
+ background-repeat: no-repeat;
124
+
125
+ background-position: center center;
126
+
127
+ align-items: flex-start;
128
+
129
+ justify-content: center;
130
+
131
+ padding: 5vh 15vw;
132
+
133
+ color: #fff;
134
+
135
+ text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
136
+
137
+ margin-top:-70px;
138
+
139
+ }
140
+
141
+
142
+
143
+
144
+
145
+ .btn {
146
+
147
+ color: black;
148
+
149
+ }
150
+
151
+
152
+
153
+ .like-link {
154
+
155
+ text-decoration: none;
156
+
157
+ }
158
+
159
+
160
+
161
+ .like-link:hover {
162
+
163
+ background-color: #fff!important;
164
+
165
+ }
166
+
167
+
168
+
169
+ .like-btn {
170
+
171
+ font-size: 15px;
172
+
173
+ color: #808080;
174
+
175
+ }
176
+
177
+
178
+
179
+ .unlike-btn {
180
+
181
+ font-size: 15px;
182
+
183
+ color: #e54747;
184
+
185
+ }
186
+
187
+
188
+
189
+ .avatar {
190
+
191
+ width: 50px;
192
+
193
+ height: 50px;
194
+
195
+ border-radius: 50%;
196
+
197
+
198
+
199
+ }
200
+
201
+ ```
108
202
 
109
203
  app/assets/javascripts/application.js
110
204
 
@@ -304,6 +398,10 @@
304
398
 
305
399
  ```
306
400
 
401
+
402
+
403
+
404
+
307
405
  ### 試したこと
308
406
 
309
407
 
@@ -322,6 +420,14 @@
322
420
 
323
421
 
324
422
 
423
+
424
+
425
+ BootstrapのCDNのみの設定でも同じように表示の崩れは治りませんでした。
426
+
427
+
428
+
429
+
430
+
325
431
  rails6からwebpackerが標準装備になっているということはWebpackerを使用しないとやはり不具合の原因になってしまうのでしょうか?
326
432
 
327
433