いいかお前ら、よく聞け!

web開発/日常/etc 辞め公務員です。

Janus-gatewayのcssを書き換えたい。web制作備忘録10

なんでなんだYO!!

いっぱい頑張ってcssやhtmlを書き換えたりしてます。

htmlはまだ良いのですが、cssは少しばかり複雑ですね。

どうやらjanus-gatewayのcssはbootstrapとかいうフレームワークを基本にしているようです。

部分的にdemo.cssで追記(書き換え)されているように見えます。

どうやらcssは後で書いたほうが優先される仕組みのようなので、demoで上書きを試みましたが、まったく反映されませんでした。

なんでなんだYO!!

 

試行錯誤しても解決せず。!importantを入れるとその設定が最優先になるとのこと。

デベロッパーツールでbootstrapのcssを見てみましたが、importantは作用してないように見えます。結局原因不明。仕方がないのでフレームワークのcssを直接いじることにしました。

htmlを見てみると、このフレームワークcssはjanusのインストール内容には含まれておらず、どこかから直接引っ張ってきているようです。

そのため、このままではいじれない。

いったんcssをダウンロードしないといけない。

github.com

投稿日現在のバージョンは5.3.2です。上のリンクからcssをダウンロードできます。

min.cssは圧縮ファイルのようで、本来膨大な行数に及ぶ内容が12行程度に短縮されてしまっているので、いじれません。

未圧縮のcssをダウンロードします。

上記リンクからのrawデータであれば、恐らく整形は必要ありませんが、cssがぐっちゃぐちゃのものでも整形してくれるサイトを活用すれば綺麗に整ったcssが手に入ります。

こことか↓

rakko.tools

 

あとは、デベロッパーツールでどこにどのcssが効いているのか確認しながらコツコツ変えていってます。

 

なお、ここで編集したjanusのbootstrap.cssには変数が用いられている。

変数についてはここで丁寧に解説されています。

www.webcreatorbox.com

 

 

ちなみに今回のパターンでは実力不足か、設定の問題なのか上書きできませんでしたが、下のサイトでは上書きが丁寧に解説されています。これで対処できるならこっちのほうが良さそうです。

creive.me

 

 

<よく使うリナックスコマンド>

ターミナル画面ではcdでディレクトリ移動するが、 cd ../ を入力すると1つ手前のディレクトリに戻れる。

あとfind -name 〇〇 をよく使っているが、これ細かい使い分けがわからなーい!

lsでディレクトリ内のファイルを一覧表示これもよく使う

wgetコマンドは -Pでディレクトリ指定できるが、しなくても現在見ているディレクトリ内にダウンロードしてくれる。

ダウンロード先のURLはただのうpロダ使用

tadaup.jp

cssのダウンロード先urlは↓で作った。でも使いにくい。url作るまでに何回もクリックしないといけないのが面倒

uploader.jp

ファイルの名前変更は mv 〇〇 △△ で〇〇から△△に名前が変更される。

rmコマンドは rm 〇〇 で〇〇という名前のファイルを削除する。

vimコマンドはしっかり終了コマンド使わないとスワップファイルができてエラーになる。:q!で保存せず終了 :wqで保存して終了。これで足りる。:ZZはなぜか使えない。

 

 

追記

bootstrapのcssを直接書き換えていて不都合が生じた

webページを構成するに当たって、各ページ毎に作成したindexファイルを載せることになるが、これが全部cssを引っ張ってくる設定になっている。

今回ダウンロードして書き換えたcssファイルをすべてのページに適用することもできるが、そうするとすべてのページに同じ背景画像が設定されてしまう。

工夫すれば何とかなりそうだが、浮かばない。

bodyタグを二つ使うのは多分無理。

うーん悩ましい。。。。。