bootstrapについての質問です

torabutta
(@torabutta)

7年、 10ヶ月前

bootstrap.cssを直接編集するのは良くないとの事なので上書き用にcustom.cssというものを作りました。
それでheader.phpに以下の文を追加しました。
<link href=”inc/css/bootstrap.min.css”rel=”stylesheet”>
<link href=”inc/css/bootstrap.css”rel=”stylesheet”>
<link href=”custom.css”rel=”stylesheet”>

テンプレートのCSSの場所にcustom.cssが表示されましたがbootstrap.cssは表示されていません。
また、custom.cssの中でサイズ変更などをやってみたものの何も変化が起こりませんでした。
custom.cssはThema>Sparking>custom.css
bootstrap.cssはThema>Sparking>inc>css>bootstrap.css となっております。bootstrap.min.cssも同じ場所です。

元々header.phpにはbootstrap.cssを読み込んでいるような文がありませんでした。
かわりにfanction.phpには
// Add Bootstrap default CSS
wp_enqueue_style( ‘sparkling-bootstrap’, get_template_directory_uri() . ‘/inc/css/bootstrap.min.css’ );
このような文がありました。
bootstrapを直接編集せず上書き方法で編集をしたいと考えています。　テーマはSparkingです。
どのようにすればcustom.cssでbootstrapを上書き出来るのでしょうか？　よろしくお願いします。

7件の返信を表示中 - 1 - 7件目 (全7件中)

T.Fujita
(@fujix)

7年、 10ヶ月前
wp_enqueue_styleを使うと WordPress側がヘッダにスタイルシート読み込みを書き出してくれます。普通、header.phpに直接linkを書くことはありません。
ですので、あなたの場合はheader.phpに追加した link href= … を削除し、function.phpに
```
wp_enqueue_style( ‘sparkling-bootstrap’, get_template_directory_uri() . ‘/inc/css/bootstrap.min.css’ );
wp_enqueue_style( ‘custom-css’, get_template_directory_uri() . ‘/custom.css’ );
```
と追加するのが正しい方法です。
あと、bootstrap.cssとbootstrap.min.cssは中身は同じなので、読み込むのは片方だけでいいです。
トピック投稿者 torabutta
(@torabutta)

7年、 10ヶ月前

素早いお返事ありがとうございます。
追加をしたのですが、テンプレート欄にbootstrap.cssが表示されていません。
それで試しにcustom.cssに
p {
margin: 5px 2px 5px 2px;
}
このような記述をしましたが、変化が起こりませんでした。

また検証でbootstrap.min.cssの欄の場所を探しました。それが以下の文です
@media (min-width: 992px)
.col-md-8 {
width: 66.66666667%;
}
この文をcustom.cssで入力し、widthの値を変更してみましたが何も影響がありませんでした。
記述方法や何かやり忘れた可能性はありますでしょうか？　現在は上書き出来る状態なのか？それとも変更したコードの書き方を間違えているのかよくわからない状態です。
どのようにすれば上書きが出来るのでしょうか？　よろしくお願いします。

munyagu
(@munyagu)

7年、 10ヶ月前

「テンプレート欄にbootstrap.cssが表示されていません」の意味は分かりませんが、bootstrap.min.cssのスタイルが適用されているのであれば、正しく読み込まれているのでしょう。

どのようにすれば上書きできるのかは、前回のご質問の回答を参考にしてみてください。
トピック投稿者 torabutta
(@torabutta)

7年、 10ヶ月前
テンプレート欄というのは外観＞テーマの編集の右の欄の事です。　
munyaguさんが教えてくれたリンクを辿った所jumbotronといったワードが出てきました。それがよくわからなかったので「css 上書き　bootstrap」で検索し次のページに書いてある事を参考にしました。

リンク貼れてますかね？　　

これでレイアウトが変更出来ると思っていたのですが、jumbotronというのをhtmlの中でクラス宣言をしなければレイアウト変更は出来ないのでしょうか？
またindex.htmlというのはテーマの編集の中にあるindex.phpの事でよろしいのでしょうか？
何度も質問して申し訳ないのですが、たくさんの情報を見て簡単に解決出来る方向へ流れてしまい、行き詰っている状況です。　どうかよろしくお願いします。
- この返信は7年、 10ヶ月前にtorabuttaが編集しました。
- この返信は7年、 10ヶ月前にtorabuttaが編集しました。
- この返信は7年、 10ヶ月前にtorabuttaが編集しました。
nobita
(@nobita)

7年、 10ヶ月前
こんにちは、

もうしばらくすると、WordPress4.7がリリースされます。

カスタマイザーに「追加CSS」というセクションが追加されるので、そこにCSSを記述することが出来るようになります。

Chromeなどで、bootstrapのスタイルが適用されていることがわかったら、適用されているルールセットをコピーして、

カスタマイザーの「追加CSS」に貼り付けて、プロパティの値を変更すれば、上書きできると思いますので（未テスト）しばらく待ってみてはどうでしょう

今すぐやりたい場合は、上記と同様の事をカスタマイザー/　Sparkling設定/その他/カスタムＣＳＳ　を使って　同様の事を試してみてはどうでしょうか？　簡単なので、、、
- この返信は7年、 10ヶ月前にnobitaが編集しました。
nobita
(@nobita)

7年、 10ヶ月前

追加

サイズ変更などをやってみた

bootstrapは、CSSフレームワークなので、テンプレートにクラスを記述したりすることでサイズ変更が出来るので、上記のような変更を行う場合は　テンプレートでクラス名を書き換えて対処するほうがいいかもしれないですよ。

「サイズ変更」等は、bootstrapを上書きした場合の影響範囲を見極めは　結構難しいと思いますので、テンプレートのクラス書き換えも検討してみてください

Akane
(@reguls)

7年、 10ヶ月前

他の方が回答されていなかったのでちょっとだけ追記。
外観＞テーマの編集に表示されるファイルはテーマフォルダ直下のファイルのみです。
ですので別階層にあるbootstrap.cssは表示されていないのです。