0
私のブログのウェブサイトから私の "新しい投稿"と "ログアウト"ボタンがヘッダーの右側にくるようにします。Ruby on Rails - ブログのウェブサイト上のボタンの位置 - SASS
<!DOCTYPE html>
<html>
<head>
<title>Blog</title>
<%= csrf_meta_tags %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application' , 'http://fonts.googleapis.com/css?family=Raleway:400,700' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<div id="sidebar">
<div id="logo">
<%= link_to root_path do%>
<%= image_tag "logo.svg" %>
<% end %>
</div>
<ul>
<li class="category">Website</li>
<li><%= link_to "Blog", root_path %></li>
<li>About</li>
</ul>
<ul>
<li class="category">Social</li>
<li><a href="">Facebook</a></li>
<li><a href="">GitHub</a></li>
<li><a href="">Gmail</a></li>
</ul>
<p class="sign_in">Admin Login</p>
</div>
</div>
<div id="main_content">
<div id="header">
<p>All posts</p>
<div class="bottons">
<button class="button"><%= link_to "New Post", new_post_path %>
</button>
<button class="button">Log Out</button>
</div>
</div>
<% flash.each do |name, msg| %>
<%= content_tag(:div, msg, class: "alert") %>
<% end %>
<%= yield %>
</div>
</body>
</html>
"application.css.scss" ファイル：
@import 'normalize';
html, body {
font-family: 'Raleway', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
}
a {
text-decoration: none;
color: inherit;
}
#sidebar {
width: 250px;
position: fixed;
left: 0;
top: 0;
height: 100%;
background: #f5f7f9;
padding: 7em 0 0 0;
border-right: 1px solid #d6dce0;
#logo {
width: 40px;
position: absolute;
right: 3em;
top: 3em;
}
ul {
list-style: none;
text-align: right;
padding-right: 3em;
.category {
font-weight: 700;
font-size: 0.7em;
text-transform: uppercase;
color: #33acb7;
}
li {
padding: .5em 0;
a {
color: #9eafba;
text-decoration: none;
transition: all .4s ease;
&:hover {
color: #33acb7;
}
}
}
.active {
a {
color: #33acb7;
}
}
}
.sign_in {
position: absolute;
right: 3em;
top: 80%;
font-size: .8em;
color: #9eafba;
}
}
.button {
outline: none;
background: transparent;
border: 1px solid #d6dce0;
padding: .5em 1.5em;
border-radius: 1.5em;
&:hover {
border: 1px solid #33acb7;
color: #33acb7;
a {
color: #33acb7 !important;
}
}
}
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
#main_content {
margin-left: 250px;
#header {
padding: 1em 3em;
border-bottom: 1px solid #d6dce0;
background: #f5f7f9;
color: #9eafba;
p {
display: inline;
}
a {
color: #9eafba;
text-decoration: none;
}
.buttons {
float: right;
margin-top: -6px;
.button {
font-size: .8em;
margin-left: .5em;
}
}
}
.post_wrapper {
padding: 3em;
border-bottom: 1px solid #d6dce0;
.title {
margin: 0;
a {
font-weight: 500;
text-decoration: none;
color: #2a2f35;
font-size: 1.5em;
&:hover {
color: #33acb7;
}
}
}
.date_and_author {
color: #9eafba;
margin: .5em 0 0 0;
}
}
#post_content {
padding: 1em 3em;
.title {
font-weight: 500;
text-decoration: none;
color: #2a2f35;
font-size: 2.5em;
margin-bottom: 0;
}
.body {
font-size: 1.1em;
line-height: 1.75;
}
.date_and_author {
color: #9eafba;
margin: .5em 0 2em 0;
}
#comments {
h2 {
margin: 3em 0 1em 0;
border-bottom: 1px solid #d6dce0;
padding-bottom: 0.5em;
}
h3 {
margin-top: 2em;
}
.comment {
border-bottom: 1px solid #d6dce0;
padding: 1.5em 2em;
.clear_both {
clear: both;
}
&:after {
clear: both;
}
.comment_content {
float: left;
.comment_name {
margin: 1em 0 0 0;
font-size: 0.7em;
text-transform: uppercase;
}
.comment_body {
font-size: 1.2em;
margin: 0.2em 0 0 0;
}
.comment_time {
margin-top: 1.2em;
font-size: .8em;
}
}
.button {
float: right;
}
}
input[type="text"], textarea {
width: 50%;
}
}
}
#page_wrapper {
padding: 3em;
#profile_image {
width: 300px;
float: left;
margin-right: 2em;
img {
width: 100%;
border-radius: 0.35em;
}
}
#content {
h1 {
font-weight: 500;
}
p {
font-size: 1.1em;
line-height: 1.75;
}
a {
color: #33acb7;
font-weight: 700;
text-decoration: none;
}
}
}
.links {
margin: 2em 0;
}
input[type="text"], input[type="email"], input[type="password"], textarea {
width: 90%;
border: 1px solid #d6dce0;
border-radius: .35em;
margin-top: 10px;
padding: .5em 1em;
line-height: 1.75;
}
input[type="text"] {
height: 35px;
}
textarea {
min-height: 180px;
}
input[type="submit"] {
outline: none;
background: transparent;
border: 1px solid #d6dce0;
padding: .5em 1.5em;
font-size: 1.1em;
border-radius: 1.5em;
margin-left: .5em;
&:hover {
border: 1px solid #33acb7;
color: #33acb7;
}
}
}
"application.html.erb" ファイル... "すべての記事" の下、左側にあり
これらのボタンを右に動かしてください。ありがとうございました！ありがとうございました！ありがとうございました！ありがとうございます！ありがとうございます！ありがとうございます！ ！ありがとう！ありがとう！ありがとう！ありがとう！ありがとう！ありがとう！ありがとう！ありがとう！ありがとう！ありがとう！ありがとう！