画像やらボタンやら

前回の内容でチラ見せしてたトップページの画像。

live_efecterのコピー.jpeg

もちろん個人的にこんな綺麗な画像を撮れるわけもなく フリー素材を使用させていただきました。 (若干の加工は入れてます。)

なかなか、ええエフェクター使っとりますなぁ・・←そこはどうでもいい。

著作権の関係とかもありそうだからいづれはちゃんと個人で撮影とかしよう。

 

とりあえず、この素材を元にスクリーンショット 2017-07-27 12.37.13.png

こんな感じに少しだけちゃんとしたサイトっぽくしていく

 

下調べしてる段階で出会ったgemが「bootstrap」とかいうやつ。 これが画像までのあたりをいい感じにしてくれるみたい

 

なんにせよ、gemなのでgemfileに「bootstrap-sass」を書き込んでインストール。

インストールできたら今度は「application.css」のファイルを 「application.scss」にファイル名を変更。

多分中身は何も書かれていないはずなので(すんません。この辺りどうやったか忘れてしまった)

@import "bootstrap-sprockets"; @import "bootstrap";

これを入れて、そんでもって次に「application.js」の最後の方に

//= require jquery //= require bootstrap-sprockets

この二行を書き込む。 これでbootstrapの基本的な準備が完了らしい。

 

で、さっきの画像をプロジェクトのimageディレクトリにそのままコピー。 たったこれだけで画像の読み込みとかを可能にできるんだからほんと魔法。

 

これで全体的な下準備ができたので さっきの「application.scss」にコードを書き込む。

.jumbotron { padding-top: 0px; // 背景画像を暗くする background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.05) ),url(画像ファイル名); background-size: cover; // 背景画像の位置を決める background-position: 50% 50%; height: 420px; } .jumbotron .container .row{ margin-top: 50px; color: #fff; } .navbar-default { background: transparent; border-color: transparent; z-index: 10; } .navbar-default .navbar-nav > li > a { color: white; font-size: 13px; } .navbar-default .navbar-brand { color: white; } .navbar-default .navbar-toggle .icon-bar { background-color: #fff; }

なんか、いきなりちゃんとしたプログラムっぽいことしてるやん。 ※安心してください。コピペです。

ここで出てきた見慣れん単語 「jumbotron」と「navbar」

jumbotronが画像の位置付けの役割で navbarが文字をリンクにしてなおかつブラウザの画面に応じてボタンにしてくれたりと なんとも便利すぎる機能のよう。マジ魔法。

ただ、このままだと実際に反映されるわけではないので 「index.html.erb」に長々としたコードを記入。。

<!-- Collect the nav links, forms, and other content for toggling --> <!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav>

人と、音楽を、繋ぐ。

</div> </div> </div>

正直、これもコピペ。 ナンノコッチャかわかりませんねん←あかんやつやん・・

でもまぁ後々わかってくるだろう(希望的観測)

というところで一旦サーバを再起動してブラウザチェック。 (まぁもう最初の時点でわかってるけど・・)

反映されてるのを確認したらこれで見た目的にはひとまず落ち着いたかな。

よし、キリがいいのでここまで!

 

ではー。

この記事をシェアする