【Rails】シンプルなミニブログを作る！

#Step1.モデルを作成しよう

今回作成するミニブログではデータベースに三つのテーブルを作成します。

>
**・システム設定のデータ**
**・投稿記事のデータ**
**・ジャンルのデータ**

これら三つのテーブルをうまく使っていくのでそれぞれのモデルを作成します。

##Step1-A.システム設定データのモデルを作成しよう

ブログの設定情報を管理するテーブル用のモデルから作成します。ここでは以下のような項目を管理します。

>
**・ブログのタイトル**
**・サブタイトル**
**・スタイル名(使用するスタイルシートの名前→これを変更すればデザインを変えられる)**

ターミナル上で、以下のコマンドを打ちます。Railsのアプリも作っておきましょう。**//以降はターミナル上に打ち込まないでください。**

```
$ cd desktop //desktop上でminiblogを作っていきましょう
desktop ~ $ rails new miniblog
desktop ~ $ cd miniblog
miniblog ~ $ rails generate model blogconfig title:text subtitle:text stylename:text //設定データのモデルを作成
```

モデル名は「Blogconfig」にしました。項目は「title」「subtitle」「stylename」でいずれもtextにしています。

##Step1-B.ジャンルデータのモデルを作成しよう

続いてジャンルのデータを管理するテーブルのモデルを作成します。モデル名は「Bloggenre」とします。

>
**・ジャンル名**
**・説明**

ターミナル上で、以下のコマンドを打ちます。

```
$ rails generate model bloggenre name:text memo:text
```

##Step1-C.投稿データのモデルを作成しよう

最後にブログの投稿記事を管理するテーブルのモデルを用意しましょう。

>
**・タイトル**
**・リード(内容を簡単にまとめた文章)**
**・コンテンツ**
**・ジャンル(Bloggenre)のID**

ターミナル上で、以下のコマンドを打ちます。ジャンルのID(bloggenre_id)のところは**アソシエーション**を使っています。モデル名は「Blogpost」とします。

```
$ rails generate model blogpost title:text read:text content:text bloggenre_id:integer
```
bloggenre_idが、関連付けられているbloggenreのID番号を保管するための項目です。IDは通常、番号(数字)なのでintegerにしています。

>【参照】
・[【Rails初心者向け】モデル間の関連付け（アソシエーション）まとめ
](https://qiita.com/To_BB/items/47d2c7b1bc3513025d7b)

##Step1-D.マイグレーションの実行

ターミナル上で、以下のコマンドを打ちます。

```
$ rails db:migrate
```
モデルが一通りできたらマイグレーションを行いましょう。これで作成した三つのモデルのテーブルがデータベース側に準備されます。これでモデルの利用は可能です！

##Step1-E.シードの追記

もう一つモデル関係でやるべきことがあります。それはblogconfigのデータ作成です。blogconfigはブログの設定情報を記録しておくものです。シードとしてデータを追加しておき、コントローラーにはデータの追加作成は用意しないことにします。
テキストエディタでAtomを利用している方は、まずAtomを開きましょう。ターミナル上で「$ atom .」と入力すると該当フォルダをAtomで開くことも可能です。

以下のように文を追加してみてください。

```db/seed.rb
Blogconfig.create(id:1, title:'my blog', subtitle:'サンプルで作ったブログです。', stylename:'gray')
```

ファイルを保存したらターミナルを開いて以下のコマンドを打ち込んでください。これで必要なデータがテーブル上に追加されます。

```
$ rails db:seed
```
ターミナル上では特に変化がないように思えるかもしれませんがそれでOKです。

##Step1-F.モデルクラスを記述していこう！

モデル関係のファイルは一通り準備完了です。あとはコードを書いていきましょう。以下のようにファイルを編集してみてください。

```app/model/blogconfig.rb
class Blogconfig < ApplicationRecord
  validates :title, :stylename, presence: {message:'は、必須項目です。'}
end
```

```app/model/bloggenre.rb
class Bloggenre < ApplicationRecord
  has_many :blogpost

  validates :name, presence: {message:'は、必須項目です。'}
end
```

```app/model/blogpost.rb
class Blogpost < ApplicationRecord
  belongs_to :bloggenre

  validates :title, :content, presence: {message:'は、必須項目です。'}
end
```

バリデーションを用意していますが必ずしも必要ではありません。アソシエーションがとても重要です。
一応簡単に説明しておきます。「従データ側から関連付けられている主データを取り出す」場合は**「belongs_to」**というアソシエーションを使います。これは従データのモデルクラス内(今回なら、blogpost.rbのBlogpost内に)に用意します。
今回なら、「Bloggenre」が主データなのでBloggenreのモデルクラス内に**「has_many」**というアソシエーションを書いています。

---

#Step2.コントローラーの作成

続いてコントローラーの作成をしていきましょう。
今回は３つのモデルに対応したコントローラーを作っていく必要があります。

##Step2-A.blogconfigsコントローラーの作成

まずは設定データの管理を行うblogconfigsコントローラーからです。ここではindexとeditアクションを作成しておきます。新規作成と削除は不要です。ターミナル上で以下のコマンドを打ち込んでください。モデル名は「blogconfig」と単数形でしたがコントローラーは「blogconfigs」と複数形ぽくなることに注意してください。

```
$ rails generate controller blogconfigs index edit
```

##Step2-B.bloggenresコントローラーの作成

続いて、bloggenresコントローラーです。index,add,editアクションを用意しておきましょう。showやdeleteなどはここでは作成しません。ターミナル上で以下のコマンドを打ち込んでください。

```
$ rails generate controller bloggenres index add edit
```

##Step2-C.blogpostsコントローラーの作成

最後にblogpostsコントローラーの作成です。これは一通りのアクションが必要になります。ターミナル上で以下のコマンドを打ち込んでください。

```
$ rails generate controller blogposts index add edit delete
```

次に、先ほど作成したコントローラーのクラスをそれぞれ作成していきましょう。これらを全て書いてからまとめてテンプレを作成していくことにしましょう。

##Step2-D.BlogconfigsControllerクラスの作成

以下のように編集しましょう。

```app/controllers/blogconfigs_controller.rb
class BlogconfigsController < ApplicationController
  layout 'blogconfigs'

  def index
      @blogconfig = Blogconfig.find 1
  end

  def edit
      @blogconfig = Blogconfig.find 1
      if request.patch? then
        @blogconfig.update blogconfig_params
        redirect_to '/blogconfigs'
      end
  end

  private
  def blogconfig_params
    params.require(:blogconfig).permit(:title, :subtitle, :stylename)
  end

end

```
blogconfigモデルはデータがID = １の１つだけしかないという変わったデータベースです。だからデータの一覧などは不要です。
indexではID=1のデータを検索して中身を表示します。
editではID=1のデータを@blogconfigに代入しておき、patchで送信されたらblogconfig_paramsを元に@blogconfigをアップデートします。表示と更新だけしか必要ないのです。

##Step2-E.BloggenresControllerクラスの作成

以下のように編集しましょう。

```app/controllers/bloggenres_controller.rb
class BloggenresController < ApplicationController
  layout 'bloggenres'

  def index
      @data = Bloggenre.all
  end

  def add
      @bloggenre = Bloggenre.new
      if request.post? then
        @bloggenre = Bloggenre.create bloggenre_params
        redirect_to '/bloggenres'
      end

  end

  def edit
      @bloggenre = Bloggenre.find params[:id]
      if request.patch? then
        @bloggenre.update bloggenre_params
        redirect_to '/bloggenres'
      end
  end

  private
  def bloggenre_params
      params.require(:bloggenre).permit(:name, :memo)
  end

end

```


##Step2-F.BlogpostsControllerクラスの作成

以下のように編集しましょう。ブログの投稿記事を管理するためのものになります。今回はshowはカットしています。

```app/controllers/blogposts_controller.rb
class BlogpostsController < ApplicationController
  layout 'blogposts'

  def index
      @data = Blogpost.all.order('created_at desc')
  end

  def add
      @blogpost = Blogpost.new
      @genres = Bloggenre.all
      if request.post? then
        @blogpost = Blogpost.create blogposts_params
        redirect_to '/blogposts'
      end

  end

  def edit
      @blogpost = Blogpost.find params[:id]
      @genres = Bloggenre.all
      if request.patch? then
        @blogpost.update blogposts_params
        redirect_to '/blogposts'
      end
  end

  def delete
      @blogpost = Blogpost.find(params[:id])
      if request.post? then
        @blogpost.destroy
        redirect_to '/blogposts'
      end
  end

  private
  def blogposts_params
    params.require(:blogpost).permit(:title, :read, :content, :bloggenre_id)
  end

end

```

#Step3.レイアウトの作成

##Step3ーＡ.全体のテンプレートの作成
全体のテンプレートを用意します。3つのコントローラーそれぞれにテンプレを用意します。
「layouts」フォルダにそれぞれの名前のファイルを作成して以下のように編集してください。

```layouts/blogconfigs.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Miniblog</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'blogconfigs', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'blogconfigs', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

```

```layouts/bloggenres.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>Miniblog</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'bloggenres', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'bloggenres', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>

```

```layouts/blogposts.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Miniblog</title>
    <%= csrf_meta_tags %>

    <%= stylesheet_link_tag    'blogposts', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'blogposts', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= yield %>
  </body>
</html>
```
基本的に３つともほぼ同じですが、「stylesheet_link_tag」と「javascript_include_tag」に指定されている値が異なります。これらが各レイアウトごとに個別のスタイルシートとスクリプトファイルを使うようにしてあります。全部同じで構わないならどれか１つだけ作成して各コントローラーのlayoutsの値をそのレイアウト名に統一しておきましょう。


##Step3ーB.blogconfigsのテンプレートの作成

各コントローラーに用意したアクションのテンプレートを作成します。まずは、blogconfigsフォルダにあるファイルから以下のように編集してください。

```views/blogconfigs/index.html.erb
<h1>Blogconfigs#index</h1>
<p>※各ブログの設定内容</p>
<table>
  <tr><th>Title</th>
      <td><%= @blogconfig.title %></td></tr>
  <tr><th>Subtitle</th>
      <td><%= @blogconfig.subtitle %></td></tr>
  <tr><th>Stylename</th>
      <td><%= @blogconfig.stylename %></td></tr>
  </tr>
</table>
<p><a href="/blogconfigs/edit">編集画面>></a></p>

```

```views/blogconfigs/edit.html.erb
<h1>Blogconfigs#index</h1>
<p>※ブログ設定の編集</p>
<% if @blogconfig.errors.any? %>
  <ul>
    <% @blogconfig.errors.full_message.each do |err| %>
        <li><%= err %></li>
    <% end %>
  </ul>
<% end %>

<table>
  <%= form_for(@blogconfig, url:{controller:'blogconfigs', action:'edit'}) do |form| %>

  <tr><th>Title</th>
      <td><%= form.text_field :title %></td></tr>
  <tr><th>Subtitle</th>
      <td><%= form.text_field :subtitle %></td></tr>
  <tr><th>Stylename</th>
      <td><%= form.text_field :stylename %></td></tr>
  </tr>
  <tr><th></th>
      <td><%= form.submit '送信' %></td></tr>
  <% end %>
</table>

```

##Step3ーC.bloggenresのテンプレートの作成

同じように作っていきます。

```views/bloggenres/index.html.erb
<h1>Bloggenres#index</h1>
<p>※ジャンル・データの一覧</p>
<table>
  <tr>
      <th>ID</th>
      <th>name</th>
      <th>memo</th>
      <th></th>
  </tr>
  <% @data.each do |obj| %>
  <tr>
      <td><%= obj.id %></td>
      <td><%= obj.name %></td>
      <td><%= obj.memo %></td>
      <td><a href="/bloggenres/<%= obj.id %>">Edit</a></td>
  </tr>
  <% end %>

</table>
<p><a href="/bloggenres/add">新規作成>></a></p>

```

```views/bloggenres/add.html.erb
<h1>Bloggenres#add</h1>
<p>※ジャンル・データの作成</p>
<% if @bloggenre.errors.any? %>
<ul>
  <% @bloggenre.errors.full_message.each do |err| %>
      <li><%= err %></li>
  <% end %>
</ul>
<% end %>

<table>
  <%= form_for(@bloggenre, url:{controller:'bloggenres', action:'add'}) do |form| %>

  <tr><th>name</th>
      <td><%= form.text_field :name %></td></tr>
  <tr><th>memo</th>
      <td><%= form.text_field :memo %></td></tr>
  <tr><th></th>
      <td><%= form.submit "送信" %></td></tr>
  <% end %>
</table>

```

```views/bloggenres/edit.html.erb
<h1>Bloggenres#edit</h1>

<p>※「<%= @bloggenre.name %>」ジャンルの編集</p>
<% if @bloggenre.errors.any? %>
<ul>
  <% @bloggenre.errors.full_message.each do |err| %>
      <li><%= err %></li>
  <% end %>
</ul>
<% end %>

<table>
  <%= form_for(@bloggenre, url:{controller:'bloggenres', action:'edit'}) do |form| %>

  <tr><th>Title</th>
      <td><%= form.text_field :name %></td></tr>
  <tr><th>Subtitle</th>
      <td><%= form.text_field :memo %></td></tr>
  <tr><th></th>
      <td><%= form.submit "送信" %></td></tr>
  <% end %>
</table>

```

##Step3ーD.BlogpostsControllerクラスのテンプレートの作成

残るは、Blogposts内にあるテンプレートですね。

```views/blogposts/index.html.erb
<h1>Blogposts#index</h1>
<p>※投稿記事の一覧</p>
<table>
  <tr>
      <th>Id</th>
      <th>title</th>
      <th>read</th>
      <th>genre</th>
      <th colspan="2"></th>
  </tr>
  <% @data.each do |obj| %>
  <tr>
      <td><%= obj.id %></td>
      <td><%= obj.title %></td>
      <td><%= obj.read %></td>
      <td><%= obj.bloggenre.name %></td>
      <td><a href="/blogposts/<%= obj.id %>">Edit</a></td>
      <td><a href="/blogposts/delete/<%= obj.id %>">Delete</a></td>
  </tr>
  <% end %>

</table>
<p><a href="/blogposts/add">新規作成>></a></p>

```

```views/blogposts/add.html.erb
<h1>Blogposts#add</h1>
<p>※ジャンル・データの作成</p>
<% if @blogpost.errors.any? %>
<ul>
  <% @blogpost.errors.full_message.each do |err| %>
      <li><%= err %></li>
  <% end %>
</ul>
<% end %>

<table>
  <%= form_for(@blogpost, url:{controller:'blogposts', action:'add'}) do |form| %>

  <tr><th>Title</th>
      <td><%= form.text_field :title %></td></tr>
  <tr><th>Read</th>
      <td><%= form.text_field :read %></td></tr>
  <tr><th>Content</th>
      <td><%= form.text_area :content, {cols:40, rows:10} %></td></tr>
  <tr><th>Genre ID</th>
      <td><%= form.text_field :bloggenre_id %></td></tr>
  <tr><th></th>
      <td><%= form.submit "送信" %></td></tr>
  <% end %>
</table>

<hr>
<p></p>
<table>
    <tr>
        <th>Id</th><th>Genre</th>
    </tr>
    <% @genres.each do |obj| %>
    <tr>
        <td><%= obj.id %></td>
        <td><%= obj.name %></td>
    </tr>
    <% end %>
</table>

```
「hr」とは「horizontal rule（水平方向の罫線）」の略で、水平の横線を引くためのタグです。


```views/blogposts/edit.html.erb
<h1>Blogposts#edit</h1>

<p>※「<%= @blogpost.title %>」の編集</p>
<% if @blogpost.errors.any? %>
<ul>
  <% @blogpost.errors.full_messages.each do |err| %>
      <li><%= err %></li>
  <% end %>
</ul>
<% end %>

<table>
  <%= form_for(@blogpost, url:{controller:'blogposts', action:'edit'}) do |form| %>

  <tr><th>name</th>
      <td><%= form.text_field :title %></td></tr>
  <tr><th>memo</th>
      <td><%= form.text_field :read %></td></tr>
  <tr><th>message</th>
      <td><%= form.text_area :content, {cols:40, rows:10} %></td></tr>
  <tr><th>Genre ID</th>
      <td><%= form.text_field :bloggenre_id %></td></tr>
  <tr><th></th>
      <td><%= form.submit "送信" %></td></tr>
  <% end %>
</table>

<hr>
<p></p>
<table>
  <tr>
      <th>Id</th><th>Genre</th>
  </tr>
  <% @genres.each do |obj| %>
  <tr>
      <td><%= obj.id %></td>
      <td><%= obj.name %></td>
  </tr>
  <% end %>
</table>

```

```views/blogposts/delete.html.erb
<h1>Blogposts#delete</h1>
<p>※投稿記事の一覧</p>
<table>
  <tr>
      <th>Id</th>
      <td><%= @blogpost.id %></td>
  </tr>
  <tr>
      <th>title</th>
      <td><%= @blogpost.title %></td>
  </tr>
  <tr>
      <th>read</th>
      <td><%= @blogpost.read %></td>
  </tr>
  <tr>
      <th>content</th>
      <td><%= @blogpost.content %></td>
  </tr>
</table>

<%= form_tag controller: "blogposts", action: "delete" do %>
  <%= hidden_field_tag "id", {value: @blogpost.id} %>
  <%= submit_tag "送信" %>
<% end %>　

```

hidden_field_tagというもので作成された非表示フィールドがありますね。ここにID番号を保管しておき、送信先のdeleteでそのIDのデータを削除するようにしています。


#Step4.Blogsを作っていこう！

##Step４ーA.ブログのコントローラーの作成

これでそれぞれのモデルとそのコントローラーが完成しました。ただ、これまでのものは「ブログの裏側で使うもの」でした。投稿者が利用するためのツールの部分で、実際のブログはこうして作成されたデータをもとに表示されるものになります。これは新たなコントローラーとして用意しておく必要があります。

```
$ rails generate controller blogs index genre show
```
ブログのページは「blogs」というコントローラーを用意します。アクションとして全体を表示するindex、ジャンルごとの表示をするgenre、選択した記事のコンテンツを表示するshowを用意しておきましょう。

##Step４ーB.BlogsControllerクラスの作成

```app/controller/blogs_controller.rb
class BlogsController < ApplicationController
  layout 'blogs'

  def index
      page_size = 5
      @page_num = 0
      if params[:page] != nil then
          @page_num = params[:page].to_i
      end
      @data = Blogpost.all.order('created_at desc')
          .offset(page_size * @page_num)
          .limit(page_size)
      @blogconfig = Blogconfig.find 1
  end

  def genre
    page_size = 5
    @page_num = 0
    if params[:page] != nil then
        @page_num = params[:page].to_i
    end
    @genre = Bloggenre.find params[:id]
    @data = Blogpost.where('bloggenre_id = ?',params[:id])
        .order('created_at desc')
        .offset(page_size * @page_num)
        .limit(page_size)
    @blogconfig = Blogconfig.find 1
  end

  def show
    @blogpost = Blogpost.find params[:id]
    @blogconfig = Blogconfig.find 1
  end
end

```

**indexアクション**はブログのトップページになります。ここでは投稿したデータを日付の新しいものから順に表示するようにしています。
offsetとlimitというメソッドを使い、**page_size * @page_num**の位置からpage_sizeの数だけデータを取り出しています。これは一定数ごとにページ分けをして表示するためのテクニックです。ページ分けをして表示する場合、画面に表示するデータは「現在のページ数＊１ページあたりのページ数」番目から「１ページあたりのページ数」個だけを取り出すことになります。

**genreアクション**では指定されたID番号のジャンルのデータだけを表示します。

```
@data = Blogpost.where('bloggenre_id = ?',params[:id])
        .order('created_at desc')
        .offset(page_size * @page_num)
        .limit(page_size)
```
検索の条件に、**where('bloggenre_id = ?',params[:id])**と指定してあります。これで、bloggenre_idの値が送られたidと同じものだけを検索可能です。

#Step４ーB.blogsのテンプレートの作成

では、テンプレートを作っていきましょう。

```views/blogs/index.html.erb
<% @data.each do |obj| %>
  <h3 class="top_title"><a href="/blogs/show/<%= obj.id %>">
    <%= obj.title %></a></h3>
  <p class="top_read"><%= obj.read %><span class="top_created">
    (<%= obj.created_at %>)</span></p>
  <hr>
<% end %>
<div class="navigate">
    <% if @page_num > 0 then %>
      <a href="/blogs/<%= @page_num -1 %>"> ＜＜前のページへ</a>
    <% end %>
    <span> </span>
    <a href="/blogs/<%= @page_num +1 %>"> 次のページへ＞＞</a>
</div>

```

```views/blogs/genre.html.erb
<h2><%= @genre.name %></h2>
<% @data.each do |obj| %>
  <h3 class="top_title"><a href="/blogs/show/<%= obj.id %>">
    <%= obj.title %></a></h3>
  <p class="top_read"><%= obj.read %><span class="top_created">
    (<%= obj.created_at %>)</span></p>
  <hr>
<% end %>
<div class="navigate">
    <% if @page_num > 0 then %>
      <a href="/blogs/genre/<%= @genre.id.to_s + '/' + (@page_num - 1).to_s %>"> ＜＜前のページへ</a>
    <% end %>
    <span> </span>
    <a href="/blogs/genre/<%= @genre.id.to_s + '/' + (@page_num + 1).to_s %>"> 次のページへ＞＞</a>
</div>

```

```views/blogs/show.html.erb
<h3 class="show_title"><%= @blogpost.title %></h3>
<p class="show_read"><%= @blogpost.read + '[' + @blogpost.bloggenre.name + ']' %></p>
<% contents = @blogpost.content.split "\n" %>
<div class="show_content">
<% contents.each.do |paragraph| %>
  <p><%= paragraph %></p>
<% end %>
</div>
<p class="show_created">(<%= @blogpost.created_at %>)</p>

```

##Step４ーC.blogs.html.erbのテンプレートの作成

次に、ページ全体のレイアウト用のテンプレートを作成する必要があります。以下のように新しいファイルをlayoutsフォルダの中に作成して下さい。

```views/layouts/blogs.html.erb
<!DOCTYPE html>
<html>
  <head>
      <title>miniblog</title>
      <%= csrf_meta_tags %>
      <%= stylesheet_link_tag 'blogs', 'data-turbolinks-track': 'reload' %>
      <%= stylesheet_link_tag @blogconfig.stylename,'data-turbolinks-track': 'reload' %>
      <%= javascript_include_tag 'blogs', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <header id = "header">
        <h1><a href="/blogs"><%= @blogconfig.title %></a></h1>
        <h2><%= @blogconfig.subtitle %></h2>
    </header>
    <hr>
    <div id="side">
    <% Bloggenre.all.each do |genre| %>
        <p><a href="/blogs/genre/<%= genre.id %>">
              <%= genre.name %></a></p>
    <% end %>
    </div>
    <main id="main">
      <%= yield %>
    </main>
  </body>
</html>

```

#Step5.その他整理！
##Step５-A.スタイルシートの作成

これで一通りのファイルができました。次にスタイルシートを作っておきましょう。
このブログでは、 Blogconfigのstylenameでスタイル名を指定するとそれが読み込まれるようになっています。assetsフォルダ内のstylesheestフォルダの中に、サンプルとして「gray.scss」という名前でファイルを作成してください！

```assets/stylesheets/gray.scss
body{
  color: darkgray;
  font-size: 14pt;
  margin: 10px 20px;
}
#header{}
#main{
  width: 75%;
  float: left;
}
#side{
  width: 20%;
  float: right;
}

h1{
  color: darkgray;
  font-size: 28pt;
  margin: 30px 0px 70px 0px;
}
h2{
  color: darkgray;
  font-size: 14pt;
  margin: 50px 0px;
}
hr{
  display: block;
  height: 2px;
  background-color: #eee;
  border: 0;
  margin: 50px 0px 0px 0px;
}

a{
  color: darkgray;
  text-decoration: none;
}

a:hover{
  color: darkgray;
  text-decoration: underline;
}

.top_title{
  color: darkgray;
  font-size: 18pt;
  margin: 25px 0px;
}

.top_read{
  color: darkgray;
  font-size: 12pt;
  margin: 0px 0px 25px 50px;
}

.top_created{
  font-size: 9pt;
}

.show_title{
  color: darkgray;
  font-size: 18pt;
  margin: 25px 0px;
}

.show_read{
  color: darkgray;
  font-size: 12pt;
  margin: 50px 20px;
}

.show_content{
  color: darkgray;
  font-size: 12pt;
  margin: 20px;
}

.show_created{
  text-align: right;
  font-size: 10pt;
}

.navigate{
  text-align: center;
  font-size: 10pt;
  margin: 50px;
}
```
##Step５-B.assets.rbの追記

スタイルシートはファイルを用意しておくだけではstylesheet_link_tagで読み込めないです。config内の「initializers」フォルダ内にある「」に設定を追加しておきましょう。

```config/initializers/assets.rb
Rails.application.config.assets.precompile += %w( gray.scss)

Rails.application.config.assets.precompile += %w( blogconfigs.scss)
Rails.application.config.assets.precompile += %w( blogconfigs.js)

Rails.application.config.assets.precompile += %w( bloggenres.scss)
Rails.application.config.assets.precompile += %w( bloggenres.js)

Rails.application.config.assets.precompile += %w( blogposts.scss)
Rails.application.config.assets.precompile += %w( blogposts.js)

Rails.application.config.assets.precompile += %w( blogs.scss)
Rails.application.config.assets.precompile += %w( blogs.js)

```

#Step６.ルーティングの設定

```routes.rb
Rails.application.routes.draw do
  get 'blogs/index'
  get 'blogs', to: 'blogs#index'
  get 'blogs/:page', to:'blogs#index'

  get 'blogs/genre'
  get 'blogs/genre/:id', to: 'blogs#genre'
  get 'blogs/genre/:id/:page', to: 'blogs#genre'

  get 'blogs/show'
  get 'blogs/show/:id', to: 'blogs#show'

  get 'blogposts/index'
  get 'blogposts', to: 'blogposts#index'

  get 'blogposts/delete'
  get 'blogposts/delete/:id', to: 'blogposts#delete'
  post 'blogposts/delete', to: 'blogposts#delete'
  post 'blogposts/delete/:id', to: 'blogposts#delete'

  get 'blogposts/add'
  post 'blogposts/add'

  get 'blogposts/edit'
  get 'blogposts/:id', to: 'blogposts#edit'
  patch 'blogposts/:id', to: 'blogposts#edit'


  get 'bloggenres/index'
  get 'bloggenres', to:'bloggenres#index'

  get 'bloggenres/add'
  post 'bloggenres/add'

  get 'bloggenres/edit'
  get 'bloggenres/:id', to: 'bloggenres#edit'
  patch 'bloggenres/:id', to: 'bloggenres#edit'

  get 'blogconfigs/index'
  get 'blogconfigs', to: 'blogconfigs#index'

  get 'blogconfigs/edit'
  patch 'blogconfigs/edit'

  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

```

これで完成すると思います。こんな感じで表示されます。ジャンルの新規作成も投稿の新規作成、編集なども可能です。見た目が地味なので、改良してみるのも良いと思います。

![miniblog_🔊.png](https://qiita-image-store.s3.amazonaws.com/0/200663/86a9eb30-d8f5-d2d9-db59-7e402bea8625.png)



>参考文献
「Ruby on rails5」超入門