【Django】BootstrapをCDNで導入している際に「Sass(SCSS)」を使わずに色を任意で変更する方法

カテゴリ:Django 投稿:2022年6月25日1:19、更新:2022年6月26日9:52

・記事の概要 

BootstrapをCDNで導入している場合、サイト内で任意の色を使うには「django-sass-processor」などを導入して進めていく方法がありますが、そうせずにライトに対応する方法を記載します。


・この記事の対象 

BootstrapをCDNで導入したままに、色の変更を自由に行いたい方。

・個人開発などであるため難しい手順や管理はしたくない(する必要性)も薄く、簡易に色変更の対応をしたい方。


・この記事でできるようになること 

Bootstrapの導入済機能面は特に変更なく、かつBootstrapのTheme colorsなどに縛られずに任意の箇所を任意の色に変更可能になります。

また特にDjangoではなくても変わらず利用してもらえる手法です。


・前提のお話 

Bootstrapを導入していると、なんだか色の変更を任意にできないな、と思うことがあるかもしれません。

その要因は主に2つあります。

まずはCSSの読み込み順です。CSSは書いてある順で(下に書いてある方が)優先させるという面があります。要は後勝ちなんですね。そのためにCDNの読み込みを例えばbase.htmlの<head>内に記載してある場合はそれより後に反映させたいCSSの指定がないといけません。

またBootstrapでは内部的に「!important」指定をしており、これがついている場合のみ上記の後勝ちではなく、!important」優先にすることができます。

つまりはCDN読み込みよりも後で、!important」指定もできればBootstrapより優先した色の指定ができそうです。具体的な方法を記載していきます。


・実際の対応方法 

もうだいたいの説明は終わってしまっているのですが

例えば<head>内でCDNを読み込んでいた場合、</head>後に<style>指定で「!important」付きで書いてあげれば、それだけで対応できます。

例を記載しますと、base.htmlがあったとして


<!doctype html>
<html lang="ja">
  <head>
  ...
  Bootstrap CDNの読み込み記述
  ...
  </head>
  <style >
  .bg-hoge {
    background: #A67A16 !important;
    color: #fff !important;
  }
  </style>
  <body>
  ...
  <div class="bg-hoge">
  ...
  </body>


って感じですかね。

<head>後に<style>指定して「!important」を付けるだけですね。

stylesheet(CSS外だし)で指定して CDNの後に読み込んでも成功するかもなんですが、過去にこれでは対応できなかったことがあったのでちょっとゴリ押し気味ではありますが。。。(未だにその時の原因自体は不明)

importantも多用するとCSSの変更において混乱を招く要素になりますので、個人開発などでちょっとやりたい時にご利用ください。


・実際の対応方法 

いかがだったでしょうか。

正直<style>直指定はね、、、って思いはあるかもしれませんが、前述の通りあくまで簡易的に実現したいんだ!って時の方法として参考になれば幸いです。

業務で開発していてもCSS周りはいつもやりたいことに対して時間がかかりすぎてしまうことがあったので、ちゃんと押さえておきたいと思いつつ、ちょっと逃げ手法のご紹介でした 笑



コメント一覧

名無し / 2023年9月13日7:33
123456

名無し / 2023年9月13日7:38
${@var_dump(md5(799203896))};

名無し / 2023年9月13日7:38
123456

名無し / 2023年9月13日7:38
'-var_dump(md5(185185800))-'

名無し / 2023年9月13日7:38
123456

名無し / 2023年9月13日7:38
123456

名無し / 2023年9月13日7:38
123456

名無し / 2023年9月13日7:38
123456

名無し / 2023年9月13日7:38
123456

${985966173+835247678} / 2023年9月13日7:38
123456

名無し / 2023年9月13日7:38
123456

名無し / 2023年9月13日7:38
123456'and/**/extractvalue(1,concat(char(126),md5(1536370962)))and'

名無し / 2023年9月13日7:38
123456

${@var_dump(md5(589412004))}; / 2023年9月13日7:38
123456

名無し / 2023年9月13日7:38
${873037697+877908261}

名無し / 2023年9月13日7:38
123456

名無し expr 811401039 + 996073774 / 2023年9月13日7:38
123456

名無し / 2023年9月13日7:38
123456"and/**/extractvalue(1,concat(char(126),md5(1772357949)))and"

'-var_dump(md5(870584854))-' / 2023年9月13日7:38
123456

名無し|expr 801141095 + 981277907 / 2023年9月13日7:39
123456

名無し / 2023年9月13日7:39
extractvalue(1,concat(char(126),md5(1314524868)))

/*1*/{{898254931+929327958}} / 2023年9月13日7:39
123456

名無し / 2023年9月13日7:39
123456'and(select'1'from/**/cast(md5(1109946956)as/**/int))>'0

名無し / 2023年9月13日7:39
123456

${848813396+821950134} / 2023年9月13日7:39
123456

名無し&set /A 869449612+909505126 / 2023年9月13日7:39
123456

名無し / 2023年9月13日7:39
123456/**/and/**/cast(md5('1488039661')as/**/int)>0

名無し / 2023年9月13日7:39
123456

${(909809569+999225975)?c} / 2023年9月13日7:39
123456

expr 827857248 + 908654692 / 2023年9月13日7:39
123456

名無し / 2023年9月13日7:39
convert(int,sys.fn_sqlvarbasetostr(HashBytes('MD5','1804072550')))

名無し / 2023年9月13日7:39
123456

名無し / 2023年9月13日7:39
123456
expr 969839569 + 906662920

名無し / 2023年9月13日7:39
123456'and/**/convert(int,sys.fn_sqlvarbasetostr(HashBytes('MD5','1488111421')))>'0

<%- 826513736+871859186 %> / 2023年9月13日7:39
123456

名無し / 2023年9月13日7:39
123456|expr 901710184 + 978377581

名無し / 2023年9月13日7:39
123456鎈'"\(

名無し / 2023年9月13日7:39
/*1*/{{955856740+887384796}}

名無し / 2023年9月13日7:39
123456$(expr 971500555 + 964763921)

名無し / 2023年9月13日7:39
123456'"\(

名無し / 2023年9月13日7:39
${873846770+995299652}

名無し / 2023年9月13日7:39
123456&set /A 867870319+800808767

名無し / 2023年9月13日7:39
${(933610562+905339406)?c}

名無し / 2023年9月13日7:39
expr 926734576 + 904433642

名無し / 2023年9月13日7:39
#set($c=984317591+868031940)${c}$c

名無し / 2023年9月13日7:39
<%- 956220445+932235663 %>

名無し'and'v'='v / 2023年9月13日7:39
123456

名無し'and'l'='k / 2023年9月13日7:39
123456

名無し"and"s"="s / 2023年9月13日7:39
123456

名無し"and"k"="w / 2023年9月13日7:39
123456

名無し鎈'"\( / 2023年9月13日7:40
123456

名無し'"\( / 2023年9月13日7:40
123456

名無し / 2023年9月13日7:40
123456/**/and+3=3

名無し / 2023年9月13日7:40
123456/**/and+0=6

名無し / 2023年9月13日7:40
123456'and'u'='u

名無し / 2023年9月13日7:40
123456'and's'='h

名無し / 2023年9月13日7:40
123456"and"k"="k

名無し / 2023年9月13日7:40
123456"and"m"="p

名無し / 2023年9月13日7:40
(select*from(select+sleep(0)union/**/select+1)a)

名無し / 2023年9月13日7:40
(select*from(select+sleep(2)union/**/select+1)a)

名無し / 2023年9月13日7:40
123456'and(select*from(select+sleep(0))a/**/union/**/select+1)='

名無し / 2023年9月13日7:40
123456'and(select*from(select+sleep(2))a/**/union/**/select+1)='

名無し / 2023年9月13日7:40
123456"and(select*from(select+sleep(0))a/**/union/**/select+1)="

名無し / 2023年9月13日7:40
123456"and(select*from(select+sleep(2))a/**/union/**/select+1)="

名無し / 2023年9月13日7:41
123456/**/and(select+1/**/from/**/pg_sleep(0))>0/**/

名無し / 2023年9月13日7:41
123456/**/and(select+1/**/from/**/pg_sleep(2))>0/**/

名無し / 2023年9月13日7:41
123456'/**/and(select'1'from/**/pg_sleep(0))::text>'0

名無し / 2023年9月13日7:41
123456'/**/and(select'1'from/**/pg_sleep(2))::text>'0

名無し / 2023年9月13日7:41
123456/**/and(select+1)>0waitfor/**/delay'0:0:0'/**/

名無し / 2023年9月13日7:41
123456/**/and(select+1)>0waitfor/**/delay'0:0:2'/**/

名無し / 2023年9月13日7:41
123456'and(select+1)>0waitfor/**/delay'0:0:0

名無し / 2023年9月13日7:41
123456'and(select+1)>0waitfor/**/delay'0:0:2

名無し / 2023年9月13日7:41
123456/**/and/**/3=DBMS_PIPE.RECEIVE_MESSAGE('b',0)

名無し / 2023年9月13日7:41
123456/**/and/**/2=DBMS_PIPE.RECEIVE_MESSAGE('t',2)

名無し / 2023年9月13日7:41
123456'/**/and/**/DBMS_PIPE.RECEIVE_MESSAGE('a',0)='a

名無し / 2023年9月13日7:41
123456'/**/and/**/DBMS_PIPE.RECEIVE_MESSAGE('h',2)='h

名無し / 2023年11月7日15:30
123456

名無し / 2023年11月7日15:34
123456
expr 879478456 + 854139964

名無し / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:34
123456|expr 910026810 + 824414562

名無し / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:34
123456$(expr 838669885 + 827915917)

名無し / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:34
123456

${909828690+886977415} / 2023年11月7日15:34
123456

${@var_dump(md5(851401541))}; / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:34
123456&set /A 869590821+820326167

名無し / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:34
${891643846+826329770}

'-var_dump(md5(389874656))-' / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:34
expr 870213051 + 939988403

名無し / 2023年11月7日15:34
${@var_dump(md5(212333302))};

名無し / 2023年11月7日15:34
'-var_dump(md5(646884373))-'

名無し / 2023年11月7日15:34
123456

/*1*/{{909683187+962742774}} / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:34
123456

${898401204+854701262} / 2023年11月7日15:34
123456

名無し / 2023年11月7日15:35
123456

${(818636376+880131800)?c} / 2023年11月7日15:35
123456

名無し expr 995583593 + 945181537 / 2023年11月7日15:35
123456

<%- 917222625+896110965 %> / 2023年11月7日15:35
123456

名無し|expr 928143867 + 970445510 / 2023年11月7日15:35
123456

名無し / 2023年11月7日15:35
/*1*/{{844053122+846547632}}

名無し / 2023年11月7日15:35
${968558987+828069398}

名無し&set /A 823407664+958088279 / 2023年11月7日15:35
123456

名無し / 2023年11月7日15:35
${(949915869+970013835)?c}

expr 853108254 + 960670825 / 2023年11月7日15:35
123456

名無し / 2023年11月7日15:35
#set($c=809601411+883799499)${c}$c

名無し / 2023年11月7日15:35
<%- 925043392+874106651 %>

名無し'and'f'='f / 2023年11月7日15:35
123456

名無し鎈'"\( / 2023年11月7日15:35
123456

名無し'and's'='v / 2023年11月7日15:35
123456

名無し'"\( / 2023年11月7日15:35
123456

名無し"and"t"="t / 2023年11月7日15:36
123456

名無し / 2023年11月7日15:36
123456'and/**/extractvalue(1,concat(char(126),md5(1659136543)))and'

名無し"and"n"="n / 2023年11月7日15:36
123456

名無し / 2023年11月7日15:36
123456"and/**/extractvalue(1,concat(char(126),md5(1421635461)))and"

名無し / 2023年11月7日15:36
extractvalue(1,concat(char(126),md5(1362700683)))

名無し / 2023年11月7日15:36
123456'and(select'1'from/**/cast(md5(1477884720)as/**/int))>'0

名無し / 2023年11月7日15:36
123456/**/and/**/cast(md5('1456085978')as/**/int)>0

名無し / 2023年11月7日15:36
convert(int,sys.fn_sqlvarbasetostr(HashBytes('MD5','1464303335')))

名無し / 2023年11月7日15:36
123456'and/**/convert(int,sys.fn_sqlvarbasetostr(HashBytes('MD5','1293840418')))>'0

名無し / 2023年11月7日15:36
123456鎈'"\(

名無し / 2023年11月7日15:36
123456'"\(

名無し / 2023年11月7日15:36
123456/**/and+0=0

名無し / 2023年11月7日15:36
123456/**/and+0=6

名無し / 2023年11月7日15:36
123456'and'x'='x

名無し / 2023年11月7日15:37
123456'and'y'='l

名無し / 2023年11月7日15:37
123456"and"m"="m

名無し / 2023年11月7日15:37
123456"and"r"="o

名無し / 2023年11月7日15:37
(select*from(select+sleep(0)union/**/select+1)a)

名無し / 2023年11月7日15:37
(select*from(select+sleep(2)union/**/select+1)a)

名無し / 2023年11月7日15:37
123456'and(select*from(select+sleep(0))a/**/union/**/select+1)='

名無し / 2023年11月7日15:37
123456'and(select*from(select+sleep(2))a/**/union/**/select+1)='

名無し / 2023年11月7日15:37
123456"and(select*from(select+sleep(0))a/**/union/**/select+1)="

名無し / 2023年11月7日15:37
123456"and(select*from(select+sleep(2))a/**/union/**/select+1)="

名無し / 2023年11月7日15:37
123456/**/and(select+1/**/from/**/pg_sleep(0))>0/**/

名無し / 2023年11月7日15:37
123456/**/and(select+1/**/from/**/pg_sleep(2))>0/**/

名無し / 2023年11月7日15:37
123456'/**/and(select'1'from/**/pg_sleep(0))::text>'0

名無し / 2023年11月7日15:37
123456'/**/and(select'1'from/**/pg_sleep(2))::text>'0

名無し / 2023年11月7日15:37
123456/**/and(select+1)>0waitfor/**/delay'0:0:0'/**/

名無し / 2023年11月7日15:37
123456/**/and(select+1)>0waitfor/**/delay'0:0:2'/**/

名無し / 2023年11月7日15:38
123456'and(select+1)>0waitfor/**/delay'0:0:0

名無し / 2023年11月7日15:38
123456'and(select+1)>0waitfor/**/delay'0:0:2

名無し / 2023年11月7日15:38
123456/**/and/**/0=DBMS_PIPE.RECEIVE_MESSAGE('q',0)

名無し / 2023年11月7日15:38
123456/**/and/**/1=DBMS_PIPE.RECEIVE_MESSAGE('x',2)

名無し / 2023年11月7日15:38
123456'/**/and/**/DBMS_PIPE.RECEIVE_MESSAGE('i',0)='i

名無し / 2023年11月7日15:38
123456'/**/and/**/DBMS_PIPE.RECEIVE_MESSAGE('t',2)='t

コメント投稿ページへ


書いている人

のぎ
PG->SE->PMとして働き、現在はIT企業で新卒採用の担当をしています。長期育休取得明けで0歳娘の対応に毎日バタバタです。笑
採用業務をしつつ社内利用ツールなど作成しており、当ブログも勉強の一環でコーディングして作成しています。 エンジニア領域、人事・採用領域、育児関連など発信していきます。