質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

2回答

3022閲覧

laravel継承先のデザインを独自に変更

goldg

総合スコア14

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

0クリップ

投稿2018/09/05 02:21

編集2018/09/13 14:17

前提・実現したいこと

laravelには、継承という便利な技がありますが、
layoutを継承したある特定なページだけの背景色を変えたい場合はどうすればよろしいでしょうか?
継承させないで書き直す以外の方法があれば教えてください。

継承先

@extends('frontend.layouts.app') @section('title', $user->name.'さんのマイページ') @section('content')

継承元

A:layouts app.blade.php <!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-'); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>@yield('title', config('app.name', 'Laravel'))</title> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> @yield('css') </head> <body> <div id="app"> <nav class="navbar navbar-expand-md navbar-light navbar-laravel"> 略 </nav> <main class="py-4"> 略 @yield('content')                     略 </main> <footer> 略 </footer> </div> <!-- Scripts --> <script src="{{ asset('js/app.js') }}"></script> @yield('scripts') </body> </html>

長いため、一部略しました。
継承先のページのCSSのみを独自に設定するには、どういったコードを入力したらよろしいでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

randr

2018/09/05 11:51

bladeのテンプレートのことですか?もう少し具体的に質問を書き直してください。あとソースコードも載せてください。
goldg

2018/09/05 12:05

A:layouts app.blade.php <!DOCTYPE html> <html lang="{{ app()->getLocale() }}"> <head> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-'); </script> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>@yield('title', config('app.name', 'Laravel'))</title> <!-- Styles --> <link href="{{ asset('css/app.css') }}" rel="stylesheet"> @yield('css') </head> <body> <div id="app"> <nav class="navbar navbar-expand-md navbar-light navbar-laravel"> 略 </nav> <main class="py-4"> 略 @yield('content')                     略 </main> <footer> 略 </footer> </div> <!-- Scripts --> <script src="{{ asset('js/app.js') }}"></script> @yield('scripts') </body> </html> B.my_page.blade.php @extends('frontend.layouts.app') @section('title', $user->name.'さんのマイページ') @section('content') <div class="mb-3" id="userShow"> @include('frontend.user.show') </div> <div class="mb-3" id="callLogsShow"> @include('frontend.call_logs.show') </div> <div class="mb-3" id="pointLogsShow"> @include('frontend.point_logs.show') </div> @endsection cssで、bodyの background-color: #fff;になっているのですが、 Bのページだけ、背景色を変えたいという意味です。 長いため、一部略しました。
guest

回答2

0

bodyタグにIDをもたせる方法はいかがでしょうか?

  • 継承元

html

1<body id="@yield('body_id', 'default')"> 2 ... 3</body>
  • 継承先

html

1@section('body_id', 'back-blue')
  • CSS

css

1 2#back-blue { 3 background-color: blue; 4} 5

投稿2018/09/20 06:20

hasue

総合スコア155

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

goldg

2018/09/30 04:11

やってみたのですが、反映されません・・・ 以下試したこと bodyにidを追加 継承先にもコピペ CSSは、scssにコピペしてからコンパイル
guest

0

ベストアンサー

私はページIDをbladeに渡して、テンプレートにlinkで{{$pageid}}.cssみたいに定義しておいて、そのCSSにページ独自で指定したい物を指定しています。
他で指定していても、上書きできるのでその方法はどうですか?

投稿2018/09/05 14:50

randr

総合スコア202

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

goldg

2018/09/08 09:32

ご回答ありがとうございます。 何となくコーディングをしていたので、テンプレートlinkで定義するの解釈がよく分かっておらず、今調べながら実装中です。
randr

2018/09/13 14:51

<link href="{{ asset('css/$pageid.css') }}" rel="stylesheet"> みたいに定義しておき、コントローラから $pageid = XXXX を渡します。 必要なければCSSは配置しなくてもOKで、必要あればXXXX.cssを配置すればできますよ。 もしくは質問にあるbladeをで「@yield('css')」が定義されているので、継承先で @push('css') <style>...</style> @endpush を書けばスタイルを変更できます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問