Railsで簡単にブログを作る2(初心者向け)

      2017/01/27

今回は見た目の部分を作っていきます

途中の方はこちらから進めてください!
Railsで簡単にブログを作る(初心者向け)

1.管理画面を作る
2.post model と post_image model を作る
3.管理画面で作業できるようにする
4.viewについては別の記事でまとめていきます

Bootstrapの導入

それでは初めていきます
まずはルートに root ‘posts#index’を追加します

localhost:4000 にアクセスすると以下の画像のような画面になると思います

このままだと見た目があんまり良くないので、bootstrapを導入して見ましょう

次はbundle installします

次は assets/stylesheets/application.css を application.css.scss に名前を変更して、中身を少し修正します

assets/javascripts/application.jsも編集します

これでbootstrapが使えるようになりました!
サーバーを再起動して確認してみます

無事に導入できていたらこんな画面になっていると思います

メニューバーの作成

次はメニューバーに以下の項目を加えていきます

  • プロフィール
  • ブログ
  • お問い合わせ

まずはメニューバーを作ります

localhost:3000で確認するとこんな画面になっています

画面を狭くしてみてください
bootstrapを使えばスマホ対応も簡単です!

日本語だとちょっとかっこ悪いので、英語でメニューバーを書きましょう

次はブログの一覧を出力できるようにしていきます

htmlぺーじの編集

Post modelの body ですが、こちらは show ページで出力するようにします

こちらがshowページのコードです

記事を書く際にWordpressみたいなマークダウンを入れてもいいのですが、ちょっとめんどくさいので、
body には html で書いていってください!
ちなみに、 @post.body の後に html_safe メソッドなしだとうまく表示されないので、気をつけてくださいね!

とりあえず、適当に投稿してみます

showページで確認してみると

こんな感じで、タグが効いてます!

ひとまずはこれで完成です!

cssに関してはほとんど触れていないので、見た目はアレですが、機能面に関しては十分だと思います
次回はプロフィール画面の作り方かコンタクトフォームあたりをやろうかと思います

こんな機能を付け加えてほしい!
といった要望などがありましたら、コメントくださいませ〜

 - Rails , , , ,